本文主要介绍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用法的详细介绍，希望对大家的学习有所帮助。