jQuery Datatable外掛程式 表格基本初始化

jQuery Datatable外掛程式 表格基本初始化

本文介紹jQuery Datatable外掛程式的表格初始化的基本使用，Datatable是目前使用度比較高的前端表格介面外掛程式，可以很方便地建立響應式的表格，容易實現表格的翻頁、過濾、排序等功能。

jQuery Datatable外掛程式 表格基本初始化 引入檔案 html編碼 js編碼 提示資訊 表頭初始化 datatable表格初始化 注意事項及遇到的問題 遇到的問題 總結

引入檔案

<script type="text/javascript" src="./plugin/jquery/jquery-1.11.2.js"></script><script type="text/javascript" src="./script/jquery.dataTables-1.10.12.min.js"></script><script type="text/javascript" src="datatableController.js"></script>

以上指令檔依次為jQuery指令檔，dataTable指令檔和我們自己編碼的dataTable初始化指令碼。

<link href="./plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet" /><link href="./css/jquery.dataTables.min.css" rel="stylesheet"/><link href="./css/dataTables.bootstrap.min.css" rel="stylesheet"/>

以上為引入的樣式檔案，第一個為bootstrap架構樣式，其中第二和第三個可以二選一，分別為基於jQuery和Bootstrap的datatable樣式。

注意：使用基於jQuery的datatable樣式，需要在項目根目錄下建立檔案夾images，其中放入datatable外掛程式中的資源圖片（主要顯示排序表徵圖）

其中jQuery樣式大致為：

bootstrap樣式：
html編碼

由於本文介紹的編碼方式為在指令碼中對錶格進行初始化，表格的參數和資料均在指令碼中定義，html中只有一個div標籤用來定位。

<div class="col-md-10 col-md-offset-1" id="testTable_div"></div>

其中col-md-10 col-md-offset-1表示bootstrap布局，使用中型螢幕時占頁面10列（一共12列），offset表示左外邊距位移一列。 js編碼

表格的初始化代碼都在js指令碼中進行。 提示資訊

-首先，定義表格的提示資訊，可以做國際化，為了看起來方便這裡直接賦值：

var language = {        "processing": "<img src='loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"+"處理中..."+"</span>",        "lengthMenu": "每頁 _MENU_ 條結果",        "zeroRecords": "沒有匹配結果",        "info": "<span class='seperator'>  </span>" + "總共找到 _TOTAL_ 條結果",        "infoFiltered": " (從所有 _MAX_ 條記錄中得到)",        "infoEmpty": "共 0 項",        "emptyTable": "表中資料為空白",        "paginate": {            "previous": "前頁",            "next": "下頁",            "first": "第一頁  ",            "last": "  尾頁"        }    };

代碼解析： processing 為表格初始化過程中顯示的等待資訊，這裡引入了載入圓圈的動態圖並設定文本”處理中…“ lengthMenu 為可選擇的表格每頁顯示多少條結果,”_MENU_“對應選擇的下拉式功能表 zeroRecords 為表格搜尋過濾結果為空白的提示，emptyTable為表空的提示，均顯示在表格中 info、infoFiltered、infoEmpty均顯示在表格外，為表格式資料資訊 paginate 為表格翻頁選項，previous、next、first、last對應不同的導航標籤 表頭初始化

然後，是對表頭的初始化，其中表頭的欄位和參數對應之後填充到表格的資料和屬性：

var column=[            {"data": "id", name:"ID", "orderable":true},            {"data": "name", name:"Name" , "orderable":false },            {"data": "gender", name:"Gender" , "orderable":false },            {"data": "age", name:"Age" , "orderable":false },           ];var divId='testTable_div';var tableId='testTable';var tableEleStr = '<table class="table table-striped table-bordered table-hover" id='+tableId+'>'        + '<thead>'        +'<tr role="row" class="heading" >'        + '</tr>'        + '</thead>'        +'<tbody>'        +'</tbody>'        +'</table>';    $('#'+ divId).append(tableEleStr);    var trEle = $('#'+ tableId  + ' > thead >tr');    for ( var one in column){        var th = '<th>' + column[one].name + '</th>';        trEle.append(th);    }

