报表系统练手(2) -- DataTables的使用（1）

一、基本介绍

本项目使用的 datatables是 基于jQuery 的表格插件。

1.1. 不同主题

有不同的页面主题风格：Base,bootstrap 3,jquery UI, Foundation, Semantic UI.

不管选择哪种主题

jQuery.datatables.js 这个文件是不可缺少的。

当前应用中选择 Bootstrap 3主题。

官网： https://datatables.net/

1.2. 表格的细节设置

关于表格展现风格参考

https://datatables.net/examples/styling/index.html

1.2.1 最基本样式：

1.2.2 全部设置

基本表格呈现方式可设置以下几种

cell borders | compact | hover | order-column | row borders | stripe

Bootstrap 中对表格的样式设置有：

table-border ：cell 边框

table-striped：奇偶row显示不同颜色

table-hover ： 鼠标移入row,本行有hover效果

table-condensed：去掉row的padding

table-responsive

参数的具体含义参考：

http://getbootstrap.com/css/#tables

效果：

二、外部资源

2.1 js：

jquery --

http://cdn.bootcss.com/jquery/3.2.1/jquery.js

jquery.dataTables --

http://cdn.bootcss.com/datatables/1.10.13/js/jquery.dataTables.js

dataTables.bootstrap --

http://cdn.bootcss.com/datatables/1.10.13/js/dataTables.bootstrap.js

2.2 css:

bootstrap --

http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css

dataTables.bootstrap --

http://cdn.bootcss.com/datatables/1.10.13/css/dataTables.bootstrap.css

三、使用

3.1 html 必要条件

3.1.1 table 必须有 'table' 的class

3.1.2 必须有thead 子标签

3.2 JavaScript 调用

四、数据来源

datatables设置显示的数据 有三种方式

4.1 DOM方式

直接在 html 中写数据

4.2 JavaScript 资源

两种数据模型， 上篇文章也做了介绍

使用时将数据传给datatables。

例如：

4.3 AJAX资源

此处暂时不做介绍

五、表格参数设置

processing : false,//是否显示加载中提示

autoWidth : false,//是否自动计算表格各列宽度

paginate: false,// 是否显示分页信息

info : false,//是否显示页数信息

searching : false,//是否显示搜索框

sort : false,//是否允许排序

stateSave : false,//页面重载后保持当前页

lengthChange : false,//是否显示每页大小的下拉框

scrollX : "disabled",//水平滚动

分别管理各自的功能