Datatable技术问题求助：函数无法向Datatable传递数据，点击列排序时数据消失

你的核心问题是没有用DataTables官方的API来加载数据，而是手动通过jQuery的append()往表格里塞内容。DataTables根本没“认”到这些手动添加的行，所以当你触发排序（或者分页、搜索这类操作）时，DataTables会重新初始化表格，把你手动加的内容清空，导致表格变空白。另外你的Controller返回的是序列化后的JSON字符串，前端还要额外解析，这也增加了不必要的步骤。

我们分三部分修改代码：

1. 修正Controller代码 #

不要自己手动序列化JSON，直接让ASP.NET的Json()方法帮你处理，这样返回的是标准的JSON对象，前端不用再parseJSON：

public ActionResult Liste() {
    SqlConnection baglanti = system.baglan();
    SqlDataAdapter cmd = new SqlDataAdapter("select * from stok s left join StokGrup sg on s.UrunGrup=sg.GrupKodu order by s.UrunGrup", baglanti);
    DataTable dataTable = new DataTable(); // 补上你遗漏的DataTable初始化
    cmd.Fill(dataTable, "liste");
    // 直接返回DataTable，Json方法自动序列化，允许POST请求
    return Json(dataTable.Tables["liste"], JsonRequestBehavior.AllowGet);
}

注意：如果是ASP.NET Core项目，不需要JsonRequestBehavior.AllowGet，直接写Json(dataTable.Tables["liste"])即可。

2. 修正前端Script代码 #

推荐用DataTables的内置ajax配置来加载数据，这是最标准的用法，能让DataTables完全掌控数据，保证排序、分页等功能正常：

$(document).ready(function () { 
    $('#stokDataTable').DataTable({
        ajax: {
            url: '../DataTable/Liste',
            type: 'POST',
            dataSrc: '' // 因为接口返回的是数组格式JSON，所以设为空字符串
        },
        columns: [
            { data: 'Barcode' },
            { data: 'UrunAd' },
            { data: 'UrunFiyat' },
            { data: 'UrunAdet' },
            { data: 'GrupIsmi' }
        ]
    });
});

为什么这样改？ #

• 把数据加载的工作完全交给DataTables，它会自动处理请求、解析数据、渲染表格，不需要你手动循环拼接HTML。
• DataTables能识别所有行数据，排序、搜索、分页等内置功能就能正常触发，不会再出现数据消失的问题。

如果你一定要保留StokListe()函数的写法，也可以用DataTables的API手动传数据：

$(document).ready(function () { 
    // 先初始化空的DataTables实例
    var table = $('#stokDataTable').DataTable();
    // 调用函数加载数据
    StokListe(table);
});

function StokListe(table){
    $.ajax({
        url: '../DataTable/Liste',
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            // 用rows.add API添加数据，再调用draw()渲染
            table.rows.add(data).draw();
        },
        error: function () {
            alert("数据加载失败，请重试");
        }
    });
}

3. View部分保持不变 #

你的View代码没有问题，不需要修改：

<html>
<table id="stokDataTable" class="table table-striped" style="width:100%">
<thead>
<tr>
<th>Barcode</th>
<th>Ürün ad</th>
<th>Ürün Fiyat</th>
<th>Ürün Miktar</th>
<th>Ürün Grup</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</html>

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