关于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>
最新文章
- 百度地图多点路径加载以及调整页面js
- 基础理解1:JSONP
- 第一次接触OOM
- C#-WinForm-布局-Anchor-锁定布局、Dock-填充布局、工具箱中的<容器>
- android 永不关闭toast
- Jenkins遇到问题三：调整jdk版本不生效的解决办法
- VS2012更改项目编译后文件输出目录
- mysqldump原理0
- SMO(Sequential Minimal Optimization) 伪代码（注释）
- linux_常用压缩，解压缩命令
- Fast data loading from files to R
- 改进的Bresenham算法
- 使用TensorFlow Object Detection API+Google ML Engine训练自己的手掌识别器
- 【链表问题】打卡9：将单链表的每K个节点之间逆序
- CSS---通向臃肿的道路（关于 “separation of concerns” (SoC)的原则）
- 如何快速安装visual studio 2017和破解
- Vue.js示例：树型视图； 模式组件；
- win10自动锁屏问题
- 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突
- 安装unity3d多个版本共存