php datatables,jQuery插件datatables的用法及如何实现分页代码详解

DataTables是一个jQuery的表格插件。

实例讲解

1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。

2、分析：添加功能---单击add按钮，弹出对话框，添加新的内容。

编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。

删除功能---单击datatables选中一行，单击delete按钮，弹出警告框，提示要不要删除所选内容。当没有选中任何内容时，单击delete按钮，不会弹出警告框，也不会删除内容。

3、 编码：

Attributes//名称

NameValueDisplayOrder

.....//datatables内容，此处省略

//添加按钮

//编辑按钮

//删除按钮

//声明dialog,异步更新

@using (Ajax.BeginForm("Update", "Product", new AjaxOptions

{

UpdateTargetId = "d_Attributes",

OnSuccess = "dialogClose",

HttpMethod = "Post",

}))

{

Name	*
Value	*
DisplayOrder	*

}

上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，

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 });

上面代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。

4、分页实现

引入CSS文件和JS文件

@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";

--------------------------------------------------------------------------

-----------最简单的方式：

$(document).ready(function() {

$("#example").dataTable();

});

----------也可以自己定义各属性：

$(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": 't',

"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": "末页"

}

} //多语言配置

});

});

对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示，

Rendering engine

Browser

Platform(s)

Engine version

CSS grade

Trident

Internet Explorer 4.0

Win 95+

4

X

如果没有 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();

});