datatables html定义,DataTables表格插件使用说明

你的名字 2022-10-19 12:57 286阅读 0赞

DataTables简介

与EasyUI的Datagrid作用一样，比easyui更漂亮

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

支持分页、排序、搜索

支持4种数据源

支持多种主题

拥有多种扩展

文件引入

至少引入如下3个文件

多种样式

Bootstrap 3

Foundation

Semantic UI

jQuery UI

Base

Bootstrap 4

导入的文件不同，具体请看官网示例：https://www.datatables.net

完整Table的HTML结构

item1item1item1

想使用DataTables表格插件，至少要写

标签，然后再通过js渲染

初始化与常用配置

默认初始化

$('\#example').DataTable();

配置初始化

$('\#example').DataTable(\{

"scrollY" : 350,

"ajax" : 'http://wt.com',

"serverSide" : true

\});

常用配置项

info //是否显示左下角信息

ordering //是否开启排序

paging //是否开启分页

searching //是否开启查询

serverSide

ajax

data

lengthMenu: \[ 10, 25, 50, 75, 100 \] //定义每页显示记录数

DataTables支持四种数据源

HTML(DOM)数据源——后台模板拼接

NamePositionOfficeAgeStart dateSalary

NamePositionOfficeAgeStart dateSalaryTiger NixonSystem ArchitectEdinburgh612011/04/25$320,800Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060

Javascript数据源(Array/Objects)——优先级比HTMLDOM高

有2种类型：

二维数组：

var dataSet = \[

\[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" \],

\[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" \]

\];

对象数组(必须配合columns配置项)：

var dataSet = \[

"name": "Tiger Nixon",

"position": "System Architect",

"salary": "$3,120",

"start\_date": "2011/04/25",

"office": "Edinburgh",

"extn": "5421"

\},

"name": "Garrett Winters",

"position": "Director",

"salary": "$5,300",

"start\_date": "2011/07/25",

"office": "Edinburgh",

"extn": "8422"

\];

$(document).ready(function() \{

$('\#example').DataTable( \{

data: dataSet,

columns: \[

\{ title: "Name" \},

\{ title: "Position" \},

\{ title: "Office" \},

\{ title: "Extn." \},

\{ title: "Start date" \},

\{ title: "Salary" \}

\} );

Ajax with client-side processing数据源

服务器返回的数据格式必须是：

"data": \[

"Howard Hatfield",

"Office Manager",

"San Francisco",

"7031",

"2008/12/16",

"$164,500"

\],

"Hope Fuentes",

"Secretary",

"San Francisco",

"6318",

"2010/02/12",

"$109,850"

或者

"data": \[

"name": "Tiger Nixon",

"position": "System Architect",

"salary": "$3,120",

"start\_date": "2011/04/25",

"office": "Edinburgh",

"extn": "5421"

\},

"name": "Garrett Winters",

"position": "Director",

"salary": "$5,300",

"start\_date": "2011/07/25",

"office": "Edinburgh",

"extn": "8422"

$(document).ready(function() \{

$('\#example').DataTable( \{

"ajax": '../ajax/data/arrays.txt'

\} );

或

$(document).ready(function() \{

$('\#example').DataTable( \{

"ajax": \{

"url": "data.json",

"data": \{

"user\_id": 451

\} );

Ajax with server-side processing数据源

服务器返回的数据格式：

"draw" : 1,

"recordsTotal" : 20,

"recordsFiltered" : 20,

"data" : \[

\[\],\[\]

自定义列

在DataTables表格初始化的时候进行初始化，使用columns或者columnDefs属性进行自定义列的信息

能自定义列的标题、显示内容、样式、别名、数据绑定、是否提供排序、是否提供搜索过滤、列宽、默认内容等等

示例

$('\#example').DataTable(\{

"ajax" : '\{:U("getList")\}',

"serverSide" : true,

"columns": \[

"searchable": false,

"name": "engine",

"title" : "wutao",

"orderable": false,

"className": "my\_class",

"render": function ( data, type, full, meta ) \{

return 'Download';

\},

null

\});

服务器模式的请求参数

当使用服务器模式"serverSide" : true时，浏览器会发出一个GET请求来获取数据源

请求的查询参数如下：

draw:1 //请求次数，用于响应是也要带回来

columns\[0\]\[data\]:0 //第一列绑定的数据源标识，二维数组就是数字，对象数组就是key

columns\[0\]\[name\]:engine //第一列别名

columns\[0\]\[searchable\]:false //不可搜索

columns\[0\]\[orderable\]:true //不可排序

columns\[0\]\[search\]\[value\]: //搜索的条件

columns\[0\]\[search\]\[regex\]:false //搜索是否使用正则

..... //有多少列就有多少个columns\[n\]

order\[0\]\[column\]:0 //指定排序的列

order\[0\]\[dir\]:asc //指定列的排序方式

start:0 //起始下标

length:10 //每页记录数

search\[value\]: //全局搜索条件

search\[regex\]:false //全局搜索是否使用正则

\_:1492657609627 //自带标示不用理会

国际化

在DataTables表格初始化时，使用language属性对表格中的文字信息进行灵活修改

示例：

$('\#example').dataTable( \{

"language": \{

"processing": "DataTables is currently busy",

"emptyTable": "No data available in table",

"info": "Showing page \_PAGE\_ of \_PAGES\_",

"lengthMenu": "每页显示 \_MENU\_ 条记录",

"search": "搜索:"

\} );

查询过滤(搜索)

列表项目

自定义表格控制元素

在DataTables表格控件初始化时，使用dom属性和initComplete回调函数来统一配置

应用场景：把自定义按钮集成到DataTables上面

$('\#example').dataTable( \{

"dom": "lftip"，

"initComplete": function()\{

$("\#customid").append("");

\} );

自定义表格DOM最好把栅格加进去

$('\#example').dataTable( \{

"dom": ">>",

"initComplete": function()\{

$("\#customid").append("");

\} );

drawCallback比initComplete优先执行

整合iCheck复选框

Html结构

//表头

JS部分

$('\#example').DataTable(\{

"ajax" : '\{:U("getList")\}',

"serverSide" : true,

"columns": \[

"render": function ( data, type, row, meta ) \{

return '';

\},

null

\],

"drawCallback": function()\{

checkbox\_init();

\});

//全选，全不选

function checkbox\_init()\{

$(".i-checks").iCheck(\{checkboxClass:"icheckbox\_square-green",radioClass:"iradio\_square-green",\})

$('\#checkAll').on('ifChecked', function(event)\{

$(this).off('ifUnchecked');

$('.item').iCheck('check');

$(this).on('ifUnchecked', function(event)\{

$('.item').iCheck('uncheck');

\})

\});

$('.item').on('ifUnchecked',function(event)\{

$('\#checkAll').off('ifUnchecked');

$('\#checkAll').iCheck('uncheck');

\}).on('ifChecked',function(event)\{

var state = true;

$('.item').each(function(i)\{

if(!$(this).is(':checked'))\{

state = false;

\});

if(state)\{

$('\#checkAll').iCheck('check');

\});

datatables html定义,DataTables表格插件使用说明

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 DataTables TreeGrid 插件

相关 datatables html定义,DataTables表格插件使用说明

相关 dataTables-说明

相关 DataTable(数据表格)使用技巧汇总

相关插件介绍: DataTables 表格分页

相关 JQuery.dataTables表格插件添加跳转到指定页

相关 dataTables-使用详细说明整理

相关 jQuery 插件：表格（datatables）

相关 Django使用DataTables插件总结

相关 Datatables添加序列列（Jquery插件）