1. Achieving results
2. Logic description, through the AJAX request to get all the data, return the object data, in the DOM loading completed is called this method to complete the data loading and paging component initialization, the following is the use of demo instructions, the dependency JS Library is attached later.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Insert Title here</title><Scripttype= "Text/javascript"src= "/js/jquery-1.7.2.min.js"></Script><Scripttype= "Text/javascript"src= "/js/jquery.tmpl.min.js"></Script><Scripttype= "Text/javascript"src= "/js/jquery.pagination.js"></Script><Scripttype= "Text/javascript"src= "/page.js"></Script><styletype= "Text/css">Body{font-size:120%;Color:#333333;Line-height:1.4;}a{Color:#34538b;}#pageBar a{padding:10px 20px;background:#f0f3f9;}</style><Scripttype= "Text/javascript"> $(function(){ //Initializing Data functionInitData (_type) {//set up 1W test data varJSON= []; for(varI=0; I<10000; I++) {Json.push ({name:"Zhang San"+i,age:i*2, Sex:'male', Birthday:NewDate ()}); } Setdataandpagebar ("#pageBar","#ul-list","#dataTemplate", JSON,Ten,8,2); } initdata (1); });</Script></Head><Body><!--defining a jquery template -<ScriptID= "DataTemplate"type= "Text/x-jquery-tmpl"> <Li>${name},${age},${sex},${birthday}</li></Script><!--Data List -<DivID= "List"> <ulID= "Ul-list"></ul></Div><!--Paging Component -<DivID= "Pagebar"class= "pagination"></Div></Body></HTML>
Brief description:
① first import the following package: Jquery-1.7.2.min.js, Jquery.tmpl.min.js, jquery.pagination.js,page.js four JS, the first three are officially provided, page.js their own package as follows source code as follows
(function(){ /** 2015-05-29 * Gaojun.zhou * Set paging component and Data * Pagebarid tab toolbar ID * Showdataid Show data list parent container ID * Tmplid JQ Uery Template ID * data all Datasets * pageSize display number of data bars per page * displaysize Maximum number of paged body pages * Entriessize edges*/ functionSetdataandpagebar (pagebarid,showdataid,tmplid,data,pagesize,displaysize,entriessize) {//This is a very simple demo instance where the list elements are paginated //the function of the callback function is to display the contents of the list item corresponding to the paging //the callback function executes each time the user clicks the paging link //parameter Page_index{int integer} represents the current index page varInitpagination =function() { varNum_entries =data.length; //Create a page split$ (Pagebarid). Pagination (num_entries, {num_edge_entries:entriessize? entriessize:1,//Edge PagesNum_display_entries:displaysize?displaysize:8,//Number of main pagescallback:pageselectcallback, items_per_page:pagesize}); }(); //get Data on page n functionGetnumpagedata (data1,pagesize1,page_index1) {varD2 = []; varTotalpage = data1.length% pageSize1 ==0? Data1.length/pagesize1:parseint (DATA1.LENGTH/PAGESIZE1) +1; //alert (); if(page_index1<totalpage-1){ for(vari = pagesize1*page_index1;i< (pagesize1*page_index1) +pagesize1;i++) {D2.push (data1[i]); } }Else{ for(vari = pagesize1*page_index1;i<data1.length;i++) {D2.push (data1[i]); } } returnD2; } functionPageselectcallback (Page_index, JQ) {$ (Showdataid). empty ();//Clear Data$ (tmplid). Tmpl (Getnumpagedata (Data,pagesize,page_index)). AppendTo (Showdataid); return false; }} Window.setdataandpagebar= Setdataandpagebar | | {};}) ();Page.js Source
② page defines the Jquey template, defines the display data list of the UL, also table, here to see requirements, define a paging component bar.
③initdata, this method is through the loop set 1W test data, in the call Setdataandpagebar this method to complete the data display and page bar display.
④Setdataandpagebar, the emphasis of this method, defined in the Page.js, the inside passed 7 parameters, in the Page.js have detailed description. In order, click the following
/** 2015-05-29
* Set up paging components and data
* Pagebarid tab Toolbar ID
* Showdataid Display data list parent container ID
* Tmplid jquery Template ID
* All data collection
* PageSize shows the number of data bars per page
* Displaysize Maximum number of page pages to display
* Entriessize Edge Number
*/
3. Complete demo, is an Eclipse Web project
Http://files.cnblogs.com/files/zhougaojun/ajax.png.zip
Jquery.pagination with Jquery.tmpl Package front page--Pure JS implementation is not related to back-end language--suitable for all front page paging situation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
