Bootstrap pagination的使用

阙博容
2023-12-01

帮助文档地址:Docs - Bootstrap Pagination | labs.pontikis.net

1)导入资源

js:<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>

编码语言:<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js">

css:</script><link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">

2)在前端页面插入容器

3)页面加载完成后执行函数:

$("#demo_pag1").bs_pagination({

currentPage: pageNo,//当前页号,相当于pageNo

rowsPerPage: pageSize,//每页显示条数,相当于pageSize

totalRows: data.totalRows,//总条数

totalPages: totalPages, //总页数,必填参数.

visiblePageLinks: 5,//最多可以显示的卡片数

showGoToPage: true,//是否显示"跳转到"部分,默认true--显示

showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示

showRowsInfo: true,//是否显示记录的信息,默认true--显示

//用户每次切换页号,都自动触发本函数;

//每次返回切换页号之后的pageNo和pageSize

onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked

//js代码

//alert(pageObj.currentPage);

//alert(pageObj.rowsPerPage);

queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);

}

});

  1. 获取页面的属性值:

$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage')

 类似资料: