我们这次给大家带来的是用jQuery实现页码跳转式动态数据分页这个效果,这个效果最明显的就是没有数据加载和刷新页面这个过程,再做小型数据的加载也多级网页加载的时候很有效。我们先来看下实际效果:
下面我们给出全部效果代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;charset=utf - 8”比;
& lt; title> jQuery实现页码跳转式动态数据分页& lt;/title>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-1.9.1.min.js "祝辞& lt;/script>
& lt; !——& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/back-endPage.js "祝辞& lt;/script>——比;& lt; !——后台分页——比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/front-endPage.js "祝辞& lt;/script> & lt; !——前台分页——比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/shujv2.js "祝辞& lt;/script>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/table.css " rel=巴獠縩ofollow”比;
& lt;/head>
& lt; body>
& lt; div id=" histroyBox "祝辞& lt;/div>
& lt;脚本type=" text/javascript祝辞//前台分页的样子
$ (' # histroyBox ') .CJJTable ({
“标题”:["装点”,“卸点”,“运输货物”,“下单日期”,“作者”),//thead中的标题必填
“身体”:[" taskCode”、“startAddr”、“endAddr”,“varietiesTypeName”,“createDate”,“customerName”], tbody td//取值的字段必填
“显示”:[1,1,1,1,1,2),//隐藏域,1显示,2隐藏必填
“pageNUmber”: 10//每页显示的条数选填
“pageLength”: data.length,//选填
“url”:数据,//数据源必填
dbTrclick:函数(e){//双击tr事件
警报(e.find .taskCode) . html ())
}
}）;//后台分页的样子/* $ (' # histroyBox ') .CJJTable ({
“标题”:["装点”,“卸点”,“运输货物”,“下单日期”),//thead中的标题必填
“身体”:[“联系名称”、“contactMobliePhone”,“carrierName”,“taskNum”,“taskCustomerExpectPrice”,“taskCustomerBudgetFreight”], tbody td//取值的字段必填
“显示”:[1,1,1,1、2、2],//隐藏域,1显示,2隐藏必填
“pageJson”: {
“taskId”: 528710年,
页大小:100//ajax请求参数中的每页展示数量选填
“令牌”:“yJUmunFeG3REqisYAmCfeA”
},
“url”:“api/引用/quotedList”//数据源必填
dbTrclick:函数(){//双击tr事件
警报(that.find .contactName) . html ())
}
}); */& lt;/script>
& lt;/body>
& lt;/html>
其中& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/shujv2.js "祝辞& lt;/script>是数据JS内容,大家在实际操作的时候可以用JS获取json达到要的数据格式:
var data=https://www.yisu.com/zixun/[{“warehouseID”:“3750”,
:“warehouseCode CK20140825061813777127447”,
“省”:“上海”,
“endProvince”:“江苏省”,
“provinceId”:“310000”,
“cityId”:“310100”,
“areaId”:“310109”,
“endProvinceId”:“320000”,
“endCityId”:“320600”,
“endAreaId”:“320612”,
“materialId”:“0”,
“材料”:“”,
“为了”:“0”,
“productNId”:“0”,
“varietiesId”:“8”,
“varietiesTypeId”:“621”,
:“taskCode T1611230481”,
“customerID”:“20147”,
“customerName”:“”,
“createDate”:“2016-11-23 18:41:40”,
“wareHouseName”:“找钢仓库”,
“城市”:“上海市”,
“区域”:“虹口区”,
“startAddr”:“逸仙路25号”,
“endCity”:“南通市”,
:“endArea通州区”,
“endAddr”:“1”,
:“varietiesTypeName钢材”,
“品种”:“线材”,
“productN”:“”,
:“规范”,
“体重”:“1”,
“num”:“1”,
“接收方”:“”,
“receiverPhone”:“1”,
“备注”:“”,
“标签”:“”,
“startAddrNumber”:“1”,
“varietiesNumber”:“1”,
“contactsId”:“22494”,
“contactsName”:“刘宇测试”
}]
<强>是分页加载的效果实现。代码为:
