how to create pagination like stackoverflow

Question

hello all

how to create pagination like stackoverflow?

Answer 1

You didn't say what server side technology you are using but if you want a pure client side solution you may take a look at the jQuery Pagination plugin. Here's a demo page.

Answer 2

Use Jquery plugin pagination

  http://plugins.jquery.com/project/pagination

Answer 3

Just include jquery and jquery pagination plugin in your page and use this,

<div class="pager" id="Pagination">
  <!-- the container for your first pagination area -->
</div>

<script type="text/javascript">
        $(document).ready(function() {
            $(".pager").pagination(300, { callback: pagecallback,
                current_page: 0,
                items_per_page: 5,
                num_display_entries: 5,
                next_text: 'Next',
                prev_text: 'Prev',
                num_edge_entries: 1
            });
        });
</script>

.css class:

.pager {
margin-bottom:10px;
margin-top:10px;
}
.page-numbers {
border:1px solid #CCCCCC;
color:#808185;
display:block;
float:left;
font-family:Trebuchet MS,Helvetica,sans-serif;
font-size:130%;
margin-right:3px;
padding:4px 4px 3px;
text-decoration:none;
}
.page-numbers.desc {
border:medium none;
}
.page-numbers:hover {
text-decoration:none;
}
.pager a {
color:#808185;
cursor:pointer;
text-decoration:none;outline:none;
}
.pager a:hover {
text-decoration:underline;
}
.pager a:visited {
color:#808185;outline:none;
}
.page-numbers.next, .page-numbers.prev {
border:1px solid #CCCCCC;
}
.page-numbers.current {
background-color:#808185;
border:1px solid #808185;
color:#FFFFFF;
font-weight:bold;
}
.page-numbers.dots {
border:1px solid #FFFFFF;
}

Answer 4

If you are looking for a server-side solution, I recommend you this tutorial: http://net.tutsplus.com/tutorials/php/how-to-paginate-data-with-php/