Building the front-end paging tool instance code based on bootstrap and jquery _jquery

Objective

Why is the name "front page paging tool"? Because I really can't think of a good name, if you want more appropriate understanding of this tool, should be from the business perspective

Business is like this, there is a data from the background to the foreground, because the amount of data is not large, so the direct display can be sent, but =. = The so-called amount of data is not large, up to hundreds of thousands of bars, it is not possible to display all, then need pagination

Regular paging is the use of Ajax, through the page offset to the background, background query database and return data, you can achieve no refresh paging, the data is also the latest

Front Page Paging

Advantages: Data transmission at a time, to avoid users repeatedly request the server, reduce network bandwidth, server scheduling pressure, database query, cache query pressure

Disadvantage: New data cannot be updated in real time unless the user requests the data again

Process

At first I do not want to build the wheel, want to finish as soon as possible, so find a long time bootstrap tool, found a bootstraptable, this plug-in is very powerful, in addition to the normal way to paging, but also can specify data (JSON), for the front page paging

However, this is a form page, that is to say, if it is not a table it is useless, just ... My business is not a form. Then only see the plugin source code changes, changed beyond recognition, the last toilet back, think of a better way, so delete ...

Solution: First think about what pagination is for? Show the page you want to see, hide what you don't want to see. Yes, you can use the display properties of CSS

Version

Bootstrap-3.3.0

jQuery-1.11.3

Code

JavaScript

<script type= "Text/javascript" >//Previous function previous () {//current page -1 new_page = parseint ($ (' #current_page '). Val ())
-1;
Go_to_page (New_page); //Next function Next () {//current page +1 new_page = parseint ($ (' #current_page '). Val ()) + 1; go_to_page (new_page);}//Jump to a page functi On Go_to_page (page_num) {$ ('. page_link[longdesc= ' + Page_num + ']). Parent (). addclass (' active '). Siblings ('. Active ').
Removeclass (' active ');
Get the number of pages in a hidden field (how many data per page) var show_per_page = parseint ($ (' #show_per_page '). Val ()); Get the number of pieces from where the element starts (click on page * page size) such as click on page 5th, 5/page.
Then begins to Start_from = Page_num * show_per_page;
Gets the number of elements of the end slice, if the start is 25, 5/page, then end for end_on = Start_from + show_per_page; Hides the contents of all child div elements, displaying specific piece data, such as displaying 25~30 $ (' #datas '). Children (). CSS (' Display ', ' none '). Slice (Start_from, end_on). CSS ('
Display ', ' inline-block ');
Number of displayed per page var show_per_page = 10;
Gets the number of total data var Number_of_items = $ (' #topics '). Children (). Size ();
Calculates the number of pages var number_of_pages = Math.ceil (number_of_items/show_per_page); Pages offset if (page_num >= 2) && (Page_Num <= (number_of_pages-3)) {//Raw ingredient page-> previous page var page_info = ' <li><a class= ' previous_link ' href= ' javascript :p revious ();
>«</a></li> ';
var p = page_num;
var i = page_num-2;
var j = Page_num + 2; Raw Ingredients Page-> top 2 while (Page_num > i) {page_info + = ' <li><a class= ' page_link ' href= ' javascript:go_to_page (' + I
+ ' "longdesc=" ' + i + ' "> ' + (i + 1) + ' </a></li> ';
i++; ///Raw Ingredients page-> Current page Page_info + = ' <li><a class= ' page_link ' href= ' javascript:go_to_page (' + page_num + ') ' longdesc=
"' + page_num + '" > ' + (page_num + 1) + ' </a></li> '; Raw Page-> 2 while (P < j) {if (p = = number_of_pages) {break;} Page_info + = ' <li><a class= ' Page_link ' href= ' j
Avascript:go_to_page (' + (p + 1) + ') ' longdesc= ' + (p + 1) + ' > ' + (p + 2) + ' </a></li> ';
p++; ///RAW Ingredients page-> next page Page_info + = ' <li><a class= ' next_link ' href= ' Javascript:next (); "
>»</a></li> ';
Load paging $ ('. pagination '). HTML (page_info); $ ('. PagE_link[longdesc= ' + Page_num + ']. Parent (). addclass (' active '). Siblings ('. Active '). Removeclass (' active '); else{//otherwise do not offset//Activate a page so that a page is displayed $ ('. page_link[longdesc= ' + page_num + '] '). Parent (). addclass (' active '). Siblings ('.
Active '). Removeclass (' active ');
//Update current page in hidden field $ (' #current_page '). Val (Page_num);
$ (function () {//Number of displays per page var show_per_page = 10;//Get the number of topic data var Number_of_items = $ (' #datas '). Children (). Size ();
var number_of_pages = Math.ceil (number_of_items/show_per_page);
Sets the default value of hidden fields $ (' #current_page '). val (0);
$ (' #show_per_page '). Val (show_per_page); Raw Ingredient page-> previous var page_info = ' <li><a class= ' previous_link ' href= ' javascript:previous ();
>«</a></li> ';
var current_link = 0; Raw page-> pages while (Number_of_pages > Current_link) {if (Current_link = = 5) {break;} page_info = ' <li><a clas s= "Page_link" href= "javascript:go_to_page (' + Current_link + ')" longdesc= "' + Current_link + '" > ' + (current_link + 1) + '
</a></li> ';
current_link++; }
//Raw Ingredients Page-> next Page_info + = ' <li><a class= ' next_link ' href= ' Javascript:next (); "
>»</a></li> ';
Load paging $ ('. pagination '). HTML (page_info); Raw Page-> Total left $ ("#data-total-page"). html (show_per_page+ "bar/page, total" +number_of_pages+ "page")//Activate the first page so that the first page is displayed $ (' #
Data-pagination li '). EQ (1). addclass (' active ');
Hides all child elements under this object $ (' #datas '). Children (). CSS (' Display ', ' none ');
Displays the nth (show_per_page) Element $ (' #datas '). Children (). Slice (0, show_per_page). CSS (' Display ', ' inline-block ');
}); </script>

Html

<!--data-->
<div id= "Datas" >
<?php
foreach ($data as $v)
{
echo ' <div class= ' Data ">
<div class=" Data-info ">
<div class=" Data-name "> ' + $v [' name '] + ' </div>
< Div class= "Data-blog" > ' + $v [' blog '] + ' </div>
</div>
</div>
';
>
</div>
<!--pagination-->
<input type= "hidden" id= "current_page" value= "0" >
<input type= "hidden" id= "show_per_page" value= "0" >
<div id= "Data-page-info" >
<div id= " Data-total-page "></div>
<div id=" data-pagination ">
<ul class=" pagination "></ul >
</div>
</div>

The effect is as follows

Dynamic switching

The above is a small set for you to introduce the bootstrap and jquery based on the front-end page tool example code, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!