Bootstrap Paginator Paging plug-in combined with Ajax to achieve dynamic no-refresh paging effect _javascript skills

Bootstrap Paginator Paging plugin download Address:

Downloadvisit Project in GitHub

1. This is the need for pagination page to put the JS function:

<span style= "FONT-SIZE:14PX;" >function Paging (page) { 
$.ajax ({ 
type: "Get", 
URL: "${ctx}/api/v1/user/1/" + (page-1) + "/5", 
DataType: "JSON", 
success:function (msg) { 
...//omitted (query out data) 
} 
}); 
$.ajax ({ 
type: "Get", 
URL: "${CTX}/API/V1/USER/COUNT/1", 
dataType: "JSON", 
success:function ( msg) { 
var pages = Math.ceil (MSG.DATA/5);//Here data contains the total number of 
var element = $ (' #pageUl ');//corresponding to the following UL ID 
var Options = { 
Bootstrapmajorversion:3, 
currentpage:page,//current page 
numberofpages:5,// One page shows several buttons (generate 5 Li in ul) 
totalpages:pages//Total pages 
} 
element.bootstrappaginator (options); 
} </span> 

Page:

<span style= "FONT-SIZE:14PX;" ><ul class= "pagination" id= "Pageul" > 

It's automatically generated inside the *li.

2. The most important and the core is to change their own bootstrap-paginator.js source files , as follows:

<span style= "FONT-SIZE:14PX;" >onpageclicked:function (event, originalevent, type, page) { 
//show the corresponding page and retrieve the newly Built item related to the page clicked before for the event return 
var currenttarget = $ (event.currenttarget); 
Switch (type) {case "a" 
: 
currenttarget.bootstrappaginator ("Showfirst"); 
Paging (page); 
break; 
Last page case 
"prev": 
currenttarget.bootstrappaginator ("showprevious"); 
Paging (page); 
break; 
Case "Next": 
currenttarget.bootstrappaginator ("Shownext"); 
Paging (page); 
break; 
Case "Last": 
currenttarget.bootstrappaginator ("Showlast"); 
Paging (page); 
break; 
Case "page": 
currenttarget.bootstrappaginator ("show", page); 
Paging (page); 
break; 
 

* After you click on the page style out of the call Paging (page) method, where the page source file parameters have been, direct transmission!

Effect: When the style changes, directly take the control page value of the AJAX request to send! Finally, no refresh paging is implemented.

The above is a small set to introduce the Bootstrap Paginator page Plug-ins and Ajax combined to achieve dynamic no refresh paging effect of the relevant knowledge, 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!