DataTables

最新推荐文章于 2024-10-09 11:11:12 发布

ArvinWoo

最新推荐文章于 2024-10-09 11:11:12 发布

阅读量678

点赞数

分类专栏： datatables导出pdf乱码

datatables导出pdf乱码专栏收录该内容

1 篇文章

订阅专栏

DataTables官方网站

基本的使用：

1、DataTables的默认配置：

$(document).ready(function(){
     $('#example').dataTable();
});//初始化DataTables

示例：http://www.guoxk.com/html/DataTables/Zero-configuration.html

2、DataTables的一些基础配置属性：

"bPaginate":true;//翻页功能
"bLengthChange":true;//改变每页显示数据数量
"bFilter":true;//过滤功能
"bSort":true;//排序功能
"bInfo":true;//页脚信息
"bAutoWidth":true;//自动宽度

示例：http://www.guoxk.com/html/DataTables/Feature-enablement.html

3、数据排序

$(document).ready(function(){
    $("#example").dataTable({
        "aaSorting":[
            [4,"desc"]//从0行开始到第4行，使用倒序排序
        ]
    });
});

4、多列排序

示例：http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

5、隐藏某些列

$(document).ready(function() {
    $('#example').dataTable( {
    "aoColumnDefs": [
            { "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
        { "bVisible": false, "aTargets": [ 3 ] }
    ] } );
} );

示例：http://www.guoxk.com/html/DataTables/Hidden-columns.html

6、改变元素在页面上面显示的位置（顺序）

$(document).ready(function() {
    $('#example').dataTable( {
        "dom" : 'rt<"floatl mt5"l><"floatl mt5"i><"floatr mt5"p><"clear">'
    } );
} );
//l- 每页显示数量
//f - 过滤输入
//t - 表单Table
//i - 信息
//p - 翻页
//r - pRocessing
//< and > - div elements
//<"class" and > - div with a class
//Examples: <"wrapper"flipt>, <lf<t>ip>

示例：http://www.guoxk.com/html/DataTables/DOM-positioning.html

7、状态保存，使用了或者了每页显示数量之后，会保存在Cookie，下次访问时也显示上次关闭时设置的一样的状态

$(document).ready(function(){
    $("#example").dataTable({
        "bStatusSave":true
    });
});

示例：http://www.guoxk.com/html/DataTables/State-saving.html

8、显示数字翻页样式

$(document).ready(function(){
    $("#example").dataTable({
        "sPaginationType":"full_numbers"
    });
});

示例：http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9、水平宽度限制

$(document).ready(function() {
    $('#example').dataTable( {
        "sScrollX": "100%",
        "sScrollXInner": "110%",
        "bScrollCollapse": true
    } );
} );

示例：http://www.guoxk.com/html/DataTables/Horizontal.html

个人笔记：

columns.data是数据，columns.render是对数据的处理渲染之后的数据。可以是[函数，整数，字符串等]。对三种特殊值的处理[undefined，null，function（可以将返回值作为数据源）]

数组数据访问：
“access”: [
{ “id”: “1”, “name”: “Printer” },
{ “id”: “3”, “name”: “Desktop” },
{ “id”: “4”, “name”: “VMs” }
]

使用数组中的一个或多个属性使用[]符号 ‘,’这将连接分隔的名称
如：access[, ].name
得到：Printer, Desktop, VMs
只从数组中获取单个元素使用虚线符号.{index}
如：access.0.name
得到：Printer

类型

串：
‘.’点缀JavaScript对象符号：
如果字符串中包含‘.’可以使用\来转义它，
[]数组表示法：
使用name[,]将原数组中提供一个以逗号分隔的列表。将数据与两个括号之间提供的字符结合起来。否则返回原始数组源。
()功能符号：
整数：作为数据源数组索引处理。默认是逐列递增

function render(data,type,row,meta)该方法返回时用来请求的数据。

如果给出这个方法，只要调用该数据。此方法都会执行。

data(单元格的数据,基于columns.data)，
type(请求的类型调用数据，用于render正交数据支持)String类型的。
- filter:获取datatable应用于在此单元格进行过滤的值。
- display:在表格中显示的值。
- type:用于类型检测的值。通常匹配sort值。
- sort:获取在此单元格上进行排序的数据。
- undefined:获取单元格原始数据。
row(该行的完整数据源)
meta(包含有关请求的单元格附加信息对象)该对象包含一下属性：
- row:请求的单元格的行索引
- col:请求的单元格的列索引
- settings:DataTables.Settings有问题的表的对象。如果需要，这可以用来获得一个API实例。

columnDefs

所有列默认值为null（_all所有列的意思，[0,1]第一列和第二列）

lengthMenu

更改列表的长度。默认[10，25，50，100]

dom

定义表格控件元素，使其在页面上以什么顺序出现。
内置选项：
表格内置控制元素在DataTables是有如下：

"dom" : 'rt<"floatl mt5"l><"floatl mt5"i><"floatr mt5"p><"clear">'
//定义表格控件元素，使其在页面上以什么顺序出现。

l - 变长输入控制[一页展示多少数据]
f - 过滤输入[搜索栏过滤输入]
t - 这个表格
i - 表格信息摘要[共有多少页第多少页]
p - 分页控制[第几页选择]
r - 处理显示单元