jQuery DataTables 刷新數據：版本差異導致 ajax.reload() 失效的避坑指南

問題現象

項目使用 DataTables，調用 table.ajax.reload() 報錯「未定義 ajax」，fnDraw() 無反應。

根因：版本分水嶺

代碼診斷

提問者代碼混用了 1.9 風格：

• 初始化用 .DataTable() 但配置 sAjaxSource、fnServerData (1.9 參數)。
• 調用 oTable1.ajax.reload() (1.10 API)。
• 導致內部 ajax 屬性未正確初始化，調用報錯。

修正方案（二選一）

方案 A：升級為 1.10+ 風格（推薦）

let table = $('#sample-table-2').DataTable({
    ajax: {
        url: 'https://.../vehicleBaseInfo/searchByEnterprise',
        type: 'GET',
        data: function(d) { return $.extend({}, d, {enterpriseId: 1}); },
        dataSrc: 'data'
    },
    columns: [
        { data: 'VehicleID' },
        { data: 'PlateNumber' },
        // ...
    ],
    // 其他配置...
});

// 刷新
$('#acecom').on('click', () => table.ajax.reload());

方案 B：堅持 1.9 風格（維舊項目）

let oTable = $('#sample-table-2').dataTable({ // 小寫 d
    sAjaxSource: '...',
    fnServerData: (sSource, aoData, fnCallback) => {
        $.getJSON(sSource, aoData, fnCallback);
    },
    // ...
});

// 刷新
$('#acecom').on('click', () => oTable.fnDraw()); // 或 fnReloadAjax() 插件

核心提示

• 大寫 D DataTable() 返回 API 實例，小寫 d dataTable() 返回 jQuery 對象，二者方法完全不同。
• 查看引入的 JS 文件名確認版本：jquery.dataTables.min.js (1.9) vs datatables.min.js (1.10+)。
• 新項目強制使用 1.10+，享受 TypeScript 類型定義、ES6 模塊化、更豐富的 API。