BootStrap分页插件

官网

官方网址：https://labs.pontikis.net/bs_pagination/docs/

怎么使用

引入插件所需要的资源文件

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<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"></script>

创建容器

<div id="page-master"></div>

绑定容器调用插件的工具函数

$("#page-master").bs_pagination({currentPage: pageNo, // 当前页号,相当于pageNorowsPerPage: pageSize, // 每页显示条数,相当于pageSizetotalRows: data.totalRows, // 总条数totalPages: totalPages,  // 总页数,必填参数(这里需要写具体的值，不能写表达式)visiblePageLinks: 5, // 最多可以显示的卡片数showGoToPage: true, // 是否显示"跳转到"部分，默认true显示showRowsPerPage: true, // 是否显示"每页显示条数"部分，默认true显示showRowsInfo: true, // 是否显示记录的信息，默认true显示// 用户每次切换页号，都自动触发本函数;// 每次返回切换页号之后的pageNo和pageSizeonChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked// 重写发送当前页数和每页显示的条数（这也就意味着每次换页都将向后端 发送请求 查询当页数据）queryClueByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);});

Demo

/*** 分页查询函数功能：封装参数并发送请求* @param pageNo 起始页码* @param pageSize 单页显示数据条数*/
function queryClueByConditionForPage(pageNo, pageSize) {// 收集线索前端界面的相关参数（条件查询的一些信息，如果不需要条件查询，就默认null）var fullname = $("#query-name").val();var company = $("#query-company").val();var phone = $("#query-phone").val();var source = $("#query-source option:selected").text(); // 获取下拉框选中的线索来源var owner = $("#query-owner").val();var mphone = $("#query-mphone").val();var state = $("#query-state option:selected").text(); // 获取下拉框选中的线索状态// 前端向后端发送请求$.ajax({url: 'workbench/clue/selectClueByConditionForPage',data: {fullname:fullname,company:company,phone:phone,source:source,owner:owner,mphone:mphone,state:state,pageNo:pageNo,pageSize:pageSize},type:'post',dataType:'json',success:function (data) {// 显示所有线索，遍历clueList，拼接所有行var htmlString = "";$.each(data.clueList, function (index, obj) {// checkbox中value存放了线索的id属性，用于删除和修改的调用htmlString += "<tr class=\"active\">";htmlString += "<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";htmlString += "<td><a style=\"text-decoration: none; cursor: pointer;\" οnclick=\"window.location.href='workbench/clue/detailClue.do?id="+obj.id+"'\">"+obj.fullname+" "+obj.appellation+"</a></td>";htmlString += "<td>"+obj.company+"</td>";htmlString += "<td>"+obj.phone+"</td>";htmlString += "<td>"+obj.mphone+"</td>";htmlString += "<td>"+obj.source+"</td>";htmlString += "<td>"+obj.owner+"</td>";htmlString += "<td>"+obj.state+"</td>";htmlString += "</tr>";});$("#tBody").html(htmlString); // 写入页面$("#checkAll").prop("checked", false); // 换页时将全选按钮取消选中//计算总页数var totalPages = 1;if (data.totalRows % pageSize == 0) { // 总数据刚好可以整除页面totalPages = data.totalRows / pageSize;} else {totalPages = parseInt(data.totalRows / pageSize) + 1; // 页数不能是小数，将小数转换为整数}//对容器调用bs_pagination工具函数，显示翻页信息$("#page-master").bs_pagination({currentPage: pageNo, // 当前页号,相当于pageNorowsPerPage: pageSize, // 每页显示条数,相当于pageSizetotalRows: data.totalRows, // 总条数totalPages: totalPages,  // 总页数,必填参数.visiblePageLinks: 5, // 最多可以显示的卡片数showGoToPage: true, // 是否显示"跳转到"部分，默认true显示showRowsPerPage: true, // 是否显示"每页显示条数"部分，默认true显示showRowsInfo: true, // 是否显示记录的信息，默认true显示// 用户每次切换页号，都自动触发本函数;// 每次返回切换页号之后的pageNo和pageSizeonChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked// 重写发送当前页数和每页显示的条数（这也就意味着每次换页都将向后端 发送请求 查询当页数据）queryClueByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);}});}});
}

BootStrap分页插件相关推荐

bootstrap分页插件php,bootstrap paginator分页插件使用方法
Bootstrap Paginator是一款基于Bootstrap的js分页插件,本文主要给大家介绍bootstrap paginator分页插件的两种使用方式,一起看看吧,希望能帮助到大家. 分页有 ...
Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
bootstrap 分页_这五款超好用的Bootstrap扩展，让你的Web开发事半功倍
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包.它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框 ...
Bootstrap Paginator 分页插件的使用
2019独角兽企业重金招聘Python工程师标准>>> 由于在给学生上课过程用需要用到分页操作,发现一个比较好用的分页插件,效果如下插件下载地址 :https://github. ...
分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...
Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
angularJS前端分页插件
首先在项目中引入分页插件的 js 和 css: 在html页面引入相关js 和 css: 在控制器中引入分页插件中定义的 module[可以打开pagination.js查看,可以看到其实,在插 ...
vue2.0分页插件官方_Vue 2的最佳和完整分页插件
vue2.0分页插件官方 vuejs-uib分页 (vuejs-uib-pagination) Best and complete pagination plugin for Vue.js. Insp ...

BootStrap分页插件

BootStrap分页插件

官网

怎么使用

引入插件所需要的资源文件

创建容器

绑定容器调用插件的工具函数

Demo

BootStrap分页插件相关推荐

最新文章

热门文章