用Jquery显示分页

Question

For example: I have 101 pages of results retrieve from database and I echoed it out like this:

$num_rec_per_page=5;
$result = mysqli_query($conn,$sql)
$total_records= mysqli_num_rows($result); // Get the number of rows
$total_pages = ceil($total_records / $num_rec_per_page);
...
for ($i=1; $i<=$total_pages; $i++){
 echo "<li class='num-pager'><a href=\"http://....&page=$i\">Page $i</a></li>";
}

Now I would like to display only 5 pages, so I write a simple jquery like this:

<script>
jQuery(function($) {
var page = $(".num-pager");
var totalPages = page.length;
var displayRange = 2;
var showFrom = 0;
var showTo = 5;
page.hide();
page.slice(showFrom,showTo).show();
});
</script>

So instead of showing all 101 pages like this: Page 1 | Page 2 | Page 3 ...Page101

I would like to show only 5 pages: Page 1 | Page 2 | Page 3 | Page 4 | Page 5

The problem comes from here: What if user wants to view page 6??? So I came up in mind that: if user click Page 5 (page number = showTO variable), it will add displayRange=2 to showFrom and showTo variables in the js code so that it will display from Page 3 to Page 7 like this:

Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7

This is only theory, I don't know how to apply it for this advanced case. Please help...Many thanks