var maxIndex = 0; var currentIndex = 1; $n.pagation = { setpage : function(total, ajaxfc) { if (total != 0) { $("#pagediv").empty(); if (total != -1) { maxIndex = Math.ceil(total / 10); } var indexs = 0; // 上确界 var downlimit = 0; // 下确界 var uplimit = 0; // 中间标记 var middleflag = 0; if (maxIndex <= 5 || currentIndex <= 3) { downlimit = 1; if (maxIndex > 5) { uplimit = 5; } else { uplimit = maxIndex; } middleflag = 0; } else if (currentIndex > 3) { if (currentIndex > (maxIndex - 3)) { downlimit = maxIndex - 4; uplimit = maxIndex; middleflag = 0; } else { downlimit = currentIndex - 2; uplimit = currentIndex + 2; middleflag = 1; } } var pre = '<div class="dataTables_paginate paging_full_numbers" id="dyntable2_paginate">' + '<span class="first paginate_button paginate_button_disabled" id="dyntable2_first">首页</span>' + '<span class="previous paginate_button paginate_button_disabled" id="dyntable2_previous">上一页</span>'; var middle = ''; $("#indexspan").empty(); var middlespan = "<span id='indexspan'>"; for (var i = downlimit; i <= uplimit; i++) { if (middleflag == 0) { if (i == currentIndex) { middle = '<span class="paginate_active">' + i + '</span>'; } else { middle = '<span class="paginate_button">' + i + '</span>'; } } else if (middleflag == 1) { if (i == (uplimit - 2)) { middle = '<span class="paginate_active">' + i + '</span>'; } else { middle = '<span class="paginate_button">' + i + '</span>'; } } middlespan = middlespan + middle; } middlespan = middlespan + "</span>"; var last = '<span class="next paginate_button paginate_button_disabled" id="dyntable2_next">下一页</span>' + '<span class="last paginate_button paginate_button_disabled" id="dyntable2_last">末页</span>' + '</div>'; var pagation = pre + middlespan + last; $("#pagediv").append(pagation); $n.pagation.bindpageindexClick(ajaxfc); } }, bindpageindexClick : function(ajaxfc) { $("#indexspan").children().bind("click", function() { currentIndex = parseInt($(this).text()); $n.pagation.setpage(-1); ajaxfc(currentIndex); }); $("#dyntable2_first").bind("click", function() { currentIndex = 1; $n.pagation.setpage(-1); ajaxfc(currentIndex); }); $("#dyntable2_previous").bind("click", function() { var nowindex = $(".paginate_active").text(); if (nowindex > 1) { currentIndex = parseInt($(".paginate_active").text()) - 1; $n.pagation.setpage(-1); ajaxfc(currentIndex); } }); $("#dyntable2_next").bind("click", function() { var nowindex = $(".paginate_active").text(); if (nowindex < maxIndex) { currentIndex = parseInt($(".paginate_active").text()) + 1; $n.pagation.setpage(-1); ajaxfc(currentIndex); } }); $("#dyntable2_last").bind("click", function() { currentIndex = maxIndex; $n.pagation.setpage(-1); ajaxfc(currentIndex); }); } }
<div id="pagediv"> <div class="dataTables_paginate paging_full_numbers" id="dyntable2_paginate"> <span class="first paginate_button paginate_button_disabled" id="dyntable2_first">首页</span> <span class="previous paginate_button paginate_button_disabled" id="dyntable2_previous">上一页</span> <span id="indexspan"><span class="paginate_active">1</span></span> <span class="next paginate_button paginate_button_disabled" id="dyntable2_next">下一页</span> <span class="last paginate_button paginate_button_disabled" id="dyntable2_last">末页</span> </div> </div>
ajaxfc为请求后台的ajax方法名