bootstrap 分页实践

 

      平时自己做的都是表格的分页，通过简单的属性配置，分页也就出来了，这次呢，需要自己去写分页，才发现，分页还是有很多逻辑要想明白的，比如说页签的控制算法等，今天看了别人的代码，自己也小尝试了一把，在此分享给大家。

<div id="dPage" style="margin-top: 680px;"><ul id="d_Page" class="pagination"style="right: 0; position: absolute;padding-right:50px;"></ul></div><div id="dUnPage" style="display: none;" class="lb_fy_right_msg"><span>当前页无数据</span></div>var dCurrentPage = 1;//当前页数var dPageSize = 12;//每页显示8条数据var dTotalCount = 0;//总共条数var dTotalPage = 0;//总共页数var dcurgroup=0;var dTableData = [];var totalCount; //总记录数var startPage; // 每页开始的记录条数var endPage; // 每页结束的记录条数var pn = 1; //页码var m;var pageLiSize = 5; //页码数长度var pageSize = 1; //每页记录条数var groupLength; //组数var pageTotal = 0;var pageurl;var pagedata = [];$(function() {initDatecontrol();initContent(type,"","","","");})function initDatecontrol(){$("#startyear").datetimepicker({format: 'yyyy',weekStart: 1,autoclose: true,startView: 4,minView: 4,forceParse: false,language: 'zh-CN'});$("#endyear").datetimepicker({format: 'yyyy',weekStart: 1,autoclose: true,startView: 4,minView: 4,forceParse: false,language: 'zh-CN'});}/** * 初始化内容 */ function initContent(type,startyear,endyear,ddescription,dname) {$.ajax({type: "POST",async:false,     data: {type: type,startyear:startyear,endyear:endyear,dname:dname,keyword:ddescription},dataType: 'JSON',url: rootpath + "/atservice/atdocument/selectByType",success: function(json) {debugger;var records = json.data;//计算总页dTableData =records;dPage();//var html="";//for(var i in records){//var ar = rootpath + '/plugins/documents' + records[i].thfiletype;//if(records[i].thfiletype == "" || records[i].thfiletype == null ){//ar=rootpath + "/img/cnbg.png";//}//html +='<div id='+i+' class="picture"  onmouseover="showDetailinfo(\''+records[i].dname+'\',\''+records[i].dpath+'\',\''+records[i].ddescription+'\',\''+records[i].dyear+'\',\''+i+'\')" onmouseleave="displayinfo(\''+i+'\')"> '// +'<img src='+ar+'> '// +'<br>'+records[i].dname +''// +'<div class="mengban" id="mengban'+i+'" style="display:none;">'// +'<div class="content">'// +'<span style="width: 50%; position: absolute; top: 0px; left: 0px;">名称：</span>'// +'<span id="dname'+i+'" style="position: absolute; top: 0px; width: 70%; left: 50px;"></span>'// +'</div>'// +'<div class="content">'// +'<span style="width: 50%; position: absolute; top: 25px; left: 0px;">类型：</span>"'// +'<span id="type'+i+'" style="position: absolute; top: 25px; width: 70%; left: 50px;"></span>'// +'</div>'// +'<div class="content">'// +'<span style="width: 50%; position: absolute; top: 50px; left: 0px;">关键字：</span>'// +'<span id="ddescription'+i+'" style="position: absolute; top: 50px; width: 70%; left: 50px;"></span>'// +'</div>'// +'<div class="content">'// +'<span style="width: 50%; position: absolute; top: 75px; left: 0px;">数据年份：   </span>'// +'<span id="dyear'+i+'" style="position: absolute; top: 75px; width: 70%; left: 50px;">   </span>'// +'<a  id="dpath'+i+'" style="text-decoration: none; cursor: pointer; position: absolute; top: 82px; margin-left: 75px;"'// +'onclick="javascript:download11(this);"><img style=" width: 15px; height: 15px;"'// +'src="img/download.png"></a>'// +'</div>'// +'</div>'// +'</div>';//}//$("#imgzs").empty();//$("#imgzs").append(html);}});}//控制分页function dPage(){debugger;$("#dPage").css("display","block");$("#dUnPage").css("display","none");var tableDataList = [];if(dTableData.length != 0){dTotalCount = dTableData.length;dTotalPage = dTotalCount / dPageSize;if(dTotalCount % dPageSize > 0){dTotalPage = parseInt(dTotalPage) + 1;}appenddPage(dcurgroup);//给第一页赋值if(dTotalCount < dPageSize){for(var i=0;i<dTotalCount;i++){tableDataList.push(dTableData[i]);}}else{for(var i=0;i<dPageSize;i++){tableDataList.push(dTableData[i]);}}dPageData(tableDataList);}else{$("#dPage").css("display","none");$("#dUnPage").css("display","block");dPageData(tableDataList);}}//拼接分页标签function appenddPage(dcurgroup){$("#d_Page").empty();var pageLi = " ";pageLi = appeneddPageGroup(dcurgroup, pageLi);var pageZTS ='<li><a href="#" >共<span id="dTotalCount"></span>条</a></li>';    var pageZYS ='<li><a  href="#">第<span id="dCurrentpage"></span>页/共<span id="dTotalPage"></span>页</span></a></li>';    var pageHome ='<li><a id="dHome" href="#" ><span class="glyphicon glyphicon-home"></span></a></li>';    var pagePrev ='<li><a id="dPrev" href="#" aria-label="Previous" "><span aria-hidden="true">«</span></a></li>';    var pageNext ='<li><a id="dNext" href="#" aria-label="Next" "><span aria-hidden="true">»</span></a></li>';    var pageLast ='<li><a id="dLastPage" href="#" ><span class="glyphicon glyphicon-fast-forward"></span></a></li>';    $("#d_Page").append(pageZTS + pageZYS + pageHome + pagePrev+pageLi+ pageNext + pageLast);    $("#dTotalCount").text(dTotalCount);$("#dCurrentpage").text(dCurrentPage);$("#dTotalPage").text(dTotalPage);var as = $(".dpagebarli");$(as[0].parentElement).attr("class","active");//首页$("#dHome").unbind("click");$("#dHome").click(function(){dcurgroup=0;appenddPage(dcurgroup);dCurrentPage = 1;$("#dCurrentpage").text(dCurrentPage);var newDataList = [];if(dTotalCount < dPageSize){for(var i=0;i<dTotalCount;i++){newDataList.push(dTableData[i]);}}else{for(var i=0;i<dPageSize;i++){newDataList.push(dTableData[i]);}}dPageData(newDataList);});//尾页$("#dLastPage").unbind("click");$("#dLastPage").click(function(){if(dTotalPage % pageLiSize > 0){dcurgroup = parseInt(dTotalPage / pageLiSize);}else{dcurgroup = dTotalPage / pageLiSize-1;}appenddPage(dcurgroup);dCurrentPage = dTotalPage;var as = $(".dpagebarli");if(as.length != 0){for(var b=0;b<as.length;b++){if(dCurrentPage == $(as[b]).attr("pn")){$(as[b].parentElement).attr("class","active");}else{$(as[b].parentElement).removeAttr("class");}}}$("#dCurrentpage").text(dCurrentPage);var bIndex = parseInt(dPageSize) * (parseInt(dCurrentPage) - 1);var newDataList = [];for(var i = bIndex;i<dTotalCount;i++){newDataList.push(dTableData[i]);}dPageData(newDataList);});//上一页$("#dPrev").unbind("click");$("#dPrev").click(function(){if(dCurrentPage == 1){window.parent.$("#successInfo").text("当前已是第一页！");window.parent.$("#successModal").modal();//alert("当前已是第一页！");}else{if(dCurrentPage == dcurgroup*pageLiSize+1){dcurgroup--;appenddPage(dcurgroup);var as = $(".dpagebarli");$(as[0].parentElement).removeAttr("class");$(as[4].parentElement).attr("class","active");}dCurrentPage = parseInt(dCurrentPage) - 1;$("#dCurrentpage").text(dCurrentPage);var bIndex = parseInt(dPageSize) * (parseInt(dCurrentPage) - 1);var eIndex = parseInt(bIndex) + parseInt(dPageSize);var newDataList = [];for(var i = bIndex;i < eIndex;i++){newDataList.push(dTableData[i]);}var as = $(".dpagebarli");if(as.length != 0){for(var b=0;b<as.length;b++){if(dCurrentPage == $(as[b]).attr("pn")){$(as[b].parentElement).attr("class","active");}else{$(as[b].parentElement).removeAttr("class");}}}dPageData(newDataList);}});//下一页$("#dNext").unbind("click");$("#dNext").click(function(){if(dCurrentPage == dTotalPage){window.parent.$("#successInfo").text("当前已是最后一页！");window.parent.$("#successModal").modal();//alert("当前已是最后一页！");}else{if(dCurrentPage == (dcurgroup+1)*pageLiSize){dcurgroup++;appenddPage(dcurgroup);var as = $(".dpagebarli");$(as[0].parentElement).attr("class","active");}dCurrentPage = parseInt(dCurrentPage) + 1;$("#dCurrentpage").text(dCurrentPage);var bIndex = parseInt(dPageSize) * (parseInt(dCurrentPage) - 1);var eIndex = parseInt(bIndex) + parseInt(dPageSize);var newDataList = [];if(eIndex > dTotalCount){for(var i = bIndex;i < dTotalCount;i++){newDataList.push(dTableData[i]);}}else{for(var i = bIndex;i < eIndex;i++){newDataList.push(dTableData[i]);}}var as = $(".dpagebarli");if(as.length != 0){for(var b=0;b<as.length;b++){if(dCurrentPage == $(as[b]).attr("pn")){$(as[b].parentElement).attr("class","active");}else{$(as[b].parentElement).removeAttr("class");}}}dPageData(newDataList);}});}//拼接页码function appeneddPageGroup(curGrp, pageLi) {for (var j = 1; j < pageLiSize + 1; j++) {m = curGrp * pageLiSize + j;if (m <= dTotalPage) {pageLi += "<li ><a class='dpagebarli' href='#' pn='" + m + "' onclick='givedActive(this);'>" + m + "</a></li>";}}return pageLi;}//跳转到某一页function givedActive(eve) {if ($(eve).attr("id") != "dPre" && $(eve).attr("id") != "dNext") {$("#d_Page").find("li").attr("class", "");}$(eve.parentElement).attr("class", "active");pn = $(eve).attr("pn");dCurrentPage = pn;var dDataList = [];var startindex = (pn-1)*dPageSize;var endindex = pn*dPageSize-1;if(endindex>=dTotalCount){for(var i = startindex;i<dTotalCount;i++){dDataList.push(dTableData[i]);}}else{for(var i = startindex;i<=endindex;i++){dDataList.push(dTableData[i]);}}dPageData(dDataList);}function queryCondition(){var startyear =$("#startyear").val();var endyear =$("#endyear").val();var dname =$("#dname").val();var ddescription =$("#ddescription").val();initContent(type,startyear,endyear,ddescription,dname);}//组装数据页面function dPageData(records){debugger;var html="";for(var i in records){var ar = rootpath + '/plugins/documents' + records[i].thfiletype;if(records[i].thfiletype == "" || records[i].thfiletype == null ){ar=rootpath + "/img/cnbg.png";}html +='<div id='+i+' class="picture"  onmouseover="showDetailinfo(\''+records[i].dname+'\',\''+records[i].dpath+'\',\''+records[i].ddescription+'\',\''+records[i].dyear+'\',\''+i+'\')" onmouseleave="displayinfo(\''+i+'\')"> ' +'<img src='+ar+'> ' +'<br>'+records[i].dname +'' +'<div class="mengban" id="mengban'+i+'" style="display:none;">' +'<div class="content">' +'<span style="width: 50%; position: absolute; top: 0px; left: 0px;">名称：</span>' +'<span id="dname'+i+'" style="position: absolute; top: 0px; width: 70%; left: 50px;"></span>' +'</div>' +'<div class="content">' +'<span style="width: 50%; position: absolute; top: 25px; left: 0px;">类型：</span>"' +'<span id="type'+i+'" style="position: absolute; top: 25px; width: 70%; left: 50px;"></span>' +'</div>' +'<div class="content">' +'<span style="width: 50%; position: absolute; top: 50px; left: 0px;">关键字：</span>' +'<span id="ddescription'+i+'" style="position: absolute; top: 50px; width: 70%; left: 50px;"></span>' +'</div>' +'<div class="content">' +'<span style="width: 50%; position: absolute; top: 75px; left: 0px;">数据年份：   </span>' +'<span id="dyear'+i+'" style="position: absolute; top: 75px; width: 70%; left: 50px;">   </span>' +'<a  id="dpath'+i+'" style="text-decoration: none; cursor: pointer; position: absolute; top: 82px; margin-left: 75px;"' +'onclick="javascript:download11(this);"><img style=" width: 15px; height: 15px;"' +'src="img/download.png"></a>' +'</div>' +'</div>' +'</div>';}$("#imgzs").empty();$("#imgzs").append(html);}function showDetailinfo(dname,dpath,ddescription,dyear,i){dpath = dpath.replace("\\", "/");$("#dpath"+i).attr('value',dpath);//TODO:这个type测试，好像有问题var name =dpath.replace(dpath.substring(0,6),"");var type = name.substring(0,name.indexOf("/"));//var type1 =dpath.substring(6,dpath.lastIndexOf("/"));$("#mengban"+i).css("display","block");$("#dname"+i).html(dname);$("#type"+i).html(type);$("#ddescription"+i).html(ddescription);if(dyear == "undefined"){dyear ="";}$("#dyear"+i).html(dyear);}function download11(evt) {var dpath =$(evt).attr("value");window.location.href = rootpath + "/atservice/atdocument/download?dpath=" + dpath;}function displayinfo(i){$("#mengban"+i).css("display","none");}

忘了截图效果了，待补上(*^__^*) 嘻嘻……