jQuery表格插件datatables用法详解

一、Datatables简介
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
易用
可扩展性和灵活性
国际化
动态创建表格
免费的

二、如何使用
在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务
1、DataTables的默认配置

 $（document）.ready（function（） { $（"#example"）.dataTable（）; } ）;

2、DataTables的一些基础属性配置

 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "bFilter": true, //过滤功能 "bSort": false, //排序功能 "bInfo": true,//页脚信息 "bAutoWidth": true//自动宽度

3、数据排序

$（document）.ready（function（） { $（"#example"）.dataTable（ { "aaSorting": [ [ 4, "desc" ] ] } ）; } ）;

从第0列开始，以第4列倒序排列
4、隐藏某些列

$（document）.ready（function（） { $（"#example"）.dataTable（ { "aoColumnDefs": [ { "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, { "bVisible": false, "aTargets": [ 3 ] } ] } ）; } ）;

5、国际化

$（document）.ready（function（） { $（"#example"）.dataTable（ { "oLanguage": { "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉， 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "（从 _MAX_ 条数据中检索）", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" }, "sZeroRecords": "没有检索到数据", "sProcessing": "<img src="./loading.gif" />" } } ）; } ）;

6、排序功能：

$（document）.ready（function（） { $（"#example"）.dataTable（ { "aoColumns": [ null, { "asSorting": [ "asc" ] }, { "asSorting": [ "desc", "asc", "asc" ] }, { "asSorting": [ ] }, { "asSorting": [ ] } ] } ）; } ）;

7、数据获取支持4种：如下

•DOM 文档数据
•Javascript array js数组
•Ajax source Ajax请求数据
•Server side processing 服务器端数据

三、实例讲解
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" />//删除按钮 <div 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> } </div>

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

<script type="text/javascript">function dialogClose（） {$（"#e_Attributes"）.dialog（"close"）;}$（"#e_Attributes"）.dialog（{modal: true,autoOpen: false,show: {effect: "blind", duration: 1000},hide: {effect: "explode",duration: 1000 }, width: 400}）;var editor;$（function （） { //声明datatable$（"#gridtable"）.dataTable（）.fnDestroy（）;editor = $（"#gridtable"）.dataTable（{ "bInfo":false, "bServerSide": false, "bPaginate": false, //是否分页。"bProcessing": false,//当datatable获取数据时候是否显示正在处理提示信息。"bFilter": false,//是否使用内置的过滤功能。"bLengthChange": false, //是否允许用户自定义每页显示条数。"sPaginationType": "full_numbers", //分页样式}）; //单击，赋值，改样式 $（"#gridtable tbody tr"）.click（function （e） { if （$（this）.hasClass（"row_selected"）） { $（this）.removeClass（"row_selected"）; putNullValue（） } else { editor.$（"tr.row_selected"）.removeClass（"row_selected"）; $（this）.addClass（"row_selected"）; var aData = editor.fnGetData（this）; if （null ！= aData） { putValue（aData）; } } }）; //双击 $（"#gridtable tbody tr"）.dblclick（function （） { if （$（this）.hasClass（"row_selected"）） { //$（this）.removeClass（"row_selected"）; } else { editor.$（"tr.row_selected"）.removeClass（"row_selected"）; $（this）.addClass（"row_selected"）; }var aData = editor.fnGetData（this）; if （null ！= aData） { putValue（aData）; }$（"#hiddenValue"）.val（"edit"）; $（"#e_Attributes"）.dialog（"open"）;}）; //添加 $（"#add"）.click（function （） { editor.$（"tr.row_selected"）.removeClass（"row_selected"）; putNullValue（）;$（"#hiddenValue"）.val（"add"）; $（"#e_Attributes"）.dialog（"open"）; }）; //编辑 $（"#edit"）.click（function （） {var productAttributeID = $（"#productAttributeID"）.val（）; if （productAttributeID ！= "" && productAttributeID ！= null） { $（"#hiddenValue"）.val（"edit"）; $（"#e_Attributes"）.dialog（"open"）; }}）; //删除 $（"#delete"）.click（function （） { var productAttributeID = $（"#productAttributeID"）.val（）; var productID = $（"#productID"）.val（）; if （productAttributeID ！= null && productAttributeID ！= ""） { if （confirm（"Delete?"）） { $.ajax（{ type: "GET", url: "@Url.Action（"DeleteAttribute", "Product"）", data: { ProductID: productID, ProductAttributeID: productAttributeID },//参数名要和Action 中的参数名相同 dataType: "html", cache: false, success: function （result） { $（"#d_Attributes"）.html（result）; $（"#productAttributeID"）.val（null）; } }）; } } }）;//赋空值，并去除input-validation-error样式（此样式不管有无，均可去除，所以不用判断了） function putNullValue（） { 。。。。。。／／此处省略 } //赋值 function putValue（aData） {。。。。。。//此处省略 } }）;$.ajaxSetup（{ cache: false }）; </script>

上面代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。
添加功能效果图

编辑功能效果图：

删除效果图：

到此，功能已经全部实现，所需的代码也已经贴出。
4、分页实现
引入CSS文件和JS文件

<style type="text/css" title="currentStyle"> @import "DataTables-1.8.1/media/css/demo_page.css"; @import "DataTables-1.8.1/media/css/demo_table.css"; @import "DataTables-1.8.1/media/css/demo_table_jui.css"; </style> <script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script>-------------------------------------------------------------------------- -----------最简单的方式：$（document）.ready（function（） {$（"#example"）.dataTable（）; }）; ----------也可以自己定义各属性： <script type="text/javascript" language="javascript"> $（document）.ready（function（） { $（"#example"）.dataTable（{ //"bPaginate": true, //开关，是否显示分页器 //"bInfo": true, //开关，是否显示表格的一些信息 //"bFilter": true, //开关，是否启用客户端过滤器 //"sDom": "<>lfrtip<>", //"bAutoWith": false, //"bDeferRender": false, //"bJQueryUI": false, //开关，是否启用JQueryUI风格 //"bLengthChange": true, //开关，是否显示每页大小的下拉框 //"bProcessing": true, //"bScrollInfinite": false, //"sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值："disabled","2000px" //"bSort": true, //开关，是否启用各列具有按列排序的功能 //"bSortClasses": true, //"bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列 //"sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值："disabled","2000%" //"aaSorting": [[0, "asc"]], //"aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列 //"sDom": "<"H"if>t<"F"if>", "bAutoWidth": false, //自适应宽度 "aaSorting": [[1, "asc"]], "sPaginationType": "full_numbers", "oLanguage": { "sProcessing": "正在加载中......", "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "对不起，查询不到相关数据！", "sEmptyTable": "表中无数据存在！", "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录", "sInfoFiltered": "数据表中共为 _MAX_ 条记录", "sSearch": "搜索", "oPaginate": { "sFirst": "首页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "末页" } } //多语言配置 }）; }）; </script>

对于 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，显示信息。

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

/* * Example init */$（document）.ready（function（）{$（"#example"）.dataTable（）;}）;

以上就是关于jQuery表格插件datatables用法的详细介绍，希望对大家的学习有所帮助。