JQuery DataTable - dynamically bind a checkbox column to server data

Question

In jQuery datatable, how to dynamically bind checkbox columns when bind server data?

My code is:

oTable = $("#tblPreProcess").dataTable({
            bProcessing: true,
            bLengthChange: false,
            bFilter: true,
            sAjaxSource: '@Url.Action("FetchPreprocessOrders", "Admin")',
            aoColumns: [
               { sTitle: "Order No", bSortable: false ,bSearchable: true},
                { sTitle: "Vol.Weight", bSortable: false },
                { sTitle: "Content", bSortable: false, },               
                 { sTitle: "Bag Number", bSortable: false }                               
            ]               

        });

In the above code, how to add a column column in front of the column "Order No.".

Answer 1

You can do it as below:

    oTable = $("#tblPreProcess").dataTable({
            bProcessing: true,
            bLengthChange: false,
            bFilter: true,
            sAjaxSource: '@Url.Action("FetchPreprocessOrders", "Admin")',
            aoColumns: [
               { sTitle: "Select", bSortable: false ,
                 mRender: function (data, type, full)
                 {
                    return '<input type="checkbox" class="selector" data-id="'+ data +'">'
                 },
               { sTitle: "Order No", bSortable: false ,bSearchable: true},
               { sTitle: "Vol.Weight", bSortable: false },
               { sTitle: "Content", bSortable: false, },               
                { sTitle: "Bag Number", bSortable: false }                               
            ]               

        });