分页处理 jquery ajax
2015-12-21 16:21
459 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页处理 jquery</title> <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="common/pagination.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(function () { InitTable(0); //Load事件,初始化表格数据,页面索引为0(第一页) //分页,PageCount是总条目数,这是必选参数,其它参数都是可选 $("#Pagination").pagination(100, { callback: PageCallback, //PageCallback() 为翻页调用次函数。 prev_text: "« 上一页", next_text: "下一页 »", items_per_page:pageSize, num_edge_entries: 2, //两侧首尾分页条目数 num_display_entries: 6, //连续分页主体部分分页条目数 current_page: pageIndex //当前页索引 }); //翻页调用 function PageCallback(index, jq) { InitTable(index); } //请求数据 function InitTable(pageIndex) { var tbody = ""; $.ajax({ type: "POST", dataType: "text", url: 'http://www.zuihuibao.com/index.php', //提交到一般处理程序请求数据 data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize, //提交两个参数:pageIndex(页面索引),pageSize(显示条数) success: function(data) { $("#linkTable tr:gt(0)").remove(); for(var k in data){ var trs = ""; trs += "<tr><td align='center'>" + data[k]['ProductName'] + "</td><td>" + data[k]['QuantityPerUnit'] + "</td></tr>"; tbody += trs; $("#linkTable").append(tbody); } } }); } }); </script> <div> <table id="linkTable" cellpadding="6" cellspacing="1" align="left" class="tablesorter" style="width:400px;margin:0 0 20px 5px;"> <thead> <tr class="tableHeader" align="center"> <th style="width:200px; text-align:center;" > 产品名称 </th> <th style="width:200px; text-align:center"> 产品单价 </th> </tr> </thead> </table> </div> <div id="Pagination" class="digg"></div> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作