关键词：
当系统数据量很大时，前端的分页、异步获取方式就成了较好的解决方案。一直以来，我都希望使用自己开发的 jquery 插件做系统。
现在，学习了 jquery 插件开发之后，渐渐地也自己去尝试着开发一些简单的插件，之前已经开发了手风琴、选项卡，今天和大家介绍一下这个 datatable 分页表格插件。
我们先讲解使用，再分析插件的实现方式。
手册地址：http://5ijy01.duapp.com/jq-ui/index.html?tab=tab12
1、引入jquery库和插件库、css文件
首先需要引入 jquery 库，因为我们的 datatable 插件依赖另外一个分页插件，所有需要先把这个分页插件库引入进来，最后再引入 datatable 插件的 js 和 css 文件
1 <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> 2 3 <script type="text/javascript" src="js/pagination.js"></script> 4 <link rel="stylesheet" href="css/blue/pagination.css"/> 5 6 <script type="text/javascript" src="js/datatable.js"></script> 7 <link rel="stylesheet" href="css/blue/datatable.css"/>
2、插件使用
下面我们就介绍下插件如何使用。
首先，我们需要写一个 table 标签，其实，最主要的代码就只有第 5 行的 table 标签，前面的几个 button 是为了看插件交互的。
1 <button class="default-button" onclick="update();">修 改</button> 2 <button class="default-button" onclick="del();">删 除</button> 3 <button class="default-button" onclick="reload();">刷 新</button> 4 5 <table id="first-datatable"></table>
然后，我们需要写一段 script 脚本来初始化 datatable 组件，以及加载首页数据。
1 $("#first-datatable").datatable( 2 width: "1000", 3 height: "auto", 4 columns: [ 5 field: "id", columnName: "编号", css: "text-align": "center" , 6 field: "username", columnName: "用户名" , 7 field: "age", columnName: "年龄" , 8 field: "phone", columnName: "联系电话", css: "text-align": "center" , 9 field: "email", columnName: "邮箱" , 10 field: "description", columnName: "自我介绍" 11 ], 12 url: "/jq-ui/ajax/admin_json.jsp", 13 pageNum: 1, // 显示第几页数据，默认1 14 pageSize: 15, // 每页数据数量，默认10 15 pagination: true, // 是否启用分页组件，默认启用 16 showCheckbox: true 17 );
我们简单介绍一下参数：
width： 是包裹 table 标签的 div 的宽度，您可以不设置这个参数的值，默认使用的 100% 即父元素的宽度
height： 是包裹 table 标签的 div 的高度，默认 auto
columns： 是一个 object[] 对象，定义 table 的列信息，包括列名、字段的 key、css样式
url： 获取异步数据的远程地址
pageNum：初始化时显示第几页数据
pageSize：每页显示多少数据
pagination：是否启用分页组件
showCheckbox：是否显示行首的复选框，这个参数在需要进行数据选择时使用
后台代码就不在这个介绍了，如果需要可以去下载插件项目代码。后台返回一个 json 数据，应该包括最大页数、数据集合信息，如下：
现在，可以看到插件的效果了：
3、插件的实现方式和核心函数
插件初始化时首先生成 thead 和 表头，然后在 table 外面包裹一个 div ， 然后通过参数配置的 url 参数获取数据，加载到 table 的 tbody 中。在这个过程中，会通过参数判断是否显示行首的复选框和分页组件。分页插件我们不做重点介绍，datatable 插件中的代码如下：
1 if(options["pagination"]) 2 // 先把之前的分页组件删除 3 $datatable.parent().find(".pagination").remove(); 4 // 定义一个div用于显示分页组件 5 var $pagination = $("<div></div>").css("margin-top", "10px"); 6 // 初始化分页组件 7 $pagination.pagination( 8 pageNum: options["pageNum"], 9 size: options["pageSize"], 10 total: data["totalPage"], 11 click: function(curr, s) 12 options["pageNum"] = curr; 13 $.data(this, "datatable", options); 14 loadData($datatable); 15 return data["totalPage"]; 16 17 ); 18 // 把分页组件追加到datatable组件 19 $datatable.parent().append($pagination); 20
为了方便用户获取数据、刷新表格，插件提供了两个函数：
4、刷新、获取
下面我们简单介绍下如何使用 reload 和 getSelectRows 函数
删除按钮的事件函数：
1 /* 2 * 删除函数 3 */ 4 function del(tid) 5 var rows = $("#" + tid).datatable("getSelectRows"); 6 if(rows.length < 1) 7 alert("请至少选择一条数据"); 8 return; 9 10 var ids = new Array(); 11 for(var i = 0; i < rows.length; i++) 12 var id = rows[i]["id"]; 13 ids.push(id); 14 15 console.log(ids); 16 $.ajax( 17 type: "post", 18 dataType: "json", 19 data: "ids": ids, 20 traditional: true, 21 url: "/jq-ui/ajax/admin_del.jsp", 22 success: function(data) 23 if(data["retCode"] == \'0\') 24 alert("删除成功"); 25 $("#" + tid).datatable("reload"); 26 27 28 ); 29
更新按钮的事件函数类似，就不再重复介绍了。
刷新按钮的事件函数：
1 /* 2 * 点击"刷新"后调用datatable的reload函数重新加载数据 3 */ 4 function reload(id) 5 $("#" + id).datatable("reload"); 6
5、项目地址
datatable.js http://5ijy01.duapp.com/jq-ui/js/datatable.js
datatable.css http://5ijy01.duapp.com/jq-ui/css/blue/datatable.css
演示项目在 http://5ijy01.duapp.com/jq-ui/index.html
github项目在 https://github.com/xuguofeng/jq-ui
JQuery DataTables 服务器端分页
...2012-07-1811:22:24【问题描述】：在我的网络应用程序中，我使用JQueryDataTables插件来显示从数据库检索到的数据。我目前正在使用客户端分页，但我的表格中的数据增长了很多，并且在ASP.NET页面中的加载现在变得有点慢。所以我打... 查看详情
datatables使用方式
datatables是一款基于jQuery开发的开源免费的表格插件，它有完整全面的功能、丰富的api和支持、优秀的质量和稳定性及性能，强大的功能包括（且不限于）：支持Ajax数据获取,提供真分页实现方案.提供多种常见主题支持DataTabl... 查看详情
datatable使用介绍(代码片段)
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。1、支持分页：前台分页和后台分页前台分页：后台一次把数据传过来，交给前端渲染。缺点：初次渲染时间长；优点：渲染完成... 查看详情
jquery datatable插件aadata格式不显示表格
...：2014-02-1206:27:46【问题描述】：我是jquery的新手。我正在使用jquery数据表插件。我试图用数据表显示aadata数组，但我没有显示数据表，我只能看到空页面。谁能帮我解决我哪里出错了？下面是我使用的代码。$(docum 查看详情
使用 DataTables 插件的服务器端分页
】使用DataTables插件的服务器端分页【英文标题】：ServersidepaginationusingDataTablesplugin【发布时间】：2014-11-1311:53:12【问题描述】：服务器每页返回15条记录，总记录超过2000条。我想显示前15条记录，然后在每次单击“下一步”按钮... 查看详情
datatables的使用(代码片段)
...加载等众多好用的功能项目地址：https://datatables.net/基本使用需要用到的JS和CSS文件位于项目代码下的media目录中，需要将这个目录中的对应文件放入你的项目里，这一步不赘述引入CSS/JS文件，由于Datatables是基于Jquery的，所以要... 查看详情
jQuery DataTables 分页大小
...ginationSize【发布时间】：2011-12-2411:27:28【问题描述】：我使用jQueryDataTables插件(http://datatables.net)已经有一段时间了，通常我们使用默认大小和使用"bStateSave":true选项非常好。但是现在我真的需要将分页的大小设置为不是[10... 查看详情
001_jquery的表格插件datatable详解
一、1.启用id为"datatable1"标签的html的表格jQuery库$("#datatable1").dataTable() Reference:http://www.w3school.com.cn/jquery/jquery_syntax.asphttps://datatables.net/ #官网http://datatables.club/example/diy. 查看详情
问题：使用 jquery 插件 tablesorter 进行表格排序和分页
】问题：使用jquery插件tablesorter进行表格排序和分页【英文标题】：Problem:tablesortingandpaginationwithjqueryplugintablesorter【发布时间】：2010-06-1015:03:16【问题描述】：我有一个有100行的表，它也有分页。每页显示10条记录。我正在使用jq... 查看详情
使用 jQuery DataTables 插件，fnAddData() 是不是将行添加到 html 表格的顶部或底部？
】使用jQueryDataTables插件，fnAddData()是不是将行添加到html表格的顶部或底部？【英文标题】：UsingjQueryDataTablesplugin,doesfnAddData()addrowstothetoporbottomofanhtmltable?使用jQueryDataTables插件，fnAddData()是否将行添加到html表格的顶部或底部？【... 查看详情
jquery dataTables 插件可以在排序/过滤后尊重备用行颜色吗？
...ering?【发布时间】：2015-08-2716:29:14【问题描述】：我正在使用jquerydatatablesplugin，这似乎是一个有用的插件，可以获取常规html表格并添加排序、过滤、分页等我看到的 查看详情
jQuery / DataTables：如何更改分页颜色
...ncolor【发布时间】：2013-12-0913:19:18【问题描述】：我正在使用jQueryDataTables插件（版本1.9.4）并想更改分页的颜色。使用CSS我可以更改它们的背景颜色，但我找不到更改锚标记的字体颜色和字体悬停颜色的方法。我想将以下所有锚... 查看详情
jQuery DataTables 中的下拉分页
...les【发布时间】：2012-10-1917:32:48【问题描述】：是否可以使用jquery数据表进行如下图所示的下拉分页？【问题讨论】：您能分享一下您是如何实现这一目标的吗？【参考方案1】：是的-使用这样的插件：http://datatables.net/plug-ins/pag... 查看详情
DataTables jQuery插件服务器端处理，通过ajax删除后智能分页
...iaajax【发布时间】：2012-12-1018:07:03【问题描述】：任务：使用ajax从表行中的链接删除db中的记录，并在(awesome:)DataTablesjQuery插件(link)中维护过 查看详情
如何更改 DataTables jQuery 插件的分页按钮数量
】如何更改DataTablesjQuery插件的分页按钮数量【英文标题】：HowtochangethenumberofpaginationbuttonsoftheDataTablesjQueryplugin【发布时间】：2014-08-1413:10:13【问题描述】：默认情况下，DataTables插件显示7个分页按钮（包括省略号）喜欢上一个123... 查看详情
如何设置jquery插件datatables属性邵珠庆の博客
... 110多个例子； 对AdobeAIR的完全支持。 引入 使用 Javascript代码 $(document).ready(function() $(\'#example\').dataTable(); ); // 另一个例子 $(document).ready(function() $(\'#example\').dataTable( "bInfo": false ... 查看详情
基于 Datatable Jquery 的插件 - 表格 - 表格中可折叠的问题 - Javascript/HTML
...关注可以按结果过滤和排序的护理访问。尽管我从未真正使用过Javascri 查看详情
jQuery DataTables：如何更改分页活动颜色？
...color?【发布时间】：2016-12-0504:54:20【问题描述】：我正在使用jQueryDataTables插件并想更改分页的颜色。使用CSS我想同时更改字体颜色、悬停字体颜色和活动页面颜色。分页代码如下：<script>$(document).ready( 查看详情