本文共三個部分：官網|基本使用|遇到的問題
一、官方網站：http://www.datatables.club/
二、基本使用：
1、dataTables的引入及初始化
<!--第一步：引入Javascript / CSS （CDN）--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<!--第三步：初始化Datatables-->
$(document).ready( function () {
$('#example').DataTable();
} );
2、dataTables的基礎屬性配置
"bPaginate": true, //翻頁功能
"bLengthChange": true, //改變每頁顯示數據數量
"bFilter": true, //過濾功能
"bSort": false, //排序功能
"bInfo": true,//頁腳信息
"bAutoWidth": true//自動寬度
3、關於排序的四個屬性區分
- bSort : 初始化的時候可以定義整個表格是否需要進行排序
$(document).ready( function () { $('#example').dataTable( { "bSort": false } ); } ); - aaSorting : 初始化的時候可以用來定義表格根據哪一列進行排序
$(document).ready( function() { $('#example').dataTable( {//先對第二列降序排列，在對第四列升序排列 "aaSorting": [[1,'desc'], [3,'asc']] } ); } ); - bSortable : 初始化的時候可以用來定義哪一列可以進行排序
$(document).ready( function() { $('#example').dataTable( { "aoColumns": [ { "bSortable": false }, null, null, null, null ] } ); } ); - asSorting : 可以用來設置某一行的排序規則
$(document).ready( function() { $('#example').dataTable( { "aoColumns": [ null, { "asSorting": [ "asc" ] }, { "asSorting": [ "desc", "asc", "asc" ] }, { "asSorting": [ "desc" ] }, null ] } ); } );
4、展示一個表格的基本配置
$('#myTable').dataTable({ "bJQueryUI": true,//是否使用jquery中的ui theme "bProcessing": true, //DataTables載入數據時，是否顯示‘進度’提示 "bServerSide": false, //是否啟動服務器端數據導入,也就是調用后台數據的時候 "bStateSave": true, //是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設定回復為初始化狀態 "sPaginationType": "full_numbers",//詳細分頁組，可以支持直接跳轉到某頁 "bScrollInfinite": false, //是否啟動初始化滾動條 "bScrollCollapse": false, //是否開啟DataTables的高度自適應，當數據條數不夠分頁數據條數的時候，插件高度是否隨數據條數而改變 "bPaginate": true, //翻頁功能 "aLengthMenu": [5, 10, 15], //更改顯示記錄數選項 "iDisplayLength": 9, //默認顯示的記錄數 "sScrollY": 300,//規定表格高度，出現滾動條 "sScrollX": "50%",////是否開啟水平滾動，以及指定滾動區域大小,可設值：'disabled','2000%' "bLengthChange": true, //改變每頁顯示數據數量 "bFilter": true, //過濾功能 "bSort": false, //排序功能，初始化的時候定義整個表格是否進行排序 "bInfo": true,//頁腳信息，即表格左下角顯示多少條數據的提示 "bAutoWidth": true,//自動寬度，false為禁止自動計算列寬 // 'aaSorting': [[2, 'asc']],//bSort失效 "aaData": [ { "Id": "001", "Name": "ta", "Salary": "320,800", "Date": "2012-10-10", "Office": "IJD", "Show": "X" }, { "Id": "002", "Name": "張三", "Salary": "450,800", "Date": "2012-3-19", "Office": "DPD", "Show": "X" }, { "Id": "003", "Name": "李四", "Salary": "120,800", "Date": "2013-3-21", "Office": "ICD", "Show": "C" }, { "Id": "004", "Name": "王五", "Salary": "50,800", "Date": "2011-11-11", "Office": "ISD", "Show": "X" }, { "Id": "005", "Name": "張張", "Salary": "780,800", "Date": "2013-2-22", "Office": "ADM", "Show": "X" }, { "Id": "006", "Name": "ni", "Salary": "320,800", "Date": "2012-10-10", "Office": "IJD", "Show": "X" }, { "Id": "007", "Name": "張三", "Salary": "450,800", "Date": "2012-3-19", "Office": "DPD", "Show": "X" }, { "Id": "008", "Name": "李四", "Salary": "120,800", "Date": "2013-3-21", "Office": "ICD", "Show": "C" }, { "Id": "009", "Name": "王五", "Salary": "50,800", "Date": "2011-11-11", "Office": "ISD", "Show": "X" }, { "Id": "010", "Name": "張張", "Salary": "780,800", "Date": "2013-2-22", "Office": "ADM", "Show": "X" }, { "Id": "011", "Name": "wo", "Salary": "320,800", "Date": "2012-10-10", "Office": "IJD", "Show": "X" }, { "Id": "012", "Name": "張三", "Salary": "450,800", "Date": "2012-3-19", "Office": "DPD", "Show": "X" }, { "Id": "013", "Name": "李四", "Salary": "120,800", "Date": "2013-3-21", "Office": "ICD", "Show": "C" }, { "Id": "014", "Name": "王五", "Salary": "50,800", "Date": "2011-11-11", "Office": "ISD", "Show": "X" }, { "Id": "015", "Name": "", "Salary": "780,800", "Date": "2013-2-22", "Office": "ADM", "Show": "X" } ], "aoColumns": [//sClass設置列的class屬性值，bSearchable設置列的數據是否過濾，bVisible設置列是否顯示，sTitle設置列的標題 { "data": "Id", 'sTitle': 'Id', 'sWidth': '100px', 'sClass': 'center', "bVisible": false, }, { "data": "Name", 'sTitle': '姓名', 'sWidth': '20%', 'sClass': 'center', "sDefaultContent": "", //此列默認值為""，以防數據中沒有此值，DataTables加載數據的時候報錯 }, { "data": "Salary", 'sTitle': '工資', 'sWidth': '20%', 'sClass': 'center' }, { "data": "Date", 'sTitle': '入職日期', 'sWidth': '20%', 'sClass': 'center' }, { "data": "Office", 'sTitle': '所屬部門', 'sWidth': '20%', 'sClass': 'center' }, { "data": "Show", 'sTitle': '是否顯示ID', 'sWidth': '20%', 'sClass': 'center', "bSearchable": false, "mRender": function (data, type, full) {//data表示該列的數據 // return '<input type="text" class="userName" value="' + full + '"/>'; if (data === 'X') { return '不顯示' } else { return '顯示' } } } ], "oLanguage": {//國際化配置 "sProcessing": "正在加載中......", "sLengthMenu": "每頁顯示 _MENU_ 條記錄", "sZeroRecords": "對不起，查詢不到相關數據！", "sEmptyTable": "表中無數據存在！", "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄", "sInfoFiltered": "數據表中共為 _MAX_ 條記錄", "sSearch": "搜索", "oPaginate": { "sFirst": "首頁", "sPrevious": "上一頁", "sNext": "下一頁", "sLast": "末頁" } } });
5、使用Ajax與后台交互數據時，將bServerSide屬性置為true，涉及屬性fnServerData
"sAjaxSource": "url",//接口路徑
"fnServerData": function (sUrl, aoData, fnCallback) {
$.ajax({
"url": sUrl,
"type": 'POST',
"dataType": 'json',
"contentType": "application/x-www-form-urlencoded; charset=utf-8",
"cache": false,
"data": aoData,
"success": (res) => {
//console.log(res.data.data)
fnCallback(res.data.data)
}
})
}
三、實例展示
1、引入文件
2、創建js文件
var iDisplayStart = 0; var iDisplayLength = 6; $('#tableList').dataTable({ "bJQueryUI": true,//是否使用jquery中的ui theme "bProcessing": true, //DataTables載入數據時，是否顯示‘進度’提示 "bServerSide": true, //是否啟動服務器端數據導入,也就是調用后台數據的時候 "bStateSave": false, //是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設定回復為初始化狀態 "sPaginationType": "full_numbers",//詳細分頁組，可以支持直接跳轉到某頁 "bScrollInfinite": false, //是否啟動初始化滾動條 "bScrollCollapse": false, //是否開啟DataTables的高度自適應，當數據條數不夠分頁數據條數的時候，插件高度是否隨數據條數而改變 "bPaginate": true, //翻頁功能 // "aLengthMenu": [5, 10, 15], //更改顯示記錄數選項 // "iDisplayLength": 9, //默認顯示的記錄數 // "sScrollY": 100,//規定表格高度，出現滾動條 // "sScrollX": "50%",////是否開啟水平滾動，以及指定滾動區域大小,可設值：'disabled','2000%' // "bLengthChange": true, //改變每頁顯示數據數量 "bFilter": false, //過濾功能 "bSort": false, //排序功能，初始化的時候定義整個表格是否進行排序 "bInfo": false,//頁腳信息，即表格左下角顯示多少條數據的提示 "bAutoWidth": true,//自動寬度，false為禁止自動計算列寬 // 'aaSorting': [[2, 'asc']],//bSort失效 "iDisplayStart": iDisplayStart, "iDisplayLength": iDisplayLength,//默認顯示的記錄數 // "aaData": [ // { // } // ], "columns": [//sClass設置列的class屬性值，bSearchable設置列的數據是否過濾，bVisible設置列是否顯示，sTitle設置列的標題 // {bVisible表示不再表格中顯示 // "data": "caseId", 'sTitle': '序號', 'sWidth': '8%', 'sClass': 'center', "bVisible": false, "bSortable": false, "bUseRendered": false // }, { "data": "caseId", 'sTitle': '序號', 'sWidth': '2%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false }, { "data": "caseName", 'sTitle': '案件名稱', 'sWidth': '20%', 'sClass': 'text-center', "sDefaultContent": "", "bSortable": false, "bUseRendered": false //此列默認值為""，以防數據中沒有此值，DataTables加載數據的時候報錯 }, { "data": "caseCode", 'sTitle': '序號', 'sWidth': '14%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false }, { "data": "caseCauseName", 'sTitle': '原因', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false }, { "data": "underTakerName", 'sTitle': '收押人', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false }, { "data": "managerName", 'sTitle': '管理人員', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false }, { "data": "registerDate", 'sTitle': '日期', 'sWidth': '8%', 'sClass': 'text-center', "bSortable": false, "bUseRendered": false }, {//自定義列 "mDataProp": "userType", 'sTitle': '登錄用戶角色', 'sWidth': '10%', 'sClass': 'text-center', // "fnRender": function (oObj) { // if (oObj.aData.userType == '1' || oObj.aData.userType == '3') { // return '用戶' // } else { // return '管理員' // } // }, "bSortable": false, "bUseRendered": false }, { "sDefaultContent": "", 'sTitle': '操作', 'sWidth': '7%', 'sClass': 'text-center', "render": function (data, type, full) { // 返回自定義內容 return "<span id='factorConfirm' style='display:inline-block;color:#01d1b8;text-decoration:underline;padding-bottom:3px;cursor:pointer'>跳轉按鈕</span>"; } } ], "fnRowCallback": function (nRow, aData, iDisplayIndex) {//格式化數據 //iDisplayIndex指當前行的序號 每行加載完成，將當前列進行替換 if (aData.userType == '1' || aData.userType == '3') { $('td:eq(7)', nRow).html('用戶'); } else { $('td:eq(7)', nRow).html('管理員'); } return nRow; }, "oLanguage": {//國際化配置 "sProcessing": "正在加載中......", "sLengthMenu": "每頁顯示 _MENU_ 條記錄", "sZeroRecords": "對不起，查詢不到相關數據！", "sEmptyTable": "表中無數據存在！", "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄", "sInfoFiltered": "數據表中共為 _MAX_ 條記錄", "sSearch": "搜索", "oPaginate": { "sFirst": "首頁", "sPrevious": "上一頁", "sNext": "下一頁", "sLast": "末頁" } }, "sAjaxSource": requestUrl,//接口路徑 "fnServerData": function (sUrl, aoData, fnCallback) { $.ajax({ "url": sUrl, "type": 'GET', "dataType": 'json', "dataSrc": '', "contentType": "application/x-www-form-urlencoded; charset=utf-8", "cache": false, "data": aoData, "sDom": "frtlip", "sPaginationType": "full_numbers", "success": (res) => { //處理返回的數據 fnCallback(handleData(res)); //處理返回的數據 // 點擊跳轉按鈕 $("#factorConfirm").on('click', function (e) { //獲取本行數據(對象） var currentData = $('#tableList').DataTable().row($(this).parents('tr')).data(); window.location.href = window.location.origin + '/html/ceshi.html?name=' + name + "&age=" + age }); }, "error": function (xhr, error, thrown) { top.showInfoWinError("發生異常:" + error); } }) } }); function handleData(json) { // 處理返回的數據 var obj = { code: 1 }; obj.iTotalDisplayRecords = obj.iTotalRecords = json.body.data.length; obj.aaData = json.body.data; return obj; }
四、遇到的問題
1、設置列屬性'sClass': 'text-center',每列的內容無法居中，樣式失效
- 解決方法：引入bootstrap的js、css
View Code
<!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
2、與后台交互的時候，設置了 iDisplayLength 屬性為6，屬性失效
- 解決方法：
設置翻頁屬性為true，否則不起作用 "bPaginate": true, //翻頁功能
3、當后台數據返回數值型1、2等數字，需要在表格內進行格式化內容
- 解決方法：
設置與columns屬性同級的fnRowCallback屬性進行列內容格式化 "fnRowCallback": function (nRow, aData, iDisplayIndex) {//格式化數據 //iDisplayIndex指當前行的序號 每行加載完成，將當前列進行替換 if (aData.userType == '1' || aData.userType == '3') { $('td:eq(7)', nRow).html('用戶'); } else { $('td:eq(7)', nRow).html('管理員'); } return nRow; }
4、需要在每行一列操作列、即后台沒有返回該屬性，我們需要自定義列
- 解決方法
{ "sDefaultContent": "",//不是data屬性 'sTitle': '操作', 'sWidth': '7%', 'sClass': 'text-center', "render": function (data, type, full) { // 返回自定義內容 return "<span id='factorConfirm' style='display:inline-block;color:#01d1b8;text-decoration:underline;
padding-bottom:3px;cursor:pointer'>要素確認</span>"; }
}
5、后台返回數據后，如何處理才能顯示到表格中
- 解決方法
function handleData(json) { // 處理返回的數據 var obj = { code: 1 }; obj.iTotalDisplayRecords = obj.iTotalRecords = json.body.data.length; obj.aaData = json.body.data; return obj; } //success成功后，調用函數 fnCallback(handleData(res))
6、原生JS中，通過url傳值，解析參數
- 解決方法
function parseURL(url) { var url = url.split("?")[1]; var para = url.split("&"); var len = para.length; var res = {}; var arr = []; for (var i = 0; i < len; i++) { arr = para[i].split("="); res[arr[0]] = arr[1]; } return res; }