代碼解析： 其中column中，data為表頭對應每一列的欄位，name為表頭顯示的名稱，orderable表示此列是否可排序 之後的代碼為使用選取器定位到html中的div標籤$(‘#’+ divId)，在其中添加表格子項目，並根據column初始化表頭 datatable表格初始化

以下為對jQuery外掛程式datatable的調用，初始化表格：

    var table = $("#" + tableId).DataTable({        "dom": '<"top"frt><"bottom"lip>',        "language": language,  //language        "paginate": true,  // page button        "searching": true,  // search bar        "autoWidth":true,  //automatically set the column width        "lengthChange": true,  // record number in each row        "displayLength": 5,  // row number in each page        "lengthMenu":[[5,10,20,-1],[5,10,20,"All"]],        "ordering":true ,  // sort        "info": true,  // Showing info        "scrollY": 300,        "scrollCollapse": true,        "pagingType": "full",  // page style        "processing": true,        "serverSide": false,        "destroy": true,        "ajaxSource": "json.txt",        "columns": column,        "columnDefs": [            {                defaultContent: '',                targets: [ '_all' ]            }        ],        /*"fnServerData": function (sSource, aoData, fnCallback, oSettings) {                                   oSettings.jqXHR = $.ajax({                "type": 'get',                "url": sSource,                "dataType": "JSON",                "success": function (resp) {                                                           oSettings.iDraw = oSettings.iDraw + 1;                    resp = resp.data || [];                    var data = {};                    data.aaData = resp;                    var totalCounts = resp.length;                    data.iTotalRecords = totalCounts;                    data.iTotalDisplayRecords = totalCounts;                    data.sEcho = oSettings;                    fnCallback(data);                },                "error": function(resp) {                    var data = {};                    data.aaData = [];                    var totalCounts = 0;                    data.iTotalRecords = totalCounts;                    data.iTotalDisplayRecords = totalCounts;                    data.sEcho = oSettings;                    fnCallback(data);                }            });        }*/    });

代碼解析： $(“#” + tableId).DataTable(); 為datatable初始化函數，選取器定位到表格調用 DataTable()函數中可設定不同的參數（不設定則使用預設值） dom 參數設定表格控制項的顯示，
l - length changing input control
f - filtering input
t - The table
i - Table information summary
p - pagination control
r - processing display element
這裡’<”top”frt><”bottom”lip>’表示，在表格上方顯示處理提示控制項和搜尋過濾控制項，表格下方顯示翻頁、資料結果資訊和選擇顯示資料個數控制項 language 即用之前定義的language變數賦值 paginate、searching、autoWidth、lengthChange、ordering、info、processing分別設定boolean表示是否實現翻頁、過濾、自動響應列寬度、每頁顯示資料個數選擇、排序、提示資訊和處理等待控制項 “displayLength”: 5 表示每頁顯示資料個數
“lengthMenu”:[[5,10,20,-1],[5,10,20,”All”]] 表示下拉控制項選擇的條目，”All“對應-1即全部顯示 “scrollY”: 300,
“scrollCollapse”: true, 兩個參數配合使用，表示給定表格固定的高度，在顯示資料超過該高度時添加捲軸 “pagingType”: “full” 表示翻頁控制項的格式，另外的格式為numbers、simple、simple_numbers、full_numbers

“serverSide”: false, 表示過濾等功能不在服務端處理，在用戶端處理（當表格中資料量特別大時，設定為true在服務端處理比較合適）
“destroy”: true, 表示初始化表格時，把選取器對應已有的表格替換掉

“ajaxSource”: “json.txt”, 為讀取表格式資料的ajax資料來源，這裡為文字檔
“columns”: column, 設定為之前定義的column變數
“columnDefs”: [
{

        defaultContent: '',        targets: [ '_all' ]    }],

columnDefs用來設定列的特定屬性，這裡表示當傳入資料為null或undefined時儲存格預設顯示空（避免提示錯誤警告），target為所有列

以上已經實現了表格的初始化，注釋的 fnServerData 為對服務端擷取資料的處理函數，不自訂的情況下有預設的實現，這裡主要在出現error時將表格置空而不是提示錯誤 注意事項及遇到的問題

以上對datatable使用的說明，特別是參數的意義可以參閱：
https://datatables.net/reference/index 遇到的問題

也遇到一些不容易查到的問題，給出自己的解決方案：

- 在 “ajaxSource”: “json.txt” 擷取文字檔，直接用瀏覽器開啟網頁，會出現xmlhttpRequestError，解決辦法為將項目和文字檔都放入tomcat服務端並啟動服務，通過服務端擷取資料，或者自己啟一個服務亦可
- json格式問題：ajaxSource會將json格式文本解析為json對象，文本要符合json格式這裡json.txt為
{"data":[{"id":"1","name":"A","gender":"male","age":"25"},{"id":"2","name":"B","gender":"male","age":"25"},{"id":"3","name":"C","gender":"male","age":"25"},{"id":"4","name":"D","gender":"male","age":"25"},{"id":"5","name":"E","gender":"male","age":"25"},{"id":"6","name":"F","gender":"male","age":"25"},{"id":"7","name":"G","gender":"male","age":"25"},{"id":"8","name":"H","gender":"male","age":"25"},{"id":"9","name":"I","gender":"male","age":"25"},{"id":"10","name":"J","gender":"male","age":"25"},{"id":"11","name":"K","gender":"male","age":"25"}]} 且json欄位需與columns選項定義的列”data“欄位對應（即表頭），才能正確填充資料到表格，當json無法匹配時會提示錯誤，設定columnDefs解決 總結

在使用datatable過程中發現，datatable實現方式比較簡單而且比較容易擴充，但也會遇到很多問題查閱API也無法解決，還有1.10版本之後很多參數和方法有了很大不同容易混淆。本文簡單介紹datatable表格基本初始化，之後再介紹更加實用的進階例子。