html jq页面跳转页面,jQuery实现页码跳转式动态数据分页

我们这次给大家带来的是用jQuery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再做小型数据的加载也多级网页加载的时候很有效。我们先来看下实际效果：

下面我们给出全部效果代码：

HTML全部代码：

jQuery实现页码跳转式动态数据分页-脚本之家

//前台分页的样子

$('#histroyBox').CJJTable({

'title':["装点","卸点","运输货物","下单日期","作者"],//thead中的标题必填

'body':["taskCode","startAddr","endAddr","varietiesTypeName","createDate","customerName"],//tbody td 取值的字段必填

'display':[1,1,1,1,1,2],//隐藏域，1显示，2隐藏必填

'pageNUmber':10,//每页显示的条数选填

'pageLength':data.length,//选填

'url':data,//数据源必填

dbTrclick:function(e){//双击tr事件

alert(e.find('.taskCode').html())

}

});

//后台分页的样子

/*$('#histroyBox').CJJTable({

'title':["装点","卸点","运输货物","下单日期"],//thead中的标题必填

'body':["contactName","contactMobliePhone","carrierName","taskNum","taskCustomerExpectPrice","taskCustomerBudgetFreight"],//tbody td 取值的字段必填

'display':[1,1,1,1,2,2],//隐藏域，1显示，2隐藏必填

'pageJson':{

"taskId":528710,

"pageSize":100,//ajax请求参数中的每页展示数量选填

"token":"yJUmunFeG3REqisYAmCfeA"

'url':'api/quoted/quotedList',//数据源必填

dbTrclick:function(that){ //双击tr事件

alert(that.find('.contactName').html())

}

});*/

其中是数据JS内容，大家在实际操作的时候可以用JS获取json达到要的数据格式：

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" : "虹口区",

"startAddr" : "逸仙路25号",

"endCity" : "南通市",

"endArea" : "通州区",

"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是分页加载的效果实现。代码为：

;(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>

titlesmall+="

"+_this.options.title[i]+"";

titlelistBox = titlesmall;

}

var json = "";

var maxpagenumberBox = 7;//选择项最多的数量

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

var bodyBigBox="";

var bodyBox="";

for(var x=0;x<_this.options.body.length>

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+="

"+json[i][type]+"";

bodyBigBox = bodyBox;

}

histroy_DD +="

"+bodyBigBox+"";

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 += '

' + (i * 1 + 1) + '';

maxpagenumberBoxBigbox = maxpagenumberBoxBig;

}

} else {

for (var i = 0; i < maxpagenumberBox; i++) {

var className = "";

if(i==0){

className = "pagenumberBoxLi";

}

maxpagenumberBoxBig += '

' + (i * 1 + 1) + '';

maxpagenumberBoxBigbox = maxpagenumberBoxBig;

}

var buttonTfoot = "

""+

"确定"+

"首页"+

"上一页"+

"+maxpagenumberBoxBigbox+"

""+

"下一页"+

"尾页"+

"5102050100200500"

""+

_this.$element.html("

");

$(_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 != "") {