关于DataTables一些小结
最近项目中使用了DataTables,故小结了一下。
导入CSS文件
<link rel="stylesheet" href="<%=base %>/js/datatable/css/jquery.dataTables.min.css"/>
导入JS文件
<script type="text/javascript" src="<%=base %>/js/datatable/js/jquery.js"></script>
<script type="text/javascript" src="<%=base %>/js/datatable/js/jquery.dataTables.min.js"></script>
后台ajax请求:
var url = "getSj.do";
var dataTable;
var options = {
"bPaginate" : false,
"bJQueryUI" : true,
"processing" : true,
"serverSide" : true,
"bDestroy" : true,
"bAutoWidth" : true,
"sAjaxSource" : url,
"columns" : [ {
"title":'名称',
"data" : "MC",
"width" : "30%"
}, {
"title":'2010年',
"data" : "20100000"
}, {
"title":'2009年',
"data" : "20090000"
}, {
"title":'2008年',
"data" : "20080000"
}, {
"title":'2007年',
"data" : "20070000"
} ],
"oLanguage" : {
"sProcessing" : "正在加载中...",
"sLengthMenu" : "每页显示_MENU_条记录",
"sZeroRecords" : "对不起,查询不到相关数据!",
"sEmptyTable" : "表中无数据存在",
"sInfo" : "当前显示_START_ ~ _END_条,共_TOTAL_条记录",
"sInfoEmpty" : "当前显示0 ~ 0条,共0条记录",
"sInfoFiltered" : "数据表中共为_MAX_条记录",
"sSearch" : "搜索",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
}
}
};
dataTable = $('#example').dataTable(options);
$('#example tbody').on('click','tr',function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
dataTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
或者是Ajax请求之后将数据赋给DataTables
var dataTablesOptions = {
"bPaginate" : false,
"bJQueryUI" : true,
"bFilter":false,
"bDestroy" : true,
"bAutoWidth" : true,
"bSortClasses":false,
"aoColumns" : [],
"aaData":[],
"oLanguage" : {
"sProcessing" : "正在加载中...",
"sLengthMenu" : "每页显示_MENU_条记录",
"sZeroRecords" : "对不起,查询不到相关数据!",
"sEmptyTable" : "表中无数据存在",
"sInfo" : "当前显示_START_ ~ _END_条,共_TOTAL_条记录",
"sInfoEmpty" : "当前显示0 ~ 0条,共0条记录",
"sInfoFiltered" : "数据表中共为_MAX_条记录",
"sSearch" : "搜索",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
}
}
};
var bgqs = "2012年@20120000,2011年@20110000,2010年@20100000,2009年@20090000";
var bgqArr = bggs.split(',');
var bgqMcArr = [];
dataTablesOptions.aoColumns.push({
'data':'id',
'title':'编号',
"bVisible":false
});
dataTablesOptions.aoColumns.push({
'data':'Mc',
'title':'名称'
});
for(var i = 0,len = bgqArr.length;i < len;i ++){
var bgqItemArr = bgqArr[i].split('@');
bgqMcArr.push(bgqItemArr[1]);
dataTablesOptions.aoColumns.push({
'data':bgqItemArr[0],
'title':bgqItemArr[1]
});
}
$.ajax({
url:'<%=base%>/getSj.do',
type:'post',
dataType:'json',
success:function(ret){
dataTablesOptions.aaData = ret;
dataTable = $('#indicateTableId').dataTable(dataTablesOptions);
}
});
<table id="example" class="display" cellspacing="0" width="100%">
</table>