分页插件

最新推荐文章于 2023-07-30 13:32:42 发布

一路追求匠人精神

最新推荐文章于 2023-07-30 13:32:42 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_36566924/article/details/86595423

前端专栏收录该内容

115 篇文章

订阅专栏

本文介绍了一个使用bootstrapPaginator实现分页功能的代码示例，详细展示了如何通过设置参数来定制分页样式，以及如何绑定点击事件以触发数据加载。代码中包含了对不同分页类型的文字显示、版本兼容性配置、显示页数设定等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明1：参考页面为https://www.cnblogs.com/evilliu/articles/6393336.html

说明2：分页代码如下

$('#pageLimit').bootstrapPaginator({
    currentPage: _noticePage,    //当前需要显示的页面
    totalPages: _totalPage,       //一次显示多少个页面
    size: "large",
    bootstrapMajorVersion: 3,     //bootstrap需要的版本要求
    numberOfPages: 8,              //一次能显示多少页
    itemTexts: function (type, page, current) {
        switch (type) {
            case "first":
                return "首页";
            case "prev":
                return "上一页";
            case "next":
                return "下一页";
            case "last":
                return "末页";
            case "page":
                return page;
        }//默认显示的是第一页。
    },
    onPageClicked: function (event, originalEvent, type, page) {//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
        var _prama = gPrama;
        _prama.page_number = page;
        _prama = JSON.stringify(_prama);
        var _res = gRequest.postRemoteDataWithOutToken(gApiKey, "query", _prama);  //这里是一个封装好的ajax请求，详情见我文章之ajax封装
        _res.done(function (data) {
            if (data.meta.code == 0) {
                localStorage.setItem("noticePage",page);
                $(".left_bottom_ul").empty();
                var content = createUI(data.data.list);    //create是自动生成li标签的函数，未给出。
                $(".left_bottom_ul").append(content);
            } else {
                console.log("公告数据请求失败");
            }
        });
    }
});