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: } });});
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、 编码：
//声明jquery datatables name value displayorder
.....//datatables内容，此处省略
//添加按钮 //编辑按钮 //删除按钮 //声明dialog,异步更新 @using (ajax.beginform(update, product, new ajaxoptions { updatetargetid = d_attributes, onsuccess = dialogclose, httpmethod = post, })) { name *
value *
displayorder *
}
代码说明,这段代码主要分了两个部分。
第一部分是jquery datatables的声明，
；第二部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax无刷新页面技术。所需js的代码如下：
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});
这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。
添加功能效果图
编辑功能效果图：
删除效果图：
到此，功能已经全部实现，所需的代码也已经贴出。
4、分页实现
引入css文件和js文件
-------------------------------------------------------------------------- -----------最简单的方式： $(document).ready(function() { $(#example).datatable(); }); ----------也可以自己定义各属性：
对于 datatables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示，
rendering engine browser platform(s) engine version css grade
trident internet explorer 4.0 win 95+ 4 x
如果没有 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用法的详细介绍