###Datatables表格插件
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
- 分页,即时搜索和排序
- 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
- 支持不同主题 DataTables,jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
###需要引入的文件
css文件:http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
js文件:http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
###代码实例
<table id="table" class="table table-border table-bordered table-bg table-hover table-sort">
</table>
//初始化table
$(document).ready(function() {
//请求获取数据
$.post('{:U('Admin/Count/countxiao')}',{},function(data){
var kuhulist=new Array();
for(var i=0;i<data.length;i++){
var a=new Array();
//alert(data[i]['jian_name']);
a[0]=data[i]['user_id'];
a[1]=data[i]['user_name'];
a[2]=data[i]['lou_name'];
a[3]=data[i]['junjia'];
a[4]=data[i]['gen_class_name'];
a[5]=data[i]['fan_money'];
a[6]=data[i]['is_put']==0?"否":"是";
a[7]=data[i]['opera_time'];
kuhulist[i]=a;
}
//table1 =;范围范围,地区,楼盘,推荐人,经纪人,跟进项目,项目金额,跟进状态,是否返佣,佣金
$('#table').DataTable( {
"data": kuhulist,
"columns": [
{ "title": "编号" },
{ "title": "推荐人"},
{ "title": "推荐项目"},
{ "title": "项目金额" },
{ "title": "跟进状态" },
{ "title": "佣金金额" },
{ "title": "是否返佣" },
{ "title": "推荐时间"}
]
} );
});
} );
//按条件搜索后重新加载table
var dttable = $('#table').dataTable();
dttable.fnClearTable(); //clear table
dttable.fnDestroy(); //destroy datatables