datatable使用范例

最新推荐文章于 2021-08-06 07:55:40 发布

huwenhu2007

最新推荐文章于 2021-08-06 07:55:40 发布

阅读量7.4k

点赞数

分类专栏： jQuery 文章标签： jquery datatable

本文链接：https://blog.csdn.net/huwenhu2007/article/details/16800225

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、DataTable简介

          (1)构造函数
          DataTable()   不带参数初始化DataTable 类的新实例。
          DataTable(string tableName)  用指定的表名初始化DataTable 类的新实例。
          DataTable(string tableName, string tableNamespace) 用指定的表名和命名空间初始化DataTable类的新实例。
          (2) 常用属性
          CaseSensitive    指示表中的字符串比较是否区分大小写。
          ChildRelations   获取此DataTable 的子关系的集合。
          Columns             获取属于该表的列的集合。
          Constraints        获取由该表维护的约束的集合。
          DataSet               获取此表所属的DataSet。
          DefaultView       获取可能包括筛选视图或游标位置的表的自定义视图。
          HasErrors          获取一个值，该值指示该表所属的DataSet 的任何表的任何行中是否有错误。
          MinimumCapacity  获取或设置该表最初的起始大小。该表中行的最初起始大小。默认值为 50。
          Rows                  获取属于该表的行的集合。
          TableName       获取或设置DataTable 的名称。

          (3)常用方法
          AcceptChanges()   提交自上次调用AcceptChanges() 以来对该表进行的所有更改。
          BeginInit()         开始初始化在窗体上使用或由另一个组件使用的DataTable。初始化发生在运行时。

          Clear()               清除所有数据的DataTable。
          Clone()              克隆DataTable 的结构，包括所有DataTable 架构和约束。
          EndInit()            结束在窗体上使用或由另一个组件使用的DataTable 的初始化。初始化发生在运行时。
          ImportRow(DataRow row)    将DataRow 复制到DataTable 中，保留任何属性设置以及初始值和当前值。
          Merge(DataTable table)  将指定的DataTable 与当前的DataTable 合并。
          NewRow()         创建与该表具有相同架构的新DataRow。

二、分页参数：

bPaginate: 是否分页，默认为 true，分页

iDisplayStart：开始页数，默认为0

iDisplayLength : 每页的行数，每页默认数量:10

sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。

bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。

bFilter: 启用或禁止数据过滤，默认为 true。注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDom

bInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。

三、DataTable例子：

/**
* 创建服务器分页表格
*/
function createSplitPageTable(url){
if (typeof(oTable) == 'undefined') {
setSplitPageData(url)
}else{
oTable.fnClearTable();
oTable.fnDraw();
setSplitPageData(url)
}
}

/**
* 设置服务器分页参数
*/
function setSplitPageData(url){
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bLengthChange": false,
"bDestroy": true,
"bServerSide": true,
"sAjaxSource": url,
"fnServerData": retrieveData,
"oLanguage": { //汉化
"sSearch": "搜索：",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有检索到数据",
"sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
"sInfoEmtpy": "没有数据",
"sProcessing": "正在加载数据...",
"oPaginate":
{
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "尾页"
}
}
});
}

/**
* sSource 查询链接
* aoData 参数
* fnCallback 返回数据填充方法
*/
function retrieveData( sSource, aoData, fnCallback ) {
//aoData.push( { "name": "customerName", "value": "asdas" } );//添加自己的额外参数
for(var i = 0;i < aoData.length;i++){
var _aoData = aoData[i];
if(_aoData.name == "iDisplayStart"){

/*开始页数*/
_split_data.iDisplayStart = _aoData.value;
}else if(_aoData.name == "iDisplayLength"){

/*记录条数*/
_split_data.iDisplayLength = _aoData.value;
}else if(_aoData.name == "sEcho"){
_split_data.sEcho = _aoData.value;
}else if(_aoData.name == "iSortCol_0"){
_split_data.iSortColumn = column_sort[Number(_aoData.value)];
}else if(_aoData.name == "sSortDir_0"){
_split_data.sSort = _aoData.value;
}
}

/*点击操作不进行排序*/
if(_split_data.iSortColumn == "undefined"){
return false;
}

/*提交访问*/
$.ajax( {
type: "post",
url: sSource,
dataType: "json",
data: _split_data, // 以json格式传递
success: function(resp) {
fnCallback(resp);
}
});
}

返回的数据格式：（qsiSum：总记录数；s_list数据集合；tablepreserveForm.getSEcho() ：页面传递的sEcho）

String json = "{\"sEcho\":\"" + tablepreserveForm.getSEcho() + "\",\"iTotalRecords\":\"" + qsiSum + "\",\"iTotalDisplayRecords\":\"" + qsiSum + "\",\"aaData\":" + s_list + "}";