< #macro ajaxpaginte URL ><script type= "Text/javascript" >varPageSize = 10;//number of rows per page varIsinit =true;//Initialize varSearch=function(pageindex,initflag) {varurl = "${url}"; $.ajax ({type:' GET ', Url:url, data: {pagenumber:pageindex,pagesize:pagesize,skuid:$ ("#skuId"). Val (), skumodel:$ ("#skuModel"). Val ()}, Success:function(data) {if(Initflag) {initpagination (data.total); Isinit=false; } < #nested >}, Error:function(msg) {Console.log (msg.responsetext); } }); } varInitpagination =function(Count) {//Create a page split$ ("#Pagination"). Pagination (Count, {first_text:Home, Last_text:Last, Num_display_entries:10, Callback:pageselectcallback, Items_per_page:pagesize//number of rows displayed per page }); } functionPageselectcallback (Page_index, JQ) {if(!isinit) Search (Page_index+ 1); return false; } $(function() {Search (1,true);//1 represents the first page }); </script> </#macro >
<div class= "Panel panel-default" ><div class= "panel-body" >< #include "/common/ajaxpaginte.html" > <table class= "Table table-bordered" id= "user-list-table" ><thead> <tr><th class= "Col-mo-2" > Name </th><th class= "Col-mo-2" > Gender </th><th class= "col-mo-2" > Phone </th> <th class= " Col-mo-1 "> Operation </th></tr></thead><tbody></tbody></table><div id=" Pagination "class=" pagination "></div></div></div>< @ajaxPaginte"/system/user/ listuserbyajax/"> var table_body=" "; $.each (Data.records,function (index,value) {var sex=value.sex==1? Male ":" Female "; table_body+= "<tr><td>" +value.realname+ "</td><td>" +sex+ "</td><td>" + value.tel+ "</td><td><a class= ' btn btn-primary btn-xs ' href= ' javascript:; ' onclick= ' Select_row ({name : \ "" +value.realname+ "\", id:\ "" +value.id+ "\"}) ' > <i class= ' fa fa-pencil-sQuare-o ' ></i> selection </a></td></tr> '; }); $ ("#user-list-table>tbody"). Empty (). append (Table_body); </@ajaxPaginte >
Ajax Paging (jquery page plug-in pagination) Small Example 3