Question

this code I used to display paginating links… problem is I need to add some style to the links when its active.. I can style it through some CSS rules.. but at first need to add a class to link tag.. Eg:

    // Make the links to other pages, if necessary.
    if ($pages > 1) {

        echo '<div class="pagination">';            
            echo '<p>';

            // Determine what page the script is on:
            $current_page = ($start/$display) + 1;

            // If it's not the first page, make a Previous link:
            if ($current_page != 1) {
                echo '<a href="searching.php?s=' . ($start - $display) . '&p=' . $pages . '"><</a>';
            }

            // Make all the numbered pages:
            for ($i = 1; $i <= $pages; $i++) {
                if ($i != $current_page) {
                    echo '<a href="searching.php?s=' . (($display * ($i - 1))) . '&p=' . $pages . '">' . $i . '</a> ';
                } else {
                    echo '<a class="current" href="#">' . $i . '</a> '; // Link to # so that it is not clickable.
                }
            } // End of FOR loop.           

            // If it's not the last page, make a Next button:
            if ($current_page != $pages) {
                echo '<a href="searching.php?s=' . ($start + $display) . '&p=' . $pages . '">></a>';
            }

            echo '</p>'; // Close the paragraph.

        echo '</div>';

    } // End of links section.  

can anybody have any idea how to do this?

thank you..

Answer 1

Replace <a href=" with something like <a class="current" href=".

So, you would be effectively needing this CSS, as I assume that you will be having a current page at a time, plus normal page links, and previous and next buttons:

<div class="pagination">
    <a href="#" class="prev">Previous</a>
    <a href="#">1</a>
    <a href="#" class="current">2</a>
    <a href="#">3</a>
    <a href="#" class="next">Next</a>
</div>

Wrap with a div with a class pagination, so that you can better style it. Now for the styles, you can use a CSS something like this:

.pagination {margin: 5px;} /* Give some margin */
.pagination a {color: #09f; text-decoration: none;} /* Give color, remove underline */
.pagination a:hover {font-weight: bold;} /* Effect when mouse over */
.pagination a.prev, .pagination a.next {color: #06f;} /* Let previous and next be in different color*/
.pagination a.current {color: #000; font-weight: bold;} /* Black and bold! */

Screenshot:

This would look this way:

Fiddle: http://jsfiddle.net/3Z9Jk/

To change in your code:

for ($i = 1; $i <= $pages; $i++) {
 if ($i != $current_page) {
  echo '<a href="searching.php?s=' . (($display * ($i - 1))) . '&p=' . $pages . '">' . $i . '</a> ';
 } else {
  echo '<a class="current" href="#">' . $i . '</a> '; // Link to # so that it is not clickable.
 }
}

Please change these:

1.

if ($current_page != 1) {
    echo '<a class="prev" href="searching.php?s=' . ($start - $display) . '&p=' . $pages . '"><</a>';
}

2.

if ($current_page != $pages) {
    echo '<a class="next" href="searching.php?s=' . ($start + $display) . '&p=' . $pages . '">></a>';
}