datatables是一个jquery的表格插件。
实例讲解
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>displayorder
</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" />//删除按钮
<p 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" style="width:250px" class="required"/>*</td>
</tr>
<tr>
<td>value</td>
<td>
<input id="value" name="value" type="text" style="width:250px" class="required"/>*</td>
</tr>
<tr>
<td>displayorder</td>
<td>
<input id="displayorder" name="displayorder" type="text" style="width:128px" 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>
}
</p>
上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，<table id="gridtable" 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');
$(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 });
</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的用法及如何实现分页代码详解的详细内容。