1.DataTables简介Datatables是jQuery的一个表单插件。这是一个高度灵活的工具，它的基础是逐渐增强的，会增加高级交互控件，支持任何HTML形式。主要特点：

自动分页处理即时表格数据过滤数据排序和数据类型自动检测自动处理列宽可支持CSS自定义样式。易用性、可扩展性和灵活性。国际化动态表创建是免费的。2.如何使用它。做后台工作的时候，没有艺人或者前端工程师配合你做页面。为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务1。数据表的默认配置。

$(文档)。ready(function() { $('#example '))。dataTable()；} );2.数据表的一些基本属性的配置。

BPaginate': true，//翻页功能' bLengthChange ' : true，//更改每页显示的数据量' bFilter': true，//筛选功能' bSort ' : false，///排序功能' bInfo': true，//页脚信息'。

$(文档)。ready(function() { $('#example '))。dataTable({ 'aaSorting': [ [ 4，' desc ']]})；} );从第0列开始，按与第4列相反的顺序排列。隐藏一些列。

$(文档)。ready(function() { $('#example '))。dataTable({ ' aoColumnDefs ' :[{ ' bSearchable ' : false，' bVisible': false，' aTargets': [ 2 ] }，{ 'bVisible': false，' Atargets ' :[3]}]})；} );5.国际化

