jquery.pagination.js数据无刷新真分页

时间:2022-12-09 15:24:16

定义一个全局的分页加载变量,并设置为true:

var __isReSearch=true;

定义分页的一些数据:

var __PageSize = 10;
var __SearchCondition = { "PageSize": __PageSize, "PageIndex": 0,  "SortField": ""};
var __TotalCount;

写一个数据模板:

<script type="text/template" id="CD_DataListTemplate">
    <tr>
        <td>{a}</td>
        <td>{b}</td>
        <td>{c}</td>
        <td>{d}</td>
        <td>{e}</td>
    </tr>
</script>

当从服务器加载了数据,进行数据展现和分页展现:

function onSearchSuccess(resultJsonData) {
    __TotalCount = resultJsonData.TotalCount;
    var pageCount = 0;
    pageCount = parseInt(resultJsonData.TotalCount / __SearchCondition.PageSize);
    if (resultJsonData.TotalCount % __SearchCondition.PageSize > 0) {
        pageCount++;
    }
    if (resultJsonData.TotalCount > 0) {
        var userHtml = "";
        $("#tbody").html('');
        //debugger;
        for (var i = 0; i < resultJsonData.WorkOrderManagerList.length; i++) {
            userHtml += $("#tl_WorkOrderManagerInfo").html()
            .replace(/{a}/g, resultJsonData.WorkOrderManagerList[i].a)
            .replace(/{b}/g, resultJsonData.WorkOrderManagerList[i].b)
            .replace(/{c}/g, resultJsonData.WorkOrderManagerList[i].c)
            .replace(/{d}/g, resultJsonData.WorkOrderManagerList[i].d)
            .replace(/{e}/g, resultJsonData.WorkOrderManagerList[i].e);
        }
        $("#tbody").html(userHtml);

        if (__isReSearch) {
            //debugger;
            $("#xx").show();
            $("#xx").page("destroy");
            $("#xx").page({
                total: resultJsonData.TotalCount,
                pageSize: __PageSize,
                pageBtnCount: 9,
                showFirstLastBtn: true,
                firstBtnText: "首页",
                lastBtnText: "尾页",
                prevBtnText: "上一页",
                nextBtnText: "下一页",
                loadFirstPage: true,
                showInfo: true,
                infoFormat: '{start} ~ {end}条,共{total}条',
                showJump: false,
                jumpBtnText: '确定',
                showPageSizes: false,
                pageSizeItems: null
            }).on("pageClicked", function (event, pageIndex) {
                getDataByPage(pageIndex);
            });
            
        }
    } else {
        $("#xxx").hide();
        $("#tbody").html('');
        $("#tbody").html('<tr><td colspan=n>无记录</td></tr>');
    }
}

点击分页之后加载数据,但不需要再重刷分页:

function getDataByPage(pageIndex) {
    __isReSearch = false;
    __SearchCondition.PageIndex = pageIndex;
    search(); //这个方法会加载数据并调用onSearchSuccess方法
}