JQuery datatables adding column classes to dynamic content

Question

I have a datatable that has dynamic columns

<table id="dt_basic" width="100%" class="table table-striped table-bordered table-hover tableSearch">
    <thead>
        <tr>
            @foreach (var item in Model.ColumnInfo) {
            <th>@Html.Raw(@item.ColumnHeader) </th>
            }
            <th>Edit</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

I want to set the column type and column class after the datatable is populated

    var table = $('#dt_basic').dataTable({
        "pagingType": "full_numbers",
        "ajax": "@Url.Action("LoadResultGrid", "Verifications", new { id = Model.RunId })",
        "deferRender": true,
        "bProcessing": true,
        "scrollX": "100%",
        "columnDefs": [
            {
                "targets": [0],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [1],
                "searchable": true,
                "visible": true
            }
        ]
    });

Model.ColumnInfo is a List of objects with attributes: ColumnHeader, ColumnType, ColumnClass.

So I need to loop through the columns after the table has been created and match the column header to Model.ColumnInfo.ColumnHeader and then set the column type to the corresponding Model.ColumnInfo.ColumnType and the column class to the corresponding Model.ColumnInfo.CoulmnClass.

Any help would be appreciated. Thanks.

Kay · Accepted Answer · 2015-03-02 02:18:11Z

I have figured out how to resolve my issue and thought I'll share it in case someone else has a similar issue.

I added razor code to generate javascript that added clasName attribute to columndefs dynamically.

    var table = $('#dt_basic').dataTable({
        "pagingType": "full_numbers",
        "ajax": "@Url.Action("LoadResultGrid", "Verifications", new { id = Model.RunId })",
        "deferRender": true,
        "bProcessing": true,
        "scrollX": "100%",
        "columnDefs": [
            {
                "targets": [0],
                "visible": false,
                "searchable": false
            },
            @for(var i = 0; i < (Model.ColumnHeaders.Count); i++){
                if (Model.ColumnHeaders[i].ColumnClass != null)
                {
                    @: {"targets": [@i], "className": "@Model.ColumnHeaders[i].ColumnClass"},
                };
            }
        ]
    });

The resolved javascript snippet:

        "columnDefs": [
            {
                "targets": [0],
                "visible": false,
                "searchable": false
            },
                     {"targets": [5], "className": "do_rightalign"},
                     {"targets": [6], "className": "do_rightalign"},
                     {"targets": [7], "className": "do_rightalign"},
                     {"targets": [8], "className": "do_rightalign"},

Collectives™ on Stack Overflow

JQuery datatables adding column classes to dynamic content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related