jquery.dataTable用法
来源:互联网 发布:货到付款的淘宝有哪个 编辑:程序博客网 时间:2024/06/04 18:58
DataTables是一个基于jquery的表格插件,有强大的分页,排序,动态修改表格等功能。它的所有配置和方法都能在其官网https://www.datatables.net上找到,这里挑选一些常用的功能讲解。
1.初始化配置
笔者约一年前在用datatable的时候,官方文档上的构造器还是dataTable()
,现在则全部变成了DataTable()
。需要注意两者的细微差别,使用dataTable()配置时所有属性需要加上引号,使用DataTable()
则可加可不加。比如初始化时禁用分页和搜索功能,需要这么写:
var table=$('#table').dataTable({ "paging":false, "searching":false});//orvar table=$('#table').DataTable({ paging:false, searching:false});//orvar table=$('#table').DataTable({ "paging":false, "searching":false});
两者的区别是,$(selector).dataTable()
返回的是一个jQuery对象,而$(selector).DataTable()
返回的是这个对象的api实例,即DataTable()
等价于dataTable().api()
,有了这个api实例,我们就可以使用jquery.dataTable自带的方法了。
2.ajax请求数据
在知道ajax.reload()
方法之前,笔者都是clear()方法删除全部列,再用addRow()方法一行行添加,比较麻烦。官网上特地给出了一个ajax专题讲解dataTable用ajax获取数据。在我看来,注意以下基本够用了:一个是服务端返回的数据必须按照{data:[[],[],[]]}的格式,即一个键为data,值为二维数组的对象,这个二维数组的行数即为表格的行数,列数必须与表格的列数相等;还有一个如果要对返回的数据经过处理再显示到表格中(比如状态值为0则某一列显示成红色,为1则绿色)则需要用fnCreatedRow(nRow,aData,iDataIndex)
进行配置。其中,aData为一个数组,表示某一行的数据,iDataIndex为某一个数据在该aData数组中的下标,$(nRow)可以选中这一行。下面举个例子:
// 每秒请求一次数据,如果返回第6列数据为1,则该行第8列显示“完成”;如果为1,则删除该行 var table=$('#staff_table').DataTable( { "ajax": { "url":'http://'+ipaddr+'/return_data', "type": "GET" }, "fnCreatedRow": function (nRow, aData, iDataIndex) { if (aData[5] == "1") { $('td:eq(8)', nRow).html('<a style="color:darkgreen;">完成</a>'); } if (aData[5] == "0") { table.rows($(nRow)).remove(); } } } );requestData();function requestData(){ table.ajax.reload(null,false);//no callback,no re-set or re-filter setTimeout(requestData,1000);}
3.api
table.order([0,'desc'],[2,'asc'])
排序。支持多重排序。table.addRow()
添加一行,传入参数为一个数组。table.rows($(selector)).remove()
删除选中的某行或多行,配合addRow(),可以让表格呈现滚动显示动态数据的效果。table.clear()
清除所有表格数据。table.draw()
draw()方法可以重新渲染表格,一般来说使用了order(),addRow()方法后要draw()一些来让结果显示在浏览器上,不过要慎用。笔者曾在fnCreatedRow中用到draw()方法,当请求数据有几百行时,浏览器要好几秒才能渲染好表格。
- jquery.dataTable用法
- jQuery datatable 插件用法
- Jquery datatable
- JQuery.DataTable
- jquery.datatable
- jquery datatable
- jquery datatable
- jquery datatable
- JQuery datatable
- jquery dataTable
- jquery datatable
- jquery datatable
- Jquery Datatable
- jquery DataTable
- (jQuery Datatable)jQuery Datatable
- DataTable 用法
- datatable用法
- 【转】jquery datatable学习
- redis学习记录03-redis订阅与发布
- 将网页嵌入到android应用中
- awk详解
- NodeJS笔记
- HTML标签 英文全称 中文释义
- jquery.dataTable用法
- Codeforces Round #394 (Div. 2)
- 算法导论(build the heap recursively 递归建堆)
- 普世价值
- 配置maven报错
- 汇编翻转总结及答复(第8周)
- C# List Sort 排序
- ElasticSearch速学
- 团体程序设计天梯赛L2-024部落