CODEWITHSUNDEEP
javascriptjqueryjsonasp.net-mvcdatatables
Simsons
Simsons

Reputation: 12735

How to update model data when using jQuery Data table with ASP.NET MVC

I have large amount of data returning from JSON and to sort,filter and page, I am using jQuery dataTable.

This is working perfect with sorting, searching and pagination.

But I have an issue when I am trying to bind model with View controls.

For example, I have following JSON returned,

{
    "data":
    [
    {"IsSelected":true,"Name":"SMyDataPoint__01"},
    {"IsSelected":true,"Name":"SMyDataPoint__04"},
    {"IsSelected":true,"Name":"SMyDataPoint__07"},
    {"IsSelected":true,"Name":"SMyDataPoint__08"},
    {"IsSelected":true,"Name":"SMyDataPoint__09"},
    {"IsSelected":true,"Name":"SMyDataPoint__10"},
    {"IsSelected":true,"Name":"SMyDataPoint__11"}
    ]
}

And now I am using jQuery to populate the json data in my browser,

$('#myTableName').DataTable(
        {
            "ajax": {
                "url": "/API/Loaddata",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                {
                    "data": "IsSelected",
                    "render": function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="editor-active">';
                        }
                        return data;
                    },
                    "className": "dt-body-center"
                   // "autoWidth": true
                },
                { "data": "Name", "autoWidth": true }
            ],
            "rowCallback": function (row, data) {
                // Set the checked state of the checkbox in the table
                $('input.editor-active', row).prop('checked', data.active == 1);
            }
        }
    );

Though I am getting ISelected as true from JSON, in UI , they are not ticked.

Upvotes: 2

Views: 915

Answers (1)

user3559349
user3559349

Reputation:

The json objects you have shown do not have a property named active (and therefore data.active would return undefined). Use the IsSelected to set the checkedproperty.

$('#myTableName').DataTable({
   ....
   "rowCallback": function (row, data) {
        // Set the checked state of the checkbox in the table
       $('input.editor-active', row).prop('checked', data.IsSelected);
    }
})

Upvotes: 3

Related Questions