zoukankan      html  css  js  c++  java
  • jquery.pagination.js数据无刷新真分页

    定义一个全局的分页加载变量,并设置为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方法
    }
  • 相关阅读:
    如何选择自动化测试框架
    Android Crash 定位
    Tomcat 高性能实现关键点
    测试用例 自动生成工具PICT与AllPairs
    《活出生命的意义》节选
    java设计模式-Iterator
    java设计模式-State模式
    java设计模式-Command模式
    java设计模式-桥接模式
    小橘灯
  • 原文地址:https://www.cnblogs.com/Xanthus/p/9487352.html
Copyright © 2011-2022 走看看