ajax 分页（jquery分页插件pagination） 小例3

Posted 2020-10-20 个子

<#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>