jQuery實(shí)現(xiàn)頁碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁
更新時(shí)間：2017年12月31日 09:27:33 投稿：laozhang
本片文章教給大家用jQuery實(shí)現(xiàn)頁碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁，效果非常好而且沒有頁面刷新，需要的朋友學(xué)習(xí)下吧。
我們這次給大家?guī)淼氖怯胘Query實(shí)現(xiàn)頁碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁這個(gè)效果，這個(gè)效果最明顯的就是沒有數(shù)據(jù)加載和刷新頁面這個(gè)過程，再做小型數(shù)據(jù)的加載也多級(jí)網(wǎng)頁加載的時(shí)候很有效。我們先來看下實(shí)際效果：
下面我們給出全部效果代碼：
HTML全部代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery實(shí)現(xiàn)頁碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁-腳本之家</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<!-- <script type="text/javascript" src="back-endPage.js"></script> --> <!-- 后臺(tái)分頁 -->
<script type="text/javascript" src="js/front-endPage.js"></script><!-- 前臺(tái)分頁 -->
<script type="text/javascript" src="js/shujv2.js"></script>
<link rel="stylesheet" type="text/css" href="css/table.css" rel="external nofollow" >
</head>
<body>
<div id="histroyBox"></div>
<script type="text/javascript">
//前臺(tái)分頁的樣子
$('#histroyBox').CJJTable({
'title':["裝點(diǎn)","卸點(diǎn)","運(yùn)輸貨物","下單日期","作者"],//thead中的標(biāo)題 必填
'body':["taskCode","startAddr","endAddr","varietiesTypeName","createDate","customerName"],//tbody td 取值的字段 必填
'display':[1,1,1,1,1,2],//隱藏域，1顯示，2隱藏 必填
'pageNUmber':10,//每頁顯示的條數(shù) 選填
'pageLength':data.length,//選填
'url':data,//數(shù)據(jù)源 必填
dbTrclick:function(e){//雙擊tr事件
alert(e.find('.taskCode').html())
}
});
//后臺(tái)分頁的樣子
/*$('#histroyBox').CJJTable({
'title':["裝點(diǎn)","卸點(diǎn)","運(yùn)輸貨物","下單日期"],//thead中的標(biāo)題 必填
'body':["contactName","contactMobliePhone","carrierName","taskNum","taskCustomerExpectPrice","taskCustomerBudgetFreight"],//tbody td 取值的字段 必填
'display':[1,1,1,1,2,2],//隱藏域，1顯示，2隱藏 必填
'pageJson':{
"taskId":528710,
"pageSize":100,//ajax請(qǐng)求參數(shù)中的每頁展示數(shù)量 選填
"token":"yJUmunFeG3REqisYAmCfeA"
},
'url':'api/quoted/quotedList',//數(shù)據(jù)源 必填
dbTrclick:function(that){ //雙擊tr事件
alert(that.find('.contactName').html())
}
});*/
</script>
</body>
</html>
其中<script type="text/javascript" src="js/shujv2.js"></script>是數(shù)據(jù)JS內(nèi)容，大家在實(shí)際操作的時(shí)候可以用JS獲取json達(dá)到要的數(shù)據(jù)格式：
shujv2.js代碼：
var data = [ {
"warehouseID" : "3750",
"warehouseCode" : "CK20140825061813777127447",
"province" : "上海",
"endProvince" : "江蘇省",
"provinceId" : "310000",
"cityId" : "310100",
"areaId" : "310109",
"endProvinceId" : "320000",
"endCityId" : "320600",
"endAreaId" : "320612",
"materialId" : "0",
"material" : "",
"specId" : "0",
"productNId" : "0",
"varietiesId" : "8",
"varietiesTypeId" : "621",
"taskCode" : "T1611230481",
"customerID" : "20147",
"customerName" : "腳本之家",
"createDate" : "2016-11-23 18:41:40",
"wareHouseName" : "找鋼倉庫",
"city" : "上海市",
"area" : "虹口區(qū)",
"startAddr" : "逸仙路25號(hào)",
"endCity" : "南通市",
"endArea" : "通州區(qū)",
"endAddr" : "1",
"varietiesTypeName" : "鋼材",
"varieties" : "線材",
"productN" : "",
"spec" : "",
"weight" : "1",
"num" : "1",
"receiver" : "",
"receiverPhone" : "1",
"remark" : "",
"label" : "",
"startAddrNumber" : "1",
"varietiesNumber" : "1",
"contactsId" : "22494",
"contactsName" : "劉宇測試"
} ]
front-endPage.js是分頁加載的效果實(shí)現(xiàn)。代碼為：
;(function($, window, document,undefined) {
var cjjTable = function(ele,opt){
this.$element = ele,
this.defaults ={
title:null,
body:null,
display:null,
pageNUmber:8,
pageLength:0,
url:null,
dbTrclick:function(that){
}
}
this.options = $.extend({},this.defaults,opt)
}
cjjTable.prototype = {
start:function(){
var _this = this;
var titlelistBox="";
var titlesmall="";
for(var i=0;i<_this.options.title.length;i++){
titlesmall+="<th>"+_this.options.title[i]+"</th>";
titlelistBox = titlesmall;
}
var json = "";
var maxpagenumberBox = 7;//選擇項(xiàng)最多的數(shù)量
var json = this.options.url;
var histroy_DDBox = "";
var histroy_DD = "";
var firstPageNumber=_this.options.pageLength>_this.options.pageNUmber?_this.options.pageNUmber:_this.options.pageLength;
for (var i = 0; i <firstPageNumber; i++) {
var bodyBigBox="";
var bodyBox="";
for(var x=0;x<_this.options.body.length;x++){
var type = _this.options.body[x];
var display = "table-cell";
if(_this.options.body.length>_this.options.title.length&&_this.options.display[x]!=undefined){
display = _this.options.display[x]*1==1?"table-cell":"none";
}
bodyBox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>";
bodyBigBox = bodyBox;
}
histroy_DD +="<tr class='new_productBox'>"+bodyBigBox+"</tr>";
histroy_DDBox = histroy_DD;
}
$( _this.$element.selector+" table tfoot").html("");
if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) == 1) {
$( _this.$element.selector+" .nextPage").css("display", "none");
$(_this.$element.selector+" .endPage").css("display", "none");
}
var maxpagenumberBoxBigbox = "";
var maxpagenumberBoxBig = "";
if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) < maxpagenumberBox) {
for (var i = 0; i < Math.ceil(_this.options.pageLength/ _this.options.pageNUmber); i++) {
var className = "";
if(i==0){
className = "pagenumberBoxLi";
}
maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
} else {
for (var i = 0; i < maxpagenumberBox; i++) {
var className = "";
if(i==0){
className = "pagenumberBoxLi";
}
maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
}
var buttonTfoot = "<tr>"+
"<td colspan='"+_this.options.title.length+"'>"+
"<div style='float:right;margin-left:10px;' class='tfootRight'>"+
"<input placeholder='輸入頁碼' type='text'>"+
"<button>確定</button>"+
"</div>"+
"<div style='float:right'>"+
"<span class='firstPage' style='margin-right:10px;cursor: pointer;float:left;display: none;margin-left:10px;'>首頁</span>"+
"<span class='lastPage' style='margin-right:10px;cursor: pointer;float:left;display: none;'>上一頁</span>"+
"<ul class='pagenumberBox'>"+maxpagenumberBoxBigbox+"</ul>"+
"<input class='typeNumber' type='text' value='1' onfocus='this.blur()' style='display:none;width:20px;height:20px;text-align:center;line-height:20px;border:1px solid #666;margin-right:5px;float:left;margin-top:2.5px;'>"+
"<span class='nextPage' style='margin-right:10px;float:left;cursor: pointer;'>下一頁</span>"+
"<span class='endPage' style='cursor: pointer;float:left;'>尾頁</span>"+
"</div>"+
"<div style='float:right'>"+
"<select><option value='5'>5</option><option value='10'>10</option><option value='20'>20</option><option value='50'>50</option><option value='100'>100</option><option value='200'>200</option><option value='500'>500</option></select>"
"</div>"+
"</div>"+
"<td>"+
"<tr>";
_this.$element.html("<table class='CJJ-Table'><thead>"+titlelistBox+"</thead><tbody>"+histroy_DDBox+"</tbody><tfoot>"+buttonTfoot+"</tfoot></table>");
$(_this.$element.selector+ ' select').val(_this.options.pageNUmber);
if(Math.ceil(_this.options.pageLength/_this.options.pageNUmber)<2){
$(_this.$element.selector+ ' .endPage').hide();
$(_this.$element.selector+ ' .nextPage').hide();
}
$(_this.$element.selector+ ' .tfootRight input').unbind('keyup').keyup(function(){
_this.inputKeyup(_this,maxpagenumberBox,json);
})
$(_this.$element.selector+ ' .tfootRight button').unbind('click').click(function(){
_this.button(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' .firstPage').unbind('click').click(function(){
_this.firstPage(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' .endPage').unbind('click').click(function(){
_this.endPage(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' .nextPage').unbind('click').click(function(){
_this.nextPage(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' table tfoot ul li').unbind('click').click(function(){
_this.nextTableLi(_this,maxpagenumberBox,json,$(this));
});
$(_this.$element.selector+ ' .lastPage').unbind('click').click(function(){
_this.lastPage(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' select').unbind('change').change(function(){
_this.select(_this,maxpagenumberBox,json,$(this));
});
$(_this.$element.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){
_this.options.dbTrclick($(this));
});
},
inputKeyup:function(e,maxpagenumberBox,json){
var val = $(e.$element.selector+ " .tfootRight input").val();
if (val == 0) {
var val2 = val.replace(0, "");
} else if (val > 0 && val <= Math.ceil(e.options.pageLength / e.options.pageNUmber)) {
var val2 = val.replace(/[^0-9]/g, "");
} else if (val > Math.ceil(e.options.pageLength/ e.options.pageNUmber)) {
var val2 = Math.ceil(e.options.pageLength / e.options.pageNUmber);
}
$(e.$element.selector+ ' .tfootRight input').val(val2);
},
button:function(e,maxpagenumberBox,json){
var val = $(e.$element.selector+ ' .tfootRight input').val();
$(e.$element.selector+ " .typeNumber").val(val);
if (val != "") {
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
}
},
firstPage:function(e,maxpagenumberBox,json){
$(e.$element.selector+ " .typeNumber").val(1);
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
endPage:function(e,maxpagenumberBox,json){
$(e.$element.selector+ " .typeNumber").val(Math.ceil(e.options.pageLength / e.options.pageNUmber));
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
nextPage:function(e,maxpagenumberBox,json){
var number = $(e.$element.selector+ " .typeNumber").val();
$(e.$element.selector+ " .typeNumber").val(number * 1 + 1);
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
nextTableLi:function(e,maxpagenumberBox,json,that){
var val = that.html();
$(e.$element.selector+ " .typeNumber").val(val);
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
lastPage:function(e,maxpagenumberBox,json){
var number = $(e.$element.selector+ " .typeNumber").val();
if (number > 1) {
$(e.$element.selector+ " .typeNumber").val(number * 1 - 1);
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
}
},
select:function(e,maxpagenumberBox,json,that){
var select = that.find("option:selected").val();
$(e.$element.selector+ " .typeNumber").val(1);
e.options.pageNUmber = select;
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
page:function(Pagenumber, pageNUmber, maxpagenumberBox,json,that,e) {
var histroy_DDBox = "";
var histroy_DD = "";
var lastPage=Pagenumber<Math.ceil(e.options.pageLength / pageNUmber)?Pagenumber*pageNUmber:e.options.pageLength;
for (var i =(Pagenumber-1)*pageNUmber; i < lastPage; i++) {
var bodyBigBox="";
var bodyBox="";
for(var x=0;x<e.options.body.length;x++){
var type = e.options.body[x];
var display = "table-cell";
if(e.options.body.length>e.options.title.length&&e.options.display[x]!=undefined){
display = e.options.display[x]*1==1?"table-cell":"none";
}
bodyBox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>";
bodyBigBox = bodyBox;
}
histroy_DD +="<tr class='new_productBox'>"+bodyBigBox+"</tr>";
histroy_DDBox = histroy_DD;
}
$(that.selector+" table tbody").html(histroy_DD);
var maxpagenumberBoxBigbox = "";
var maxpagenumberBoxBig = "";
if (Math.ceil(e.options.pageLength/ e.options.pageNUmber) < maxpagenumberBox) {
for (var i = 0; i < Math.ceil(e.options.pageLength/ e.options.pageNUmber); i++) {
var className = "";
if(i==0){
className = "pagenumberBoxLi";
}
maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
} else {
for (var i = 0; i < maxpagenumberBox; i++) {
var className = "";
if(i==0){
className = "pagenumberBoxLi";
}
maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
}
$(that.selector+" table tfoot ul").html(maxpagenumberBoxBigbox);
if (Pagenumber == 1) {
$(that.selector+" .firstPage,"+that.selector+" .lastPage").hide();
} else {
$(that.selector+" .firstPage,"+that.selector+" .lastPage").show();
}
if (Pagenumber == Math.ceil(e.options.pageLength / pageNUmber)) {
$(that.selector+" .endPage,"+that.selector+" .nextPage").hide();
} else {
$(that.selector+" .endPage,"+that.selector+" .nextPage").show();
}
if (Math.ceil(e.options.pageLength/ pageNUmber) > maxpagenumberBox) {
if (Pagenumber > 0 && Pagenumber < Math.ceil(maxpagenumberBox / 2) * 1 + 1) {
maxpagenumberBoxBigbox = "";
maxpagenumberBoxBig = "";
for (var i = 0; i < maxpagenumberBox; i++) {
maxpagenumberBoxBig += '<li>' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
$(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
$(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');
} else if (Pagenumber >= Math.ceil(maxpagenumberBox / 2) * 1 + 1 && Pagenumber < Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2) {
maxpagenumberBoxBigbox = "";
maxpagenumberBoxBig = "";
for (var i = Pagenumber - Math.ceil(maxpagenumberBox / 2) + 1; i < Pagenumber * 1 + Math.ceil(maxpagenumberBox / 2) * 1; i++) {
maxpagenumberBoxBig += '<li>' + (i) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
$(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
$(that.selector+' .pagenumberBox li').eq(Math.ceil(maxpagenumberBox / 2) - 1).addClass('pagenumberBoxLi');
} else if (Pagenumber >= Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2 && Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {
maxpagenumberBoxBigbox = "";
maxpagenumberBoxBig = "";
for (var i = Math.ceil(e.options.pageLength / pageNUmber) - maxpagenumberBox; i < Math.ceil(e.options.pageLength / pageNUmber); i++) {
maxpagenumberBoxBig += '<li>' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
$(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
$(that.selector+' .pagenumberBox li').eq(Pagenumber - Math.ceil(e.options.pageLength/ pageNUmber) + maxpagenumberBox * 1 - 1).addClass('pagenumberBoxLi');
}
} else {
if (Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {
$(that.selector+' .pagenumberBox li').removeClass('pagenumberBoxLi');
$(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');
}
}
$(that.selector+ ' table tfoot ul li').unbind('click').click(function(){
e.nextTableLi(e,maxpagenumberBox,json,$(this));
});
$(that.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){
e.options.dbTrclick($(this));
});
}
}
$.fn.CJJTable = function(options){
var cjj = new cjjTable(this,options);
return cjj.start();
}
})(jQuery, window, document);
以上就是這個(gè)效果的全部內(nèi)容，有興趣的朋友測試一下，需要注意的就是在數(shù)據(jù)JS中，數(shù)據(jù)格式和重要，需要增加附加數(shù)據(jù)一定要確保ID名唯一。感謝你對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了jquery讀寫cookie操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)cookie的常用讀寫操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
在項(xiàng)目中遇到的需求，效果是仿淘寶的。寫出來和他家分享下，很簡單的東西。^_^2011-04-04
AJAX和jQuery動(dòng)態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法
本文給大家介紹使用ajax和jquery動(dòng)態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法，使用jQuery可以簡化這個(gè)過程。下面通過實(shí)例代碼給大家介紹下，需要的的朋友參考下吧2016-12-12
jQuery根據(jù)ID、CLASS、等獲取對(duì)象的實(shí)例
下面小編就為大家?guī)硪黄猨Query根據(jù)ID、CLASS、等獲取對(duì)象的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
jQuery 實(shí)現(xiàn)側(cè)邊浮動(dòng)導(dǎo)航菜單效果
這篇文章主要介紹了jQuery 實(shí)現(xiàn)側(cè)邊浮動(dòng)導(dǎo)航菜單效果,需要的朋友可以參考下2014-12-12
jquery中的mouseleave和mouseout的區(qū)別 模仿下拉框效果
不論鼠標(biāo)指針離開被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件,只有在鼠標(biāo)指針離開被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件2012-02-02
利用jquery.getScript()跨域調(diào)用文件，具體說這個(gè)文件可以是什么類型還有待于進(jìn)一步跟進(jìn)。2010-11-11
jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果
本文主要分享了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
jQuery實(shí)現(xiàn)定時(shí)隱藏對(duì)話框的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)隱藏對(duì)話框的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery定時(shí)隱藏對(duì)話框的相關(guān)函數(shù)、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細(xì)介紹了jquery拖動(dòng)改變div大小的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07