Bootstrap 自定义分页方法

来源：互联网发布：判断素数的条件c语言编辑：程序博客网时间：2024/05/02 02:06

1.引入核心js类库

首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及bootstrap的js文件

<link href="css/bootstrap.css" rel="stylesheet"><script type="text/javascript" src="js/jquery-1.8.1.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script>

2.视图设置:

<!--显示当前显示的页码---><div class="col-sm-6">       <div class="dataTables_info" id="sample-table-2_info"></div></div><!-- 分页 --><div class="col-sm-6"><div class="dataTables_paginate paging_bootstrap" id="pager"></div></div>

2.分页js:

/** * 分页信息 * @param datas 数据 */function createPagerInfo(datas){ /**  * 绑定当前显示数据  */if(datas.pageCount!=0){$("#sample-table-2_info").html("<font style='font-weight:bold;'>当前第["+datas.pageIndex+"/"+datas.pageCount+"]页 "+"共["+datas.total+"]条数据</font>");}else{$("#sample-table-2_info").html("<font style='font-weight:bold;'>当前第["+datas.pageCount+"/"+datas.pageCount+"]页 "+"共["+datas.total+"]条数据</font>");if(datas.pageCount!=0){//动态生成分页条$("#pager").html('<ul class="pagination">'+  '<li class="next" id="start"><a href="#"  onclick="pageStart('+datas.pageIndex+')">首页</a></li>'+  '<li class="next" id="up"><a  href="javascript:void(0)" onclick="pageUp('+datas.pageIndex+')">上一页</a></li>'+  '<li class="next" id="down"><a  href="javascript:void(0)" onclick="pageDown('+datas.pageIndex+','+datas.pageCount+')" >下一页</a></li>'+  '<li class="next" id="last"><a href="#"  onclick="pageLast('+datas.pageIndex+','+datas.pageCount+')">最后一页</a></li>'+'</ul>');}else{$("#pager").html('<ul class="pagination">'+  '<li class="next" id="start"><a href="#"  onclick="pageStart('+datas.pageIndex+')">首页</a></li>'+  '<li class="next" id="up"><a  href="javascript:void(0)" onclick="pageUp('+datas.pageIndex+')">上一页</a></li>'+  '<li class="next" id="down"><a  href="javascript:void(0)" onclick="pageDown('+datas.pageIndex+','+datas.pageCount+')" >下一页</a></li>'+  '<li class="next" id="last"><a href="#"  onclick="pageLast('+datas.pageCount+','+datas.pageCount+')">最后一页</a></li>'+'</ul>');}}

4.点击页数事件

/** * 首页 * @param pageStartIndex */function pageStart(pageStartIndex){var nowPage = pageStartIndex-1;var pageStart = 1;if(nowPage==0){$.msg("消息提示!","当前已经是首页数据","btn-primary");}else{gainDetailsInfo(pageStart);}}/** * 最后一页 * @param pageIndex * @param pageTotal */function pageLast(pageIndex,pageTotal){console.info(pageIndex);console.info(pageTotal);   var nowPage = pageTotal;   if(pageIndex == pageTotal){   $.msg("消息提示!","当前已经是最后一页数据","btn-primary");   }else{   gainDetailsInfo(nowPage);      }            }/** * 上一页 * @param c */function pageUp(c){var nowPage = c-1;if(nowPage==0||nowPage == -1){ $.msg("消息提示!","当前已经是首页数据","btn-primary");}else{gainDetailsInfo(nowPage);}}/** * 下一页 * @param now * @param total */function pageDown(now,total){var nowPage = now+1;if(now==total||total==0){$.msg("消息提示!","当前已经是最后一页数据","btn-primary");$("#down").attr({"disabled":"disabled"});}else{gainDetailsInfo(nowPage);}}

0 0