jQuery实现页码跳转式动态数据分页实现页码跳转式动态数据分页
我们这次给大家带来的是用jQuery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再
做小型数据的加载也多级网页加载的时候很有效。我们先来看下实际效果：
下面我们给出全部效果代码：
HTML全部代码：全部代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现页码跳转式动态数据分页-软件开发网</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<!-- <script type="text/javascript" src="back-endPage.js"></script> --> <!-- 后台分页 -->
<script type="text/javascript" src="js/front-endPage.js"></script><!-- 前台分页 -->
<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">
//前台分页的样子
$('#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())
}
});*/
</script>
</body>
</html>
其中<script type=”text/javascript” src=”js/shujv2.js”></script>是数据JS内容，大家在实际操作的时候可以用JS获取json达到要的数据格
式：
shujv2.js代码：代码：
var data = [ {
"warehouseID" : "3750",
下载后可阅读完整内容，剩余4页未读，立即下载
weixin_38499950
- 粉丝: 4
- 资源: 941
我的内容管理
展开
最新资源
- 李兴华Java基础教程：从入门到精通
- U盘与硬盘启动安装教程：从菜鸟到专家
- C++面试宝典：动态内存管理与继承解析
- C++ STL源码深度解析：专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手：数据管理与企业增值的战略
- Eclipse IDE基础教程：从入门到精通
- Shell脚本专家宝典：全面学习与资源指南
- Tomcat安装指南：附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华：必备术语集锦
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
