求助：使用jQuery DataTable时排序或搜索后数据丢失

嘿，我完全懂你现在的困扰——手动通过AJAX拉数据再塞到表格里，确实会让DataTables“不认”这些行，所以一排序或者搜索，数据就好像凭空消失了。其实是因为你手动添加的DOM元素不在DataTables的内部数据管理体系里，咱们换个正确的方式来配置就搞定啦！

问题根源 #

你之前的做法是自己发AJAX请求拿到数据，然后动态把行append到表格里。这种方式下，DataTables根本不知道这些新行的存在，它的排序、搜索功能只会基于初始化时的数据集来工作，自然找不到你后来加的内容，看起来就像数据丢了。

正确的实现步骤 #

1. 先准备好HTML表格结构 #

确保表格有<thead>和<tbody>，DataTables需要这个结构来绑定列和填充数据：

<table id="institutionTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID PT</th>
            <th>Nama</th>
            <th>SK Path</th>
            <th>Email PJ</th>
            <th>Status Validasi</th>
        </tr>
    </thead>
    <tbody>
        <!-- DataTables会自动填充这里，不用手动加内容 -->
    </tbody>
</table>

2. 用DataTables自带的AJAX配置初始化表格 #

直接让DataTables自己去请求你的Laravel接口，这样它会自动把返回的数据纳入管理，排序、搜索功能就能正常工作了：

$(document).ready(function() {
    $('#institutionTable').DataTable({
        // 配置AJAX请求
        ajax: {
            url: '/api/institutions', // 替换成你的Laravel接口实际地址
            dataSrc: '' // 重点！因为你的接口返回的是直接的数组，不是嵌套在data字段里，所以设为空字符串
        },
        // 绑定表格列和返回的JSON字段
        columns: [
            { data: 'kode_pt' },
            { data: 'nama' },
            { data: 'SK_path' },
            { data: 'email_PJ' },
            { data: 'validasi' }
        ],
        // 可选的常用配置，按需开启
        paging: true,
        searching: true,
        ordering: true,
        responsive: true
    });
});

3. Laravel后端接口注意事项 #

确保你的接口返回的是正确的JSON格式（你现在的格式已经没问题了），并且响应头是application/json。如果以后数据量变大，需要服务器端处理分页、排序、搜索，可以用yajra/laravel-datatables这个包，它能完美适配DataTables的服务器端请求格式，省很多事。

这样配置完之后，你再试试排序或者搜索，数据就不会消失啦！

内容的提问来源于stack exchange，提问作者Adis Azhar