1、datatables 参数详解:
1. method: 'get', //请求方式(*)
2. toolbar: '#toolbar', //工具按钮用哪个容器
3. striped: true, //是否显示行间隔色
4. cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
5. pagination: true, //是否显示分页(*)
6. sortable: false, //是否启用排序
7. sortOrder: "asc", //排序方式
8. queryParams: oTableInit.queryParams,//传递参数(*)
9. sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
10. pageNumber:1, //初始化加载第一页,默认第一页
11. pageSize: 10, //每页的记录行数(*)
12. pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
13. search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
14. strictSearch: true,
15. showColumns: true, //是否显示所有的列
16. showRefresh: true, //是否显示刷新按钮
17. minimumCountColumns: 2, //最少允许的列数
18. clickToSelect: true, //是否启用点击选中行
19. height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
20. uniqueId: "ID", //每一行的唯一标识,一般为主键列
21. showToggle:true, //是否显示详细视图和列表视图的切换按钮
22. cardView: false, //是否显示详细视图
23. detailView: false, //是否显示父子表
2、Columns说明
虽然我们可以通过DOM直接获取DataTables元素的信息,但是DataTables提供了更方便的方法,可以自定义列的属性。下边就让我们一起来学习DataTables是怎么来定义列属性的。
- DataTables提供了两个参数来定义列属性:columns 和 columnDefs (源代码里:aoColumns 和 aoColumnDefs)
- 为了用户定义的参数更易于理解,DataTables提供的用户参数名和源代码的参数名是不一样的,不过这两个参数名,不管使用哪个,最终效果是一样的。(*以下参数说明都是用户使用参数名)
3、columns 和 columnDefs的区别:
- 相同点:达到相同的效果
- 不同点:作用不一样,使用不一样(需要一个目标属性在每个定义的对象(columnDefs.targetsDT))
- columns:设置特定列的初始化属性,可以定义数组设置多列,数组长度必须等于表格的数量,只想使用默认值可以设为“NULL”,数组每个元素只能设置单列的属性。
- columnDefs:与columns非常相似,该数组可以针对特定的列,多列或者所有列定义。数组可以任意长度。通过targets参数设置一个列或者多列,该属性定义可以如下:
- 0或正整数 - 从左边的列索引计数
- 负整数 - 列索引从右边计数
- 一个字符串 - 类名称将被匹配上的TH为列
- 字符串“_all” - 所有的列(即指定一个默认值)
- 两个参数可以同时使用,但是columns定义的优先级最高。
- 当columnDefs里对同一列有多个定义时,最开始的定义优先级最高。
4、参数详解:
用户参数名 | 源码参数名 | 英文解释 | 中文解释 |
cellType |
sCellType | Cell type to be created for a column | 设置列标签的类型(ex:th,td) |
className | sClass | Class to assign to each cell in the column | 设置列的class属性值 |
contentPadding | sContentPadding | Add padding to the text content used when calculating the optimal with for a table. | 设置填充内容,以计算与优化为一个表时所使用的文本内容,一般不需要设置 |
createdCell | fnCreatedCell | Cell created callback to allow DOM manipulation | 设置cell创建完后的回调函数,设置背景色或者添加行 |
data | mData | Set the data source for the column from the rows data object / array | 设置单元格里的值 |
defaultContent | sDefaultContent | Set default, static, content for a column | 设置列的默认值 |
name | sName | Set a descriptive name for a column | 设置列的描述性名称 |
orderable | bSortable | Enable or disable ordering on this column | 设置列是否可以排序 |
orderData | aDataSort | Define multiple column ordering as the default order for a column | 设置多列排序时列的默认顺序 |
orderDataType | sSortDataType | Live DOM sorting type assignment | |
orderSequence | asSorting | Order direction application sequence | 设置列的默认排序,可以改变列排序的顺序处理 |
render | mRender | Render (process) the data for use in the table | |
searchable | bSearchable | Enable or disable filtering on the data in this column | 设置列的数据是否过滤 |
title | sTitle | Set the column title | 设置列的标题 |
type | sType | Set the column type - used for filtering and sorting string processing. Four types (string, numeric, date and html (which will strip HTML tags before ordering)) are currently available. | 设置列的类型,用于过滤和排序的字符串处理。 |
visible | bVisible | Enable or disable the display of this column | 设置列是否显示 |
width | sWidth | Column width assignment | 定义列的宽度 |
- 参考资料:http://datatables.net/reference/option/