博主是一個java后端程序員,前端技術會用但不精通,做后台的一些功能經常要涉及表格的展示,分頁,搜索,排序等等一系列功能,在經歷了一段時間的原始手段,開始接觸並使用Datatables,一個jquery表格插件,上手很快,重點是超級好用,有完善的中文文檔,今天有空,整理一下Datatable的一些使用方法及注意事項,以便隨時查閱.
DataTables支持的功能:
1.分頁,只需要返回符合規范的數據類型,Datatable能幫我們實現好用的分頁,同時支持排序,和即時搜索.
2.豐富的數據源的支持
3,支持國際化,支持多種主題.
快速使用
1.使用Datatables非常簡單,只需要引入一個css樣式文件和一個js腳本文件,即可,官網提供了文件的cdn地址可直接引用.
CSS: //cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
JS: //cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
2.js中,使用一下簡單的幾行代碼,就能初始化datatables風格的表格樣式,並使用Datatable提供的豐富功能.
1 $(document).ready(function(){ 2 $('#myTable').DataTable(); 3 });
html頁面中的table標簽定義一個id,比如id="myTable".
豐富配置項
以上就可以實現基本風格的datatables樣式,datatables默認情況下已啟用一些功能,比如搜索,排序,分頁,要想更加自由的控制樣式,我們需要更詳細的配置.
DOM定位
dom定位可以實現你自由的布局 分頁,搜索框等等這些組件,以下是一些組件以及字符縮寫.
- l - Length changing 每頁顯示多少條數據選項
- f - Filtering input 搜索框
- t - The Table 表格
- i - Information 表格信息
- p - Pagination 分頁按鈕
- r - pRocessing 加載等待顯示信息
如果我們使用下面的代碼來控制樣式,表示 i顯示在top(頂部),flp顯示在bottom(底部).這樣就可以自定義組件位置了.
$('#example').dataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
} );
國際化配置
datatables使用的語言選項可以通過language來配置,語言配置作為初始化配置的一部分,可以通過一下配置來自定義頁面各個地方的顯示文本.
$('#example').DataTable({
language: {
"sProcessing": "處理中...",
"sLengthMenu": "顯示 _MENU_ 項結果",
"sZeroRecords": "沒有匹配結果",
"sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
"sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
"sInfoFiltered": "(由 _MAX_ 項結果過濾)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中數據為空",
"sLoadingRecords": "載入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上頁",
"sNext": "下頁",
"sLast": "末頁"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
限制水平寬度/垂直高度
如果需要在一個定寬或者定高的table里展示數據,為了能夠展示所有的數據,就要限制寬度,或高度,使用垂直或水平滾動條,在Datatable中使用如下配置:
$(document).ready(function() { $('#example').dataTable( { //開啟水平滾動條 "scrollX": true //設置固定高度為200px 數據量溢出時出現滾動條 "scrollY": "200px", "scrollCollapse": "true", //不啟用分頁(展示所有) "paging": "false" } ); } );
其他配置功能:
$(document).ready(function() { $('#example').dataTable( { //禁用分頁 "paging": false, //禁用排序 "ordering": false, //禁用本地搜索 "searching":false, //開啟選擇每頁顯示多少記錄的下拉框 如果pageing配置為false,此配置會自動置為false "lengthChange":true, //是否顯示正在處理的狀態。開啟后在數據加載過程中,會有正在加載狀態 "processing": "true" //是否顯示正在處理的狀態。開啟后在數據加載過程中,會有正在加載狀態,在處理耗時數據時比較有用 "processing": "true" //開啟延遲渲染,假設加載1000條數到表格.每頁顯示10條,開啟后datatables只會創建10個節點,即根據分頁的生命周期來創建行 "deferRender": true //禁用自動列寬的計算,如果以自定義列寬,建議禁用,因為此操作會耗費一些額外時間計算列寬 "autoWidth": false, //禁用狀態保存 開啟后再次加載頁面表格狀態會被設成之前的狀態 "stateSave" : false, } ); } );
數據源
這里主要講解ajax獲取對象數據
$(document).ready(function() { $('#example').DataTable( { //ajax可以接收string,object,fucntion "ajax": { //type url 不需多說 "type": "POST", "url":$('#game_detail_data').attr("data-url"), //從服務器獲得json數據,使用dataSrc屬性把data改為aodata "dataSrc": "aoData", //請求參數,添加額外的參數發送到服務器 接受一個fucntion "data":function(d){ d.pageType='DETAIL'; d.channelName=$("#channelname").val().trim(); d.tag=$("#tag").val(); d.startTime=$("#startTime").val(); d.endTime=$("#endTime").val(); } }, //返回數據是對象列表的時候需要使用如下方式與列名一一對應好 "columns": [ { "data": "name" }, { "data": "age" }, { "data": "sex", //渲染數據顯示在表格中,render可以讓你在table顯示非常多樣化的格式 "render" : function(data, type, full, meta) { if(data=='boy'){ data ="男"; }else{ data ="女"; } return data; }}, }, { "data": "phone" }, { "data": "address" }, { "data": "salary" } ] } ); } );
回調函數
datatable支持在數據初始化的各個時機進行一些自定義操作,下面說兩個比較常用的:
$('#example').dataTable( {
//數據初始化表格繪制成功后調用此函數
"initComplete": function() {
alert( '初始化以后調用' );
}
//每次表格重繪的時候都調用這個函數
"drawCallback": function( settings ) {
alert( '每次表格重繪時調用' );
}
} );
參考文檔