DataTable 选项说明
code { font-family: sans-serif; font-size: 18px; color: chocolate }
span { font-family: sans-serif; font-size: 18px; color: darkslategrey }
.show { border-style: dashed; border-width: 1px; border-color: darkolivegreen; padding: 1px 1px; padding-left: 1px; padding-right: 1px }
DataTable 选项说明
- 特性
jQueryUI
:true/false
:控制是否使用jqueryUI样式,需要引入jQueryUI的CSSautoWidth
:true/false
:控制Datatables是否自适应宽度,建议宽度可以确定的时候尽量自行确定,自适应宽度会导致表格加载速度变慢info
:true/false
:控制是否显示表格左下角的信息lengthChange
:true/false
:是否允许用户改变表格每页显示的记录数ordering
:true/false
:是否允许Datatables开启排序paging
:true/false
:是否开启本地分页processing
:true/false
:是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个)scrollX
:数值
:设置水平滚动scrollY
:数值
:设置垂直滚动scrollCollapse
:true/false
:是否开启垂直滚动条serverSide
:true/false
:是否开启服务器模式deferRender
:true/false
:d控制Datatables的延迟渲染,可以提高初始化的速度
- 数据
ajax
:异步数据
:增加或修改通过Ajax提交到服务端的请求数据如果当做一个对象
data
:本地数据
:用来显示表格的数据data的数据可以是二维数组,也可以是对象数组
- 二维数组
$(‘#example‘).dataTable( { "data": [ [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ], [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ], // ... ] } );
- 对象数组
$(‘#example‘).dataTable( { "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": "5300", "start_date": "2011/07/25", "office": "Edinburgh", "extn": "8422" }, // ... ], "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "extn" }, { "data": "start_date" }, { "data": "salary" } ] } );
- 二维数组
原文地址:https://www.cnblogs.com/rangger/p/9349884.html
时间: 2024-10-14 23:36:27