• 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方法
    }
  • 相关阅读:
    JavaScript WebSocket C# SuperSocket.WebSocket 示例
    Nginx 配置
    Temporary Post Used For Theme Detection (272f6d70fb8946f3a568afd3d7b053bd 3bfe001a32de4114a6b44005b770f6d7)
    SpringBoot多数据源事务解决方案
    SpringBoot集成mybatis拦截器修改表名
    点击各个按钮,在执行操作之前出现确认提示框
    incoming change和current change
    Expected Number with value 8, got String with value "8".
    正则只能输入数字遇到的问题
    Antd 4.19 Modal + Form;打开modal时使用setFieldsValue,首次回显正常,第二次无效?
  • 原文地址:https://www.cnblogs.com/Xanthus/p/9487352.html
Copyright © 2020-2023  润新知