jQuery Pagination问题记录

1.后台分页，前端无法正确计算页码（只显示第一页）

问题截图：

原代码：

 $(function () {
        var pageSize = 10; // 每页显示多少条记录
        var total;//总记录数
        Init(0);
        $("#pagination").pagination(total, {
            items_per_page: pageSize,
            callback: pageselectCallback,
            prev_text: '上一页',
            next_text: '下一页',
            num_display_entries: 4, // 连续分页主体部分显示的分页条目数
            num_edge_entries: 1, // 两侧显示的首尾分页的条目数
        });

        //点击上一页、下一页、页码的时候触发的事件
        function pageselectCallback(index, jq) { // index表示当前点击的那个分页的页数索引值-1(基0)，
            // 后一个参数表示装载容器。
            Init(index)l;
        }

        function Init(pageIndex) { // 参数就是点击的那个分页的页数索引值
            $.ajax({
                url: "/studentsign/getNoticeForS.do",
                type: "post",
                dataType: "json",
                data: {
                    "pageNo": pageIndex + 1,//基1
                    "pageSize": pageSize
                },
                success: function (data) {
                    // 赋值total，用于计算
                    total = data.data.total;
                    console.log(total);
                    $("#list").empty();
                    $.each(data.data.list, function (i, item) {
                        $("#list").append("<li>" + item.title + "</li>")
                    });
                },
                error: function () {
                    alert("请求超时，请重试！");
                },
            });
        }
    });

原因：ajax默认为异步加载，没有设置同步加载，导致total值没有赋上，分页插件就已经加载完毕。

解决办法：添加

                async: false,

---

2.jQuery Pagination插件页面初始化时请求两次

问题截图：

原因：因为使用的是后台分页，所以初始化时需要一次请求，而jQuery Pagination插件的回调函数又请求了一次。

解决办法：调用回调函数时加上判断（加红还加粗的部分）：完整代码：

$(function () {
    var isFirstLoad = true;
    var pageSize = 10; // 每页显示多少条记录
    var total;//总记录数
    Init(0);
    $("#pagination").pagination(total, {
        items_per_page: pageSize,
        callback: pageselectCallback,
        prev_text: '上一页',
        next_text: '下一页',
        num_display_entries: 4, // 连续分页主体部分显示的分页条目数
        num_edge_entries: 1, // 两侧显示的首尾分页的条目数
    });

    //点击上一页、下一页、页码的时候触发的事件
    function pageselectCallback(index, jq) { // index表示当前点击的那个分页的页数索引值-1(基0)，
        // 后一个参数表示装载容器。
        isFirstLoad ? isFirstLoad = false : Init(index)
    }

    function Init(pageIndex) { // 参数就是点击的那个分页的页数索引值
        $.ajax({
            url: "/studentsign/getNoticeForS.do",
            type: "post",
            async: false,
            dataType: "json",
            data: {
                "pageNo": pageIndex + 1,//基1
                "pageSize": pageSize
            },
            success: function (data) {
                // 赋值total，用于计算
                total = data.data.total;
                console.log(total);
                $("#list").empty();
                $.each(data.data.list, function (i, item) {
                    $("#list").append("<li>" + item.title + "</li>")
                });
            },
            error: function () {
                alert("请求超时，请重试！");
            },
        });
    }
});