Jquery Datatables filtering using render

Question

I'm using datatables server side and I have a problem when I want to search a server side data with column filter because the render value doesn't match with the database field value. For example : In my database I have 0 and 1 in the status column. And in my datatable I display the status column with a render to get this : if status = 0 then I'll display disabled and if I have 1 I'll display enabled.

Here is a snippet of my code :

$(document).ready(function() {

/* ----------------------------------------------------- */
/* ----------------- DATATABLES HISTORY ---------------- */
/* ----------------------------------------------------- */

$('#historyTable').DataTable({
    dom: "t<'col-sm-5'i><'col-sm-7'p>",
    autoWidth: true,
    aaSorting: [[1, 'asc']],
    serverSide: true,
    lengthChange: false,
    ajax: {
        url: 'history',
        method: 'POST'
    }
    columns: [
        {data: "id"},
        {data: "name", orderData: [ 1, 0 ]},
        {data: "status", render: renderStatus, orderData: [ 2, 0 ]}
    ]
});

var historyTable = $('#historyTable').DataTable();

// Render status
function renderStatus(data, type, dataToSet){
    if(dataToSet.status == '1'){
        return "enabled";
    }else{
        return "disabled";
    }
}

// Global search
$('#historySearch').on('keyup', function(){
    historyTable.search($(this).val()).draw();
});

// Length menu
$('#historyMenu').on('change', function(){
    historyTable.page.len( $(this).val() ).draw();
});

// Setup - add a text input to each footer cell
$('#historyTable tfoot td').each( function () {
    var title = $('#historyTable tfoot td').eq( $(this).index() ).text();

    $(this).html( '<input type="text" />' );
});

// Apply the search
historyTable.columns().eq( 0 ).each( function ( colIdx ) {
    $( 'input', historyTable.column( colIdx ).footer() ).on( 'keyup change', function () {
        historyTable
        .column( colIdx )
        .search( this.value )
        .draw();
    });
});

});

Do you know how can I do to match the render value with the server side value ?

Answer 1

You can pass the name of the columns to the server:

$('#historyTable').DataTable({
    dom: "t<'col-sm-5'i><'col-sm-7'p>",
    autoWidth: true,
    aaSorting: [[1, 'asc']],
    serverSide: true,
    lengthChange: false,
    ajax: {
        url: 'history',
        method: 'POST'
    }
    columns: [
        {data: "id", name: "column1_name"},
        {data: "name", orderData: [ 1, 0 ], name: "column2_name"},
        {data: "status", render: renderStatus, orderData: [ 2, 0 ], name: "column3_name"}
    ]
});

I don't know how to set the name dynamically.