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

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

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 = [