项目中的一个分页功能pagination

Posted 2020-10-02 幽冥狂_七

项目中的一个分页功能pagination

  
<script>
    //总页数
    var total = 0;
    var pageCount = 0;  //分页总数量


    $(function () {
        // $("#pagination").pagination(pageCount); //简单初始化方法
        f1();
    });

    function f1() {
        $.ajax({
            url: "/Business/CustomerFollow/FindListCount",
            data: "",
            dataType: "text",
            success: function (data) {
                pageCount = data;
                f2();
            },
            error: function (err) {

            }
        });
    }

    function f2() {
        $("#pagination").pagination(pageCount,    //分布总数量，必须参数
        {
            prev_text: "上一页",
            next_text: "下一页",
            items_per_page: 3,
            num_edge_entries: 2,       //两侧首尾分页条目数
            num_display_entries: 10,    //连续分页主体部分分页条目数
            current_page: 0,   //当前页索引
            //link_to: "?id=__id__",  //分页的js中会自动把"__id__"替换为当前的数。0　
            link_to: "javascript:void(0)",
            callback: PageCallback  //PageCallback() 为翻页调用次函数。
        });
    }

    function PageCallback(pageIndex, jq) {
        pageIndex = pageIndex + 1;
        var pages = { rows: 3, pages: pageIndex };
        pages = JSON.stringify(pages);
        var datas = { param: pages }

        $.ajax({
            type: "POST",
            dataType: "json",
            url: ‘/Business/CustomerFollow/PaginationList‘,     //提交到一般处理程序请求数据
            data: datas,                                        //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
            success: function (da) {

                //后台服务返回数据，重新加载数据
                var htmls = "";
                var datas = da.followlist;
                var saa = [];
                for (var i = 0; i < datas.length; i++) {

                    htmls += "<table class=\"ui-jqgrid-btable ui-common-table table table-bordered\" style=\" background:#ffffff!important; margin-bottom:30px;\"><tr class=\"jqgfirstrow\"><td style=\"height:50px;line-height:50px;\">" + datas[i].CustomerId + "</td>" +
                                "<td style=\"height:50px;line-height:50px;\">" + datas[i].F_FullName + "</td><td style=\"height:50px;line-height:50px;\">" + datas[i].F_Msisdn + "</td>" +
                                "<td style=\"height:50px;line-height:50px;\">" + datas[i].F_CreatorTime + "</td><td style=\"height:50px;line-height:50px;\">" + datas[i].F_CreatorUserName + "</td></tr>" +
                                "<tr><td colspan=\"5\"><textarea id=\"" + datas[i].FollowId + "\" class=\"ckeditor\">" + datas[i].F_Description + "</textarea></td></tr></table>";
                    saa.push(datas[i].FollowId);
                }

                $("#tbodyHtmlId").html(htmls);
                for (var j in saa) {
                    CKEDITOR.replace(saa[j]);
                }
                addblur();
            }
        });
    }

</script>