jQuery表格插件datatables⽤法详解
⼀、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() {c语言输出格式符
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "每页显⽰ _MENU_ 条记录",
"sZeroRecords": "抱歉，没有到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "⾸页",
"sPrevious": "前⼀页",
"sNext": "后⼀页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./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 id="gridtable" class="gridtable">//声明jquery datatables
<thead>
<tr>
<th>Name
</th>
<th>Value
</th>
<th>DisplayOrderexcel js插件
</th>
</tr>
</thead>
<tbody>
.....//datatables内容，此处省略
</tbody>
</table>
<input type="button" id="add" value="Add" />//添加按钮
<input type="button" id="edit" value="Edit" />//编辑按钮
<input type="button" id="delete" value="Delete" />//删除按钮
<div id="e_Attributes">//声明dialog，异步更新
@using (Ajax.BeginForm("Update", "Product", new AjaxOptions
{
UpdateTargetId = "d_Attributes",
OnSuccess = "dialogClose",
HttpMethod = "Post",
}))
{
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input id="name" name="Name" type="text" class="required"/>*</td>
怎么写一些简单的代码
</tr>
<tr>
<td>Value</td>
<td>
<input id="value" name="Value" type="text" class="required"/>*</td>
</tr>
<tr>
<td>DisplayOrder</td>
<td>
<input id="displayOrder" name="DisplayOrder" type="text" class="required"/>*</td>
</tr>
<tr>
<td>
<input id="submit" type="submit" name="submit" value="Submit" />
<input id="hiddenValue" type="hidden" name="hiddenValue" />
</td>
</tr>
</tbody>
</table>
}
</div>
上⾯代码说明：这段代码主要分了两个部分，第⼀部分是jquery datatables的声明，<table id="gridtabl
e" class="gridtable">；第⼆部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax⽆刷新页⾯技术。所需js的代码：
<script type="text/javascript">
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');
jquery下载文件插件$(this).addClass('row_selected');
var aData = editor.fnGetData(this);
if (null != aData) {
putValue(aData);
}
semaphore什么意思
}
});
//双击
$("#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) {
facebook apk$("#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 });
</script>
上⾯代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。添加功能效果图
编辑功能效果图：
删除效果图：
到此，功能已经全部实现，所需的代码也已经贴出。
4、分页实现
引⼊CSS⽂件和JS⽂件
<style type="text/css" title="currentStyle">
@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";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script>
--------------------------------------------------------------------------
-----------最简单的⽅式：
$(document).ready(function() {
$("#example").dataTable();
});
----------也可以⾃⼰定义各属性：
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#example").dataTable({
//  "bPaginate": true, //开关，是否显⽰分页器
//  "bInfo": true, //开关，是否显⽰表格的⼀些信息
//  "bFilter": true, //开关，是否启⽤客户端过滤器
//  "sDom": "<>lfrtip<>",
//  "bAutoWith": false,
//  "bDeferRender": false,
/
/  "bJQueryUI": false, //开关，是否启⽤JQueryUI风格
//  "bLengthChange": true, //开关，是否显⽰每页⼤⼩的下拉框
//  "bProcessing": true,
//  "bScrollInfinite": false,
//  "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域⼤⼩，可设值：'disabled','2000px'
//  "bSort": true, //开关，是否启⽤各列具有按列排序的功能
//  "bSortClasses": true,
//  "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新⼀次页⾯，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列//  "sScrollX": "50%", //是否开启⽔平滚动，以及指定滚动区域⼤⼩，可设值：'disabled','2000%'
//  "aaSorting": [[0, "asc"]],
/
/  "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列
//  "sDom": '<"H"if>t<"F"if>',
"bAutoWidth": false, //⾃适应宽度
"aaSorting": [[1, "asc"]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显⽰ _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中⽆数据存在！",
"sInfo": "当前显⽰ _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "⾸页",
"sPrevious": "上⼀页",
"sNext": "下⼀页",
"sLast": "末页"
}
} //多语⾔配置
});
});
</script>
对于 dataTables 来说，表格必须通过 thead 和 tbody 进⾏说明，如下所⽰
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>
Rendering engine
</th>
<th>
Browser
</th>
<th>
Platform(s)
</th>
<th>
Engine version
</th>
<th>
CSS grade
</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>
Trident
</td>
<td>
Internet Explorer 4.0
</td>
<td>
Win 95+
</td>
<td class="center">
4
</td>
<td class="center">
X
</td>
</tr>
如果没有 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⽤法的详细介绍，希望对⼤家的学习有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。