从服务器 MVC 重新加载 JQuery 数据表

Question

我有一个在首页加载时生成的 JQuery 数据表。我正在尝试根据选择列表中选择的条件刷新它。

我的 Datatable 首先像下面的代码一样初始化。

<table class="table table-striped table-hover" id="dataTable" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>Select All <input type="checkbox" class="checkbox" id="chkBoxAll"></th>
            @foreach (System.Data.DataColumn col in Model.DataTypesTable.Columns)
            {
                <th> @col.Caption</th>
            }
        </tr>
    </thead>
    <tbody>

        @foreach (System.Data.DataRow row in Model.DataTypesTable.Rows)
        {
            <tr>
                <td> <input type="checkbox" class="checkbox" name="chkBox" value="@row.ItemArray[0]"></td>
                @foreach (var cell in row.ItemArray)
                {
                    <td>
                        @cell.ToString()
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

<script>
$(document).ready(function() {
  $('#dataTable').DataTable();
});
</script>

一开始它初始化得很好。但是，当我尝试在 selectlistchange 事件上重新加载它时，它不会重新加载任何内容并显示这样的错误。

DataTables 警告：表 id=dataTable - 请求第 0 行第 0 列的未知参数“Id”。有关此错误的详细信息，请参阅http://datatables.net/tn/4

<script type="text/javascript">
    $("#slctDeviceList").change(function () {
        var selectedValue = $("#slctDeviceList option:selected").text();
        $.ajax({
                traditional: true,
                dataType: 'html',
                type: "GET",
                url: '@Url.Action("GetDeviceDataTypes", "Home")',
                data: { slctDeviceList: selectedValue },
                success: function (result) {
                    console.log("Success");
                    console.log(result);

                    $("#dataTable").DataTable({
                        destroy: true,
                        data: result,
                        columns: [
                            { data: "Id", name: "Id" },
                            { data: "Data Name", name: "Data Name" },
                            { data: "Description", name: "Description" },
                            { data: "Device Type", name: "Device Type" }
                        ], columnDefs: [{
                            "defaultContent": "-",
                            "targets": "_all"
                        }]
                    });

                },
                error: function (result) {
                    console.log("error");
                }
        });
     });

</script>

控制器：

public JsonResult GetDeviceDataTypes(string slctDeviceList)
        {
            ChartRepository repository = new ChartRepository();
            System.Data.DataTable dt = repository.GetDataTypes(slctDeviceList);
            var json = this.Json(new { data = dt }/*, _jsonSetting*/);

            return json;
        }

我的开发者工具数据如下：

请帮我解决问题...提前致谢。

Answer 1

经过长时间的尝试和失去头发.. 我找到了一个清晰的解决方案并再次添加行而不是 destroy 命令。以下是解决方案。

<script type="text/javascript">
        $("#slctDeviceList").change(function () {
            var selectedValue = $("#slctDeviceList option:selected").text();

            $.ajax({
                traditional: true,
                dataType: 'json',
                type: "GET",
                url: '@Url.Action("GetDeviceDataTypes", "Home")',
                data: { slctDeviceList: selectedValue },
                success: function (result) {
                    console.log("Success");
                    var dataTable = $("#dataTable").DataTable();
                    dataTable.clear().draw();

                    $.each(result, function myfunc (index, value) {

                        // use data table row.add, then .draw for table refresh
                        dataTable.row.add([
                            '<input type="checkbox" class="checkbox" name="chkBox" value="' + value.Id + '">',
                            value.Id,
                            value.DataName,
                            value.Description,
                            value.DeviceType
                        ]).draw();
                    });
                },
                error: function (result) {
                    console.log("error");
                }
            });
        });
</script>

此外，从控制器操作返回一个 json 对象也很重要。

PS。如果 Json 对象具有 data 之类的初始标签，则可能需要将循环中的 value.Id 更改为 value.data.Id。但最好不要使用任何标签。

public JsonResult GetDeviceDataTypes(string slctDeviceList)
        {
            ChartRepository repository = new ChartRepository();
            System.Data.DataTable dt = repository.GetDataTypes(slctDeviceList);

            JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
            var json = this.Json(dt , _jsonSetting);

            return json;
        }