DataTable使用01-介绍与绘制

本文详细介绍Datatables这款jQuery表格插件的使用方法,涵盖数据引入、图表绘制、样式调整、国际化设置及自定义功能,适用于DOM、JavaScript、Ajax和服务器处理等多种数据源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开篇
之前有项目使用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
同时也可以下载到本地进行引入
例:

注意:datatable作为jQuery的插件,引入前需要先引入jQuery才能生效。

在js中使用下方简单的几行代码,一个方法初始化table。
$(document).ready(function(){
$(’#myTable’).DataTable();
});

数据绘制
Datatable几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
1、使用DOM元素作为表格数据
例:

dom数据绘制table

数据类型可以是对象:
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’}
]
});

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值