$(文档)。ready (function () {$ ('# example '))。datatable({ ' olan guage ' : { ' slength MENU ' : '每页显示_MENU_ records '，' sZeroRecords': '抱歉，但未找到'，' SInfo ' : ' from _ START _ to _ END _/total _ data '，' sInfoEmpty': '无数据'，' sInfoFiltered': '(从_MAX_ data检索)，OPaginate ' : { ' sFirst ' :} );6.排序功能：

$(文档)。ready(function() { $('#example '))。dataTable({ ' aoColumns ' :[null，{ ' SacKing ' :[' asc ']}，{ ' SacKing ' :[' desc '，' ASC '，' asc' ] }，{ ' SacKing ' :[]}，{ ' SacKing ' :[]})})；} );7.数据采集支持有四种：如下。

文档数据Javascript数组js数组Ajax源Ajax请求数据服务器端处理服务器端数据三。示例说明。

1.需求：如下图所示，添加、编辑、删除数据表内容。

2.分析：添加功能-点击添加按钮，弹出对话框，添加新内容。编辑功能-单击数据表选择一行，该行的颜色发生变化，即已被选中。点击编辑按钮，弹出一个对话框，对话框中的内容就是我们选中的行的内容。如果没有选择行，点击编辑按钮，对话框不会弹出。双击数据表中的行时，会弹出一个对话框，双击的行会改变颜色。对话框中的内容是双击行的内容。删除功能-点击数据表选择一行，点击删除按钮，弹出警告框，提示是否删除所选内容。当未选择任何内容时，单击删除按钮，不会弹出警告框，也不会删除任何内容。3.代码：属性//名称。

表id='网格表' class='网格表'//声明jquery数据表包含名称/th值/th显示顺序/th/tr/和正文.//数据表内容，此处省略/t正文/表格输入类型=' button ' id=' Add '值=' Add '////添加按钮输入类型='按钮id='编辑'值='编辑'///编辑按钮输入类型='button' id='delete '值='删除'////删除按钮div id='e_Attributes'//声明对话，异步更新@使用(Ajax .开始通知('更新'，'产品'，新的AJaxooptions { updateTargetId=' d _ Attributes '，OnSuccess='dialogClose '，HttpMethod='Post '，}){表体t tr tdName/TD输入id=' Name ' Name=' Name ' type=' text ' style=' width :250 px ' class=' required '/*/TD/tr tdValue/TD TD输入id=' Value ' Name=' Value ' type=' text ' style=' width :0 '上面代码说明：这段代码主要分了两个部分，第一部分是jquery数据表的声明，表id='网格表' class='网格表'；第二部分是对话的声明，以及操作所需要的行动，此部分的操作选择创建交互式、快速动态网页应用的网页开发技术无刷新页面技术。所需射流研究…的代码：

脚本类型='text/javascript '函数dialogClose() { $('#e_Attributes ').对话框("关闭");} $('#e_Attributes ').对话框({ modal: true，autoOpen: false，show: { effect: 'blind '，duration: 1000 }，hide: { effect: 'explode '，duration: 1000 }，width : 400 })；定义变量编辑器；$(function () { //声明datatable $(“# grid table”).数据表().fnDestroy()；编辑器=$('#gridtable ').dataTable({ 'bInfo':false，' bServerSide': false，' bPaginate': false，//是否分页"处理":为假，//当数据表获取数据时候是否显示正在处理提示信息“b筛选器":为假，//是否使用内置的过滤功能" blendchange": false，//是否允许用户自定义每页显示条数" sPaginationType " : " full _ numbers "，//分页样式});//单击，赋值，改样式$('#gridtable tbody tr ').点击（函数{ if ($(this)).有类(' row _ selected '){ $(this).移除CLaSS(' row _ selected ')；putNullValue() } else { editor .$(“tr。row _ selected ").移除CLaSS(' row _ selected ')；$(这个)。addCLaSS(' row _ selected ')；var aData=编辑器。fngetdata(this)；if (null！=aData){ putValue(aData)；} } });//双击$('#gridtable tbody tr ').dblclick(function () { if ($(this)).有类(' row _ selected '){//$(this).移除CLaSS(' row _ selected ')；} else { editor .$(“tr。row _ selected ").移除CLaSS(' row _ selected ')；$(这个)。addCLaSS(' row _ selected ')；} var aData=编辑器。fngetdata(this)；if (null！=aData){ putValue(aData)；} $('#hiddenValue ').“val(”编辑');$('#e_Attributes ').对话框("打开");});//添加$('#add ').单击(函数(){编辑器.$(“tr。row _ selected ").移除CLaSS(' row _ selected ')；putNullValue()；$('#hiddenValue ').val(' add ')；$('#e_Attributes ').对话框("打开");});//编辑$(“# edit”).单击(function(){ var ProductAttributeid=$(' # ProductAttributeid ').val()；if (productAttributeID！productAttributeID！=null) { $('#hiddenValue ').“val(”编辑');$('#e_Attributes ').对话框("打开");} });//删除$('#delete ').单击(function(){ var ProductAttributeid=$(' # ProductAttributeid ').val()；var productID=$('#productID ').val()；if (productAttributeID！=null productAttributeID！='') { if(确认('删除？)) { $.ajax({ type: 'GET '，url: ' @ Url .操作(“删除属性”、“产品”)，数据： { ProductID: productID，ProductAttributeID : ProductAttributeID }，//参数名要和行动中的参数名相同数据类型： 'html '，缓存： false，成功：函数（结果){ $('#d_Attributes ').html(结果);$('#productAttributeID ').val(null)；} });} } });//赋空值，并去除输入验证错误样式（此样式不管有无，均可去除，所以不用判断了)函数putNullValue() {。此处省略} //赋值函数putValue(aData){。/.此处省略} });$.AJaxsetup({ cache : false })；/script上面代码说明：这段代码分别为对话的声明，数据表的声明以添加、编辑、删除的操作。添加功能效果图

编辑功能效果图：

删除效果图：

到此，功能已经全部实现，所需的代码也已经贴出。4、分页实现

引入半铸钢钢性铸铁(铸造半钢)文件和射流研究…文件

样式类型=' text/CSS ' title=' currentStyle ' @ import ' DataTables-1。8 .1/媒体/CSS/demo _ page。CSS '；@ import ' DataTables-1。8 .1/媒体/CSS/demo _ table。CSS '；@ import ' DataTables-1。8 .1/media/CSS/demo _ table _ Jui。CSS '；/style script type=' text/JAVAScript ' language=' JAVAScript ' src=' http : datatables-1。8 .1/media/js/jquery。js '/script script type=' text/JavaScript ' language=' JAVAScript ' src=' http : datatables-1。8 .1/media/js/jquery。数据表。js '/脚本-最简单的方式：$(文档)。ready(function() { $('#example ')).dataTable()；});-也可以自己定义各属性：脚本类型='text/javascript '语言='javascript' $(文档)。ready(function() { $('#example ')).dataTable({//' bPaginate ' : true，//开关，是否显示分页器//'bInfo': true，//开关，是否显示表格的一些信息//' b筛选器： true，//开关，是否启用客户端过滤器//'sDom': 'lfrtip '，//'bAutoWith': false，/' bdefered ' : false，/'bJQueryUI': false，//开关，是否启用JQueryUI风格//'bLengthChange': true，//开关，是否显示每页大小的下拉框//“b处理”:为真，/“b crollinfield”:为假，/“sScrollY”:“800 px”，//是否开启垂直滚动，以及指定滚动区域大小，可设值：“disabled”，“2000 px”/“ORACLE”: true，//开关，是否启用各列具有按列排序的功能//"吸收类":为真，/"数据库保存":为假，//开关，是否打开客户端状态记录功能。这个数据是记录在饼干中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- - 当值为真实的时aoColumnDefs不能隐藏列//'sScrollX': '50% '，//是否开启水平滚动，以及指定滚动区域大小，可设值：' disabled '，' 2000% '/' aaSorting ' :[[0，' asc']，/' aoColumnDefs ' :[{ ' bVisible ' : false，' aTargets': [0]}]//隐藏列//“SDom”:“H”如果“F”如果，“Bautowidth”:假，//自适应宽度aaSorting ' :[[1]，' asc']，' sPaginationType ' : ' full _ numbers '，' oLanguage ' : { ' spreading ' : '正在加载中.' sLengthMenu': '每页显示_MENU_条记录，' sZeroRecords': '对不起，查询不到相关数据！' sEmptyTable ' : '表中无数据存在！' sInfo': '当前显示_START_到_END_条，共_合计_条记录，' sInfoFiltered': '数据表中共为_MAX_条记录，'搜索' : '搜索，' oPaginate': { 'sFirst': '首页，' sPrevious': '上一页，' sNext': '下一页，' sLast': '末页' } } //多语言配置});});/script对于数据表来说，表格必须通过四羟乙基己二酰胺和tbody进行说明，如下所示，

表格单元格填充=' 0 '单元格间距=' 0 '边框=' 0 '类=' display ' id=' example '第几个渲染引擎/第几个浏览器/第几个平台/第几个引擎版本/第几个半铸钢钢性铸铁(Cast Semi-Steel)等级/第几个/tr/第几个t车身tr class='奇数等级X ' TD三叉戟/TD TD TD TD Internet Explorer 4.0/TD TD Win 95/TD TD TD class='中央' 4/TD TD TD class='中央' X/TD/tr如果没有四羟乙基己二酰胺将会报错。

bPaginate:是否分页的默认值为true，每页行数为：每页默认行数为：10spatination type:支持两种内置方法，two_button和full_numbers，默认使用two_button。bLengthChange :是否允许用户在通过下拉列表分页后选择每页的行数。行数是10、25、50、100。此设置需要bp阴道支持。默认值为真。BFilter:启用或禁用数据过滤，默认值为真。注意，如果使用过滤功能，但想关闭默认过滤输入框，应该使用sDom bInfo:允许或禁止显示表格信息，默认值为true显示信息。最简单的使用方式就是零配置的方式。

/* *示例init */$(文档)。ready(function(){ $('#example '))。dataTable()；});以上是关于jQuery表格插件datatables的用法的详细介绍，希望对大家的学习有所帮助。