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

Posted 2023-05-07

【中文标题】从服务器 MVC 重新加载 JQuery 数据表

【英文标题】：JQuery Datatable Reload From Server MVC

【发布时间】：2021-08-21 10:19:51

【问题描述】：

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

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

<table class="table table-striped table-hover" id="dataTable"  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;
        

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

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

【问题讨论】：

该错误表明datatable试图到达被破坏的数据。数据表.clear();在新数据之前可能需要。 ***.com/questions/27778389/…

谢谢，但我试过了，没有任何改变

【参考方案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;