jQuery插件datatables的用法及如何实现分页代码详解

来源：动视网责编：小采时间：2020-11-27 20:15:31

jQuery插件datatables的用法及如何实现分页代码详解

jQuery插件datatables的用法及如何实现分页代码详解:DataTables是一个jQuery的表格插件。实例讲解1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。2、分析：添加功能---单击add按钮，弹出对话框，添加新的内容。编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单

推荐度：

点击下载本文 文档为doc格式

导读jQuery插件datatables的用法及如何实现分页代码详解:DataTables是一个jQuery的表格插件。实例讲解1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。2、分析：添加功能---单击add按钮，弹出对话框，添加新的内容。编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单

DataTables是一个jQuery的表格插件。

实例讲解

1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。

2、分析：添加功能---单击add按钮，弹出对话框，添加新的内容。
编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。
删除功能---单击datatables选中一行，单击delete按钮，弹出警告框，提示要不要删除所选内容。当没有选中任何内容时，单击delete按钮，不会弹出警告框，也不会删除内容。
3、编码：
Attributes//名称

 <table id="gridtable" class="gridtable">//声明jquery datatables 
 <thead> 
 <tr> 
 <th>Name 
 </th> 
 <th>Value 
 </th> 
 <th>DisplayOrder 
 </th> 
 </tr> 
 </thead> 
 <tbody> 
 .....//datatables内容，此处省略 
 </tbody> 
</table> 
<input type="button" id="add" value="Add" />//添加按钮 
<input type="button" id="edit" value="Edit" />//编辑按钮 
<input type="button" id="delete" value="Delete" />//删除按钮 
 
 
<p id="e_Attributes">//声明dialog,异步更新 
 @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 
{ 
 UpdateTargetId = "d_Attributes", 
 OnSuccess = "dialogClose", 
 HttpMethod = "Post", 
})) 
 { 
 <table> 
 <tbody> 
 <tr> 
 <td>Name</td> 
 <td> 
 <input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td> 
 </tr> 
 <tr> 
 <td>Value</td> 
 <td> 
 <input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td> 
 </tr> 
 <tr> 
 <td>DisplayOrder</td> 
 <td> 
 <input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td> 
 </tr> 
 <tr> 
 <td> 
 <input id="submit" type="submit" name="submit" value="Submit" /> 
 <input id="hiddenValue" type="hidden" name="hiddenValue" /> 
 </td> 
 </tr> 
 </tbody> 
 </table> 
 } 
</p>

上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，<table id="gridtable" class="gridtable">；第二部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax无刷新页面技术。所需js的代码：

上面代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。

4、分页实现

引入CSS文件和JS文件

对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示，

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
 <thead> 
 <tr> 
 <th> 
 Rendering engine 
 </th> 
 <th> 
 Browser 
 </th> 
 <th> 
 Platform(s) 
 </th> 
 <th> 
 Engine version 
 </th> 
 <th> 
 CSS grade 
 </th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr class="odd gradeX"> 
 <td> 
 Trident 
 </td> 
 <td> 
 Internet Explorer 4.0 
 </td> 
 <td> 
 Win 95+ 
 </td> 
 <td class="center"> 
 4 
 </td> 
 <td class="center"> 
 X 
 </td> 
 </tr>

如果没有 thead 将会报错。

bPaginate: 是否分页，默认为 true，分页

iDisplayLength : 每页的行数，每页默认数量:10

sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。

bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。

bFilter: 启用或禁止数据过滤，默认为 true。注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDom

bInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。

最为简单的使用方式，就是零配置的方式。