JQuery Datatable Reload From Server MVC

Question

I have a Datatable of JQuery generated at first-page load. I am trying to refresh it according to the selected criteria from the selectlist.

My Datatable initialized first like the following code.

<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>

It initializes well at first. However, when I try to reload it on the selectlistchange event, it doesn't reload anything and displays an error like this.

DataTables warning: table id=dataTable - Requested unknown parameter 'Id' for row 0, column 0. For more information about this error, please see 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>

Controller:

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;
        }

My data is like below from the developer tools:

Please help me out to resolve the issue... Thanks in advance.

Answer 1

After long tries and losing hairs.. I have found a solution clear and add the rows again instead of destroy command. Here is the solution below.

<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>

Also, it is important to return a json object from the controller action.

PS. If the Json Object has an initial tag like data, you may need to change the looping value.Id to value.data.Id. But it is better to not use any tag.

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;
        }