使用DataTables加载JSON文件实现分页表格展示的报错问题咨询

直接触发报错的原因 #

开启serverSide: true配置后，DataTables内部会固定从dataSrc回调的返回值中读取数组长度做分页计算，但你写的dataSrc回调没有任何return语句，默认返回undefined，执行undefined.length时就抛出了你看到的报错。
除此之外还有几个逻辑错误会导致哪怕不报错，分页、排序等DataTables功能也完全无法生效：

• 静态本地JSON根本不满足服务端分页的结构要求，错误开启serverSide配置会导致DataTables按服务端分页规则解析数据，直接和你的数据源结构不兼容
• 在dataSrc回调里手动操作DOM插入行的逻辑完全越权，DataTables会完全接管表格的渲染流程，手动插入的DOM不会被它的内部状态跟踪，分页、搜索、排序功能都会完全失效
• 表头只定义了2列，但你构造的行有3个单元格，哪怕渲染成功也会出现列错位

修正方案 #

因为你的数据源是本地静态JSON，没有动态分页接口，直接关闭serverSide走客户端分页逻辑即可，DataTables会自动处理分页、排序、搜索等全部功能，不需要手动操作DOM。

第一步：调整HTML表头，匹配实际列数 #

<table id="example1" class="table table-bordered">
<thead>
   <tr>
     <th>Key</th>
     <th>Value</th>
     <th>操作</th>
   </tr>
</thead>
<tbody></tbody>
</table>

第二步：修正初始化JS代码 #

var table;
$(function () {     
    table = $('#example1').DataTable({
        "processing": true,
        // 关闭服务端分页，适配本地静态JSON
        "serverSide": false,
        "ajax" : {
            "url" : "../apps/language/fr/fr.json",
            "dataSrc" : function (json) {
                // 把纯键值对JSON转换为DataTables可识别的行二维数组
                const formattedRows = [];
                $.each(json, function( rowKey, rowValue ) {
                    formattedRows.push([
                        rowKey,
                        rowValue,
                        "<a href='javascript:void(0);' class='btn btn-sm btn-primary waves-effect waves-light edit'>EDIT</a>"
                    ]);
                });
                // 必须返回格式化后的行数组，DataTables会自动完成渲染、分页等所有处理
                return formattedRows;
            }
        }
    });
});

注意：如果后续数据量达到十万级以上，确实需要开启服务端分页时，必须将接口返回结构改为DataTables要求的服务端分页标准格式（包含draw、recordsTotal、recordsFiltered、data四个核心字段），否则功能依旧会异常。

内容的提问来源于stack exchange，提问作者Vipul Jethva