本文主要介绍jQuery表格插件数据表的用法，包括分页、排序等功能，属于jQuery表格插件数据表基础知识的一部分。有需要的朋友可以参考一下。
一、Datatables简介
DataTables是jQuery的一个表格插件。这是一个高度灵活的工具，基础逐渐加强，会加入高级交互控件，支持任何HTML表单。主要特点：
自动分页处理
即时表格数据过滤
数据分类和数据类型的自动检测
自动处理列宽
可以通过CSS自定义样式
支撑柱
使用方便
可扩展性和灵活性
国际化
动态表格创建
免费/免费
二、如何使用
后台没有美工和前端工程师配合你做页面。为了显示数据并具有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务。
1、DataTables的默认配置
$(文档)。ready(function() {
$('#example ')。dataTable()；
} );
2、DataTables的一些基础属性配置
' BPaginate': true，//翻页函数
' Blend change': true，//更改每页显示的数据量
' BFilter': true，//过滤函数
' BSort': false，//排序函数
' BInfo': true，//页脚信息
' BAutoWidth': true//自动宽度
3、数据排序
$(文档)。ready(function() {
$('#example ')。数据表({
aaSorting': [
[ 4，《desc》]
]
} );
} );
从第0列开始，按与第4列相反的顺序排列。
4、隐藏某些列
$(文档)。ready(function() {
$('#example ')。数据表({
aoColumnDefs': [
{ 'bSearchable': false，' bVisible': false，' at targets ':[2]}，
{ 'bVisible': false，' at targets ':[3]}
] } );
} );
5、国际化
$(文档)。ready(function() {
$('#example ')。数据表({
奥兰语言':{
SLengthMenu ':'每页显示_菜单_记录'，
SZeroRecords ':'对不起，找不到'，
SInfo ':' from _ START _ to _ END _/total _ pieces of data '，
SInfoEmpty ':'无数据'，
SInfoFiltered ':'(从_MAX_ pieces个数据中检索)'，
不透明':
SFirst ':'主页'，
跨页':'上一页'，
SNext ':'下一页'，
最后一页':'最后一页'
},
SZeroRecords ':'未检索到任何数据'，
存储处理“:”img src=“。/loading.gif' /'
}
} );
} );
6、排序功能：
$(文档)。ready(function() {
$('#example ')。数据表({
aoColumns': [
空，
{ '分类':[ 'asc' ] }，
{ '分类':[ 'desc '，' asc '，' asc' ] }，
{ '分类':[ ] }，
{ '分类':[ ] }
]
} );
} );
7、数据获取支持4种：如下
DOM数据
Javascript数组JS数组
Ajax源Ajax请求数据
?Server side processing 服务器端数据
三、实例讲解
1.需求：如下图所示，增加、编辑、删除数据表的内容。
2.解析：添加功能——点击添加按钮，弹出对话框，添加新内容。
编辑功能-点击数据表选择一行，该行改变颜色，即被选中。点击编辑按钮，将弹出对话框。此对话框中的内容是我们所选行的内容。如果没有选中行，点击编辑按钮，对话框不会弹出。双击数据表中的一行时，对话框也会弹出，双击的行会改变颜色。对话框中的内容是双击行的内容。
删除功能-点击数据表选中一行，点击删除按钮，会弹出一个警告框，提示是否删除选中的内容。当什么都不选时，点击删除按钮，不会弹出警告框，内容不会被删除。
3.编码：
属性//名称
table id=' grid table ' class=' grid table '//Declare jquery数据表
四羟乙基己二酰胺
tr
thName
/th
thValue
/th
thDisplayOrder
/th
/tr
/thead
tbody
.//datatables内容，此处省略。
/tbody
/表格
type=' button ' id=' Add ' value=' Add '//添加一个按钮
type=' button ' id=' edit ' value=' edit '//edit按钮
type=' button ' id=' Delete ' value=' Delete '//Delete按钮
Div id='e_Attributes'//Declare对话框，异步更新
@使用(Ajax。BeginForm('Update '，' Product '，新Ajax选项
{
UpdateTargetId='d_Attributes '，
OnSuccess='dialogClose '，
HttpMethod='Post '，
}))
{
桌子
tbody
tr
td名称/td
（美）财政部（Treasury Department）
输入id=' Name ' Name=' Name ' type=' text ' style=' width:250 px ' class=' required '/*/TD
/tr
tr
（美）财政部（Treasury Department）值/td
（美)财政部(财政部)
输入id=' Value ' name=' Value ' type=' text ' style=' width:250 px ' class=' required '/*/TD
/tr
tr
tdDisplayOrder/td
（美)财政部(财政部)
输入id='显示顺序' name='显示顺序' type=' text ' style=' width:128 px ' class=' required '/*/TD
/tr
tr
（美)财政部(财政部)
输入id='提交'类型='提交'名称='提交'值='提交'/
输入id='隐藏值' type='隐藏' name='隐藏值'/
/td
/tr
/tbody
/表格
}
/div
上面代码说明：这段代码主要分了两个部分，第一部分是jquery数据表的声明，表id='网格表' class='网格表'；第二部分是对话的声明，以及操作所需要的行动，此部分的操作选择创建交互式、快速动态网页应用的网页开发技术无刷新页面技术。所需射流研究…的代码：
脚本类型='文本/javascript '
函数dialogClose() {
$('#e_Attributes ').对话框("关闭");
}
$('#e_Attributes ').对话框({
模态：真的，
autoOpen: false，
显示：{
效果："失明",
持续时间：1000
},
隐藏：{
效果："爆炸",
持续时间：1000
},
宽度：400
});
定义变量编辑器；
$(function () {
//声明数据表
$('#gridtable ').数据表()。fn destroy()；
editor=$('#gridtable ').数据表({
' bInfo':false，
' bServerSide': false，
' bPaginate': false，//是否分页。
' bProcessing': false，//当数据表获取数据时候是否显示正在处理提示信息。
' bFilter': false，//是否使用内置的过滤功能。
' bLengthChange': false，//是否允许用户自定义每页显示条数。
sPaginationType': 'full_numbers '，//分页样式
});
//单击，赋值，改样式
$('#gridtable tbody tr ').点击（功能(e) {
如果($(这个)。具有类(' row _ selected '){
$(这个)。移除类(“row _ selected”)；
putNullValue()
}
否则{
编辑$ 0.001(' tr . row _ selected ').移除类(“row _ selected”)；
$(这个)。添加类(' row _ selected ')；
var aData=editor。fngetdata(this)；
if (null！=aData) {
put value(aData)；
}
}
});
//双击
$('#gridtable tbody tr ').dblclick(function () {
如果($(这个)。具有类(' row _ selected '){
//$(这个)。移除类(“row _ selected”)；
}
否则{
编辑$ 0.001(' tr . row _ selected ').移除类(“row _ selected”)；
$(这个)。添加类(' row _ selected ')；
}
var aData=editor。fngetdata(this)；
if (null！=aData) {
put value(aData)；
}
$('#hiddenValue ').瓦尔(“编辑");
$('#e_Attributes ').对话框("打开");
});
//添加
$('#add ').单击（函数(){
编辑$ 0.001(' tr . row _ selected ').移除类(“row _ selected”)；
putNullValue()；
$('#hiddenValue ').val(' add ')；
$('#e_Attributes ').对话框("打开");
});
//编辑
$('#edit ').单击（函数(){
var产品属性id=$(' #产品属性id ').val()；
if (productAttributeID！='' productAttributeID！=null) {
$('#hiddenValue ').瓦尔(“编辑");
$('#e_Attributes ').对话框("打开");
}
});
//删除
$('#delete ').单击（函数(){
var产品属性id=$(' #产品属性id ').val()；
var productID=$('#productID ').val()；
if (productAttributeID！=null productAttributeID！='') {
如果（确认('删除？)) {
$.ajax({
键入：'获取'，
网址："@网址。操作(' DeleteAttribute '，' Product ')'，
数据：{ ProductID: productID，产品属性ID:产品属性id }，//参数名要和行动中的参数名相同
数据类型：“html”，
缓存：假，
成功：功能（结果){
$('#d_Attributes ').html(结果);
$('#productAttributeID ').瓦尔(空);
}
});
}
}
});
//赋空值，并去除输入验证错误样式（此样式不管有无，均可去除，所以不用判断了)
函数putNullValue() {。//此处省略
}
//赋值
函数putValue(aData) {。//此处省略
}
});
$.Ajax设置({ cache:false })；
/脚本
上面代码说明：这段代码分别为对话的声明，数据表的声明以添加、编辑、删除的操作。
添加功能效果图
编辑功能效果图：
删除效果图：
到目前为止，所有的功能都已实现，所需代码也已发布。
4.分页实现
介绍CSS文件和JS文件
style type=' text/CSS ' title=' current style '
@ 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 '；
/风格
脚本类型='text/javascript '语言='javascript' src='数据表-1 . 8 . 1/media/js/jquery . js '/script
脚本类型='text/javascript '语言=' JavaScript ' src=' DataTables-1 . 8 . 1/media/js/jquery . DataTables . js '/script
-
-最简单的方法：
$(文档)。ready(function() {
$('#example ')。dataTable()；
});
-您也可以自己定义属性：
脚本类型='文本/javascript '语言='javascript '
$(文档)。ready(function() {
$('#example ')。数据表({
//'bPaginate': true，//switch，是否显示分页器。
//'bInfo': true，//switch，是否显示表格的某些信息。
//'bFilter': true，//switch，是否启用客户端过滤？
//'sDom': 'lfrtip '，
//'bAutoWith': false，
//'bDeferRender': false，
//'bJQueryUI': false，//switch，是否启用JQueryUI样式？
//'blend change': true，//switch，是否显示每个页面大小的下拉框。
//'bProcessing': true，
//'bScrollInfinite': false，
//'s scroll':' 800px '，//是否开启垂直滚动，并指定滚动区域的大小，可以设置为' disabled '，' 2000px '
//'bSort': true，//switch，是否启用按列排序的功能？
//'吸收类':true，
//'bStateSave': false，//开关，是否开启客户端状态记录功能。这些数据被记录在cookies中。该记录打开后，即使页面刷新一次或者浏览器重新打开，也保存以前的状态——当值为true时，aoColumnDefs不能隐藏列。
//'sScrollX': '50% '，//是否开启水平滚动，并指定滚动区域的大小，可以设置为'禁用'，' 2000% '
//'aaSorting': [[0，' asc']]，
//' aocolumndefs ':[{ ' bvisible ':false，' at argets ':[0]}]//隐藏列
//' sDom ':' H ' ift ' f ' if '，
' BAutoWidth': false，//自适应宽度
aaSorting': [[1，' asc']]，
sPaginationType': 'full_numbers '，
奥兰语言':{
正在处理“:”正在加载.
SLengthMenu ':'每页显示_菜单_记录'，
' SZeroRecords ':'对不起，找不到相关数据！
SEmptyTable ':'表中没有数据！
SInfo ':'目前在_TOTAL_中有_START_ to _END_条记录，
SInfoFiltered ':'数据表中有_MAX_ records '，
SSearch ':'搜索'，
不透明':
SFirst ':'主页'，
传播':'以前'，
SNext ':'下一页'，
最后一页':'最后一页'
}
}//多语言配置
});
});
/脚本
对于数据表，表必须由ad和tbody解释，如下所示
表格cell padding=' 0 ' cellspacing=' 0 ' border=' 0 ' class=' display ' id=' example '
四羟乙基己二酰胺
tr
泰国(Thailand)
渲染引擎
/th
泰国(Thailand)
浏览器
/th
泰国(Thailand)
平台
/th
泰国(Thailand)
引擎版本
/th
泰国(Thailand)
CSS等级
/th
/tr
/thead
tbody
奇数级
（美）财政部（Treasury Department）
三叉戟
/td
（美）财政部（Treasury Department）
Internet Explorer 4.0
/td
（美）财政部（Treasury Department）
Win 95
/td
td class='center '
四
/td
td class='center '
X
/td
/tr
如果没有thead，将会报告一个错误。
Bpinate:是否分页，默认为true，分页。
IDisplayLength:每页的行数，默认为每页10行。
SPaginationType:分页样式，支持两个内置方法two_button和full_numbers。默认情况下，使用two_button。
BLengthChange:是否允许用户通过下拉列表选择分页后每页的行数。行数为10、25、50、100。此设置需要bPaginate支持。默认值为true。
BFilter:启用或禁用数据过滤，默认为真。注意，如果您使用了过滤功能，但是想要关闭默认的过滤输入框，那么您应该使用sDom。
BInfo:允许或禁止显示表格信息；默认值为true，表示显示信息。
最简单的使用方法是零配置。
/*
*初始化示例
*/
$(文档)。ready(function(){
$('#example ')。dataTable()；
});
以上是jQuery表格插件datatables用法的详细介绍，希望对大家的学习有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。