ajax 分页(jquery分页插件pagination) 小例3
<#macro ajaxPaginte url > <script type="text/javascript"> var PageSize = 10;//每页行数 var IsInit = true;//初始化 var search= function(pageIndex,initFlag) { var url = "${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); } }); } var initPagination = function (Count) { // 创建分页 $("#Pagination").pagination(Count, { first_text:'首页', last_text:'尾页', num_display_entries:10, callback: pageselectCallback, items_per_page: PageSize //每页显示行数 }); } function pageselectCallback(page_index, jq) { if (!IsInit) search(page_index + 1); return false; } $(function () { search(1, true);//1代表第一页 }); </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">名字</th> <th class="col-mo-2">性别</th> <th class="col-mo-2">电话</th> <th class="col-mo-1">操作</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?"男":"女"; 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>选取</a></td></tr>"; }); $("#user-list-table>tbody").empty().append(table_body); </@ajaxPaginte>