一、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='https://www.jb51.net/article/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>//声明jquery datatables <thead> <tr> <th>Name </th> <th>Value </th> <th>DisplayOrder </th> </tr> </thead> <tbody> .....//datatables内容，此处省略 </tbody> </table> <input type="button" value="Add" />//添加按钮 <input type="button" value="Edit" />//编辑按钮 <input type="button" value="Delete" />//删除按钮 <div>//声明dialog,异步更新 @using (Ajax.BeginForm("Update", "Product", new AjaxOptions { UpdateTargetId = "d_Attributes", OnSuccess = "dialogClose", HttpMethod = "Post", })) { <table> <tbody> <tr> <td>Name</td> <td> <input type="text"/>*</td> </tr> <tr> <td>Value</td> <td> <input type="text"/>*</td> </tr> <tr> <td>DisplayOrder</td> <td> <input type="text"/>*</td> </tr> <tr> <td> <input type="submit" value="Submit" /> <input type="hidden" /> </td> </tr> </tbody> </table> } </div>