[DataTables] 常見 jQuery DataTables 輸出錯誤與處理方式 (console errors)


前言

使用 jQuery DataTables 開發過程中,當有 Ajax 錯誤或 JSON 響應無效時,
會在瀏覽器控制台(console)中看到 JavaScript 錯誤,不過大多數的錯誤訊息總是讓人一頭霧水。

以下整理了最常見的 DataTables 執行錯誤的原因和可能的解決方案。
 

Console 常見錯誤訊息

 

Webgolds 錯誤訊息解析

#

TypeError: $(…).DataTable is not a function

原因

  • 先加載 DataTables 庫之後加載才加載 jQuery 庫
  • 加載了超過一個以上的 jQuery 庫

解決方法

先載入一個單一版本的 jQuery 庫(1.7版或以上),再接著載入 DataTables。

以下是正確順序:
<!-- webgolds 先載入 jQuery-->
<script type="text/javascript" src="themes/js/jquery-1.11.2.min.js"></script>
<!-- 再載入 datatable tai-wa.n -->
<script type="text/javascript" src="themes/js/plugin/datatable/datatables.min.js"></script>

#

TypeError: aData is undefined 未定義

原因

jQuery DataTables在響應 Ajax 請求時找不到資料。
通常都是 jQuery DataTables 接收到的 JSON 的格式不符合。

解決方法

使用默認格式或使用ajax.dataSrc選項來定義包含Ajax響應中的表數據的數據屬性(data默認情況下)。
可參閱資料陣列位置 (Data array location) https://datatables.net/manual/ajax#Data-array-location
 

TypeError: f is undefined  - f 未定義

解決方法

有關可能的原因和解決方案,請參閱以下錯誤:
TypeError: aData is undefined 未定義

#

TypeError: Cannot read property ‘length’ of undefined

解決方法

有關可能的原因和解決方案,請參閱以下錯誤:
TypeError: aData is undefined 未定義

# #

TypeError: headerCells[i] is undefined

TypeError: n[m] is undefined

原因

  • th 表頭或頁腳中的元素數不同於表主體中的列數,或是有使用 columns 選項定義欄位。
  • 在表格頭(table header)的 th 元素有使用到 colspan 屬性
  • columnDefs.targets 選項中指定的列索引不正確。

解決方法

  • 確保 th 表頭(header)或頁腳中(footer)的元素數與列選項中定義的列數相同。
  • 如果在表頭中使用 colspan 屬性,請確保 th 中每個列至少有兩個標題行和一個唯一元素。有關詳細信息,請參閱複雜標題(Complex header)
  • 如果使用 columnDefs.targets 選項,請確保基於零的列索引引用現有列。
 
#

TypeError: Cannot read property ‘style’ of undefined 

無法讀取未定義的樣式屬性

解決方法

有關可能的原因和解決方案,請參閱以下錯誤:

TypeError: headerCells[i] is undefined

 

TypeError: Cannot set property ‘nTf’ of undefined

無法設置未定義的 nTf 屬性

原因

表中 th 的頁腳元素數量與的標頭元素數量不同。

例如:
<!-- 錯誤的頁腳元素數量 -->
<table id="example" class="google webgolds">
   <thead>
      <tr>
         <th>1</th> <th>2</th> <th>3</th> <th>4</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>1</th> <th>2</th>
      </tr>
   </tfoot>
</table>

解決方法

確保 th 表頁腳中的 th 元素數量與表頭中的元素數量相匹配。

# #

TypeError: Cannot read property ‘mData’ of undefined

TypeError: col is undefined

無法讀取未定義的“mData”屬性

原因

缺少表頭(header)。
表 td 的數目在不同於標頭元素。

解決方法

確保你的表有一個標題。有關詳細信息,請參閱要求
確保 td 表頁腳中的th元素數量與表頭中的元素數量相匹配。




 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 378
Last updated :2017-11-10