Ajax + jQuery + jsRender 实现弹框里的（无刷新）分页

最新推荐文章于 2023-09-23 13:22:08 发布

TrZoey

最新推荐文章于 2023-09-23 13:22:08 发布

阅读量753

点赞数

文章标签： ajax 分页

本文链接：https://blog.youkuaiyun.com/TrZoey/article/details/81530429

版权

今天要在页面的一个弹框里做一个分页，实现如下。

先看效果：

再上代码：

html：

            <div id="pagination" class="paging_old none" style="height: 40px;line-height: 40px;">
                <a href="javascript:;" id="previousPage" onclick="previousPage(this)">上一页</a>
                <span id="pages"></span>
                <a href="javascript:;" id="nextPage" onclick="nextPage(this)">下一页</a>
                <input id="isPage" type="text">
                <a href="javascript:;" id="jumpPage">跳转</a>
            </div>

分页Js


    function previousPage(th) {
        var page = $(th).attr("page");
        getCompany(page);
    }
    function nextPage(th) {
        var page = $(th).attr("page");
        getCompany(page);

    }
    function toPage(page) {
        getCompany(page);
    }

    var page = "";
    var pageSize = "";
    var pages = "";
    var total = "";

    function pagenation() {
        if (total > 5) {
            $("#pagination").show();
            if (page == 1) {
                $("#previousPage").hide();
            } else {
                $("#previousPage").show();
                $("#previousPage").attr("page", parseInt(page) - 1);
            }
            if (page == pages) {
                $("#nextPage").hide();
            } else {
                $("#nextPage").show();
                $("#nextPage").attr("page", parseInt(page) + 1);
            }

            $("#pages").html("");
            var pn = Number(page) - 6;
            for (var i = 1; i <= 11; i++) {
                if ((pn + i) > 0 && (pn + i) <= Number(Number(total) + Number(pageSize) - 1) / Number(pageSize)) {
                    if (page == (pn + i)) {
                        $("#pages").append(
                            "  <a href='javascript:;' style='background-color:#ff6600;color:#FFF;'>"
                            + (pn + i) + "</a>  ")
                    } else {
                        $("#pages").append("<a href='javascript:;' onclick='toPage(" + (pn + i) + ")'>" + (pn + i) + "</a>")
                    }
                }
            }

        } else {
            $("#pagination").hide();
        }
    }
    $("#jumpPage").click(function () {
        if ($("#isPage").val() != null
            && $("#isPage").val() > 0
            && ($("#isPage").val() <= Math.ceil(total / pageSize))) {
            getCompany($("#isPage").val())
        }
    })

获取数据Js


    function getCompany(getPage) {
        $.ajax({
            type: "GET",
            url: "url",
            async: false,
            data: {
                "page": getPage,
                "keyword": keyword
            },
            success: function (msg) {
                if (msg != null && msg != "") {
                    var data = JSON.parse(msg);
                    console.log(data);
                    var html = $("#companyTmpl").render(companyList);
                    $("#companyTable").html("");
                    $("#companyTable").append(html);
                    page = data.page;
                    pageSize = data.pageSize;
                    pages = data.pages;
                    total = data.total;
                }
            },
            complete: function () {
                pagenation();
            }
        });
    }

弹框打开时获取第一页：

    $(".link_company>input").on('focus', function () {
        layer.open({
            type: 1,
            title: '弹框',
            skin: 'layui-layer-orange',
            closeBtn: 1,
            area: '750px',
            scrollbar: false,
        });
        getCompany(1);
    })