开篇
之前有项目使用datatable进行页面表格绘制,减轻了整体开发的难度,因为项目需求并没有需要对datatable做过于深入的了解,所以,现在重新学习理解并记录,以便后续开发有参考,提高开发效率。
本文将通过实例演示记录表格绘制各个过程的方法,包括但不限于数据引入、绘制图表、样式调整、国际化设置、自定义功能方法等。本文将竟可能的将datatable的使用全面细致的体现出来,如前期有遗漏后续进行补充,有些过程可能会有许多方法,本文会全部列出,实际生产按照项目需求自由选择。
介绍
Datatables是一款jquery表格插件。
它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
中文网地址:http://www.datatables.club/
官网地址:https://datatables.net/
自带分页,即时搜索和排序
几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 ( MIT license )! 商业支持
安装引入
开始使用DataTables很简单,只需要引入两个文件, 一个css样式文件和DataTables本身的脚本文件。
在DataTables CDN上,可以使用下面这两个文件:
CSS:http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
JS:http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
同时也可以下载到本地进行引入
例:
在js中使用下方简单的几行代码,一个方法初始化table。
$(document).ready(function(){
$(’#myTable’).DataTable();
});
数据绘制
Datatable几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
1、使用DOM元素作为表格数据
例:
数据类型可以是对象:
var data = [
{
“id”: “001”,
“name”: “张三”,
“chinese”: “95”
“math”: “90”
“english”: “83”
},
{
“id”: “001”,
“name”: “张三”,
“chinese”: “95”
“math”: “90”
“english”: “83”
},
{
“id”: “001”,
“name”: “张三”,
“chinese”: “95”
“math”: “90”
“english”: “83”
}
];
$(’#myTable’).dataTable({
data: data,
columns: [
{ data: ‘id’},
{ data: ‘name’},
{ data: ‘chinese’},
{ data: ‘math’}
{ data: ‘english’}
]
});
数据为自定义实例:本质上通对象
function User(id, name, chinese,math,english) {
this.id = id;
this.name = name;
this.chinese= chinese;
this.math= math;
this.english= english;
};
$(’#myTable’).dataTable({
data: [
new User(“06001”, “张三”, “95”,“90”,“83”),
new User(“06002”, “李四”, “95”,“90”,"83),
new User(“06003”, “王五”, “95”,“90”,"83)
],
columns: [
{ data: ‘id’},
{ data: ‘name’},
{ data: ‘chinese’}
{ data: ‘math’}
{ data: ‘english’}
]
});
3、使用Ajax 请求数据作为表格数据
ajax作用在与可以获取服务器上数据文件,访问数据库数据,我们主要处理ajax返回的数据
如果返回数据为数组格式,则同js数组格式数据:
如果返回数据为对象格式,则同js对象格式数据:
$(’#myTable’).dataTable({
“ajax”: ‘data.txt’,
columns: [
{ data: ‘id’},
{ data: ‘name’},
{ data: ‘birthday’}
]
});
本文详细介绍Datatables这款jQuery表格插件的使用方法,涵盖数据引入、图表绘制、样式调整、国际化设置及自定义功能,适用于DOM、JavaScript、Ajax和服务器处理等多种数据源。

被折叠的 条评论
为什么被折叠?



