bootstrap+jquery实现数据分页的功能插件bs_pagination的用法

最新推荐文章于 2023-04-11 09:51:10 发布

落千

最新推荐文章于 2023-04-11 09:51:10 发布

阅读量503

点赞数

分类专栏： JavaScript 文章标签： jquery bootstrap bs_pagination 分页用法

本文链接：https://blog.csdn.net/zm_960911/article/details/125065543

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

资源：jquery.bs_pagination.min.js和jquery.bs_pagination.min.css

1.在html的head中引入

<head>
	<link rel="stylesheet" href="jquery.bs_pagination.css"> 
	
	<script type="text/javascript" src="jquery.js"></script> 
	<script type="text/javascript" src="jquery.bs_pagination.min.js"></script> 
</head>
<body>
	<div id="pageList"></div>
</body>

2.加载bs_pagination前先加载下面内容（放在bs_pagination前面）

var rsc_bs_pag={
go_to_page_title:"Go to page",
rows_per_page_title:"Rows per page",
current_page_label:"Page",
current_page_abbr_label:"p.",
total_pages_label:"of",
total_pages_abbr_label:"/",
total_rows_label:"of",
rows_info_records:"records",

go_top_text:"&laquo;",
go_prev_text:"&larr;",
go_next_text:"&rarr;",
go_last_text:"&raquo;"
// 对以上四行进行汉化
// go_top_text : '首页',
// go_prev_text : '上一页',
// go_next_text : '下一页',
// go_last_text : '末页',
};

3.在ajax请求数据的地方加入

$("#pageList").bs_pagination({
        totalPages: totalPages,//ajax获取的总页数
        currentPage:1,//当前页：由前端指定
        visiblePageLinks:5,//显示的最多分页链接数
        showGoToPage:false,
        showRowsPerPage: false,
        showRowsInfo: false,
        showRowsDefaultInfo: false,
        mainWrapperClass:'dataPage clearfix',
        navListContainerClass:'',
        navListClass:'pagination-sm pagination',
        containerClass:'',
        onChangePage:function(e,obj){//returns page_num and rows_per_page
            //当分页被点击的时候，事件回调
            //obj.currentPage;//获取点击对象里的当前页
            console.log(e,obj)
        }
    });

效果：
在这里插入图片描述

落千

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap+jquery实现数据分页的功能插件bs_pagination的用法

资源：jquery.bs_pagination.min.js和jquery.bs_pagination.min.css1.在html的head中引入<head> <link rel="stylesheet" href="jquery.bs_pagination.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascr
复制链接

扫一扫