目录
1、 datatables X轴滚动、scrollX设置水平滚动无效
3、cannot reinitialise datatable
5、datatables排序、datatables部分列排序
1、 datatables X轴滚动、scrollX设置水平滚动无效
1、dataTables开启水平滚动条
$('#example').dataTable( {
"scrollX": true,
"autoWidth":true
} );
2、发现不起作用
加上css样式 th, td { white-space: nowrap; },规定段落中的文本不进行换行,使文字内容在一行里。文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
<table id="mytable" class="table table-striped table-bordered" style="white-space: nowrap; ">
2、给datatables设置高度
3、设置表格的高度,
默认情况下表格的高度是随着内部条目数的变化而变化的(即所有数据都能显示出来),可以通过 scrollY 配置属性设置个固定高度,这样当表格内容超出显示范围时会自动出现滚动条。
{
'scrollY': "170px",
'scrollY': "calc(100vh - 100px)", //表格内容部分高度设置为窗口高度-100px
}
"scrollY": "calc(100vh - 350px)"
3、cannot reinitialise datatable
原因:datatables
不允许多次初始化某一表格
解决方法:
在初始化时设置destroy:true
。或者初始化时手工销毁
if (myDataTable) {
myDataTable.destroy();
}
4、datatables获取数据时,前台向后台传递参数
1、第一种方法: ajax.data可以直接赋值一个对象
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": {"user_id": 451}
}
} );
2、第二种办法:传入一个方法
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": function ( d ) {
d.extra_search = $('#extra').val();
}
}
} );
5、datatables排序、datatables部分列排序
1、整体禁止排序
$('#example').dataTable( {
"ordering": false
} );
2、部分列排序,在columns option中定义
$('#example').DataTable( {
"columns": [
{ "orderable": false },
null,
null,
null,
null
]
} );
'columns': [
{'data': 'name', 'orderable': false},
{'data': 'orgOrder', 'orderable': true},
{'data': 'lng', 'orderable': false},
{'data': 'lat', 'orderable': false},
{'data': 'mapLevel', 'orderable': false},
{'data': 'imgUrl', 'orderable': false}
]
3、在columnDefs option中定义
$('#example').DataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
4、通过order option来定义
$('#example').dataTable( {
"order": [[ 0, 'asc' ], [ 1, 'asc' ]]
} );
上述4种方法都可以
6、DataTable刷新
在做一些操作后,需要DataTables刷新数据,
myDataTable.ajax.reload(null, false);// 刷新表格数据,分页信息不会重置
functionajax.reload( callback, resetPaging ),
callback:当服务器返回数据并重绘完毕时执行此回调方法,回调方法返回的是服务器返回的数据。
resetPaging:重置(默认或者设置为true)或者保持分页信息(设置为false)