Search code examples
jquerydatatables

Skipping a row from rendering in jquery DataTables


I want to skip row rendering if a condition is met during its initialization, however I dont know where exactly to place it.

Should I put it in fnCreatedRow or fnPreDrawCallback?
And how can I do that?

Here is my code:

 var users_tbl =$('#users_tbl');
    users_tbl.DataTable({
        "deferRender": true,
        "autoWidth": false,
        //for reinitialisation purpose
        destroy: true,
        "aLengthMenu": [[20, 40, 50, 100, -1], [20, 40, 50, 100, "All"]],
        "order": [[ 0, "DESC" ]],
        "ajax" : {
                url :  Main.Vars.host + "settings/get_users",
                type : "GET",
            },
            "aoColumnDefs": [

                    { "sWidth": "5%", "aTargets": [ 0 ] },
                    { "sWidth": "20%", "aTargets": [ 1 ] },
                    { "sWidth": "25%", "aTargets": [ 2 ] },
                    { "sWidth": "15%", "aTargets": [ 3 ] },
                    { "sWidth": "5%", "aTargets": [ 4 ] },
            ],
           "fnCreatedRow"  : function( nRow, aData, iDataIndex ){
                $(nRow).addClass('item-context');   

               return false;
            },
            "fnPreDrawCallback": function( oSettings ) {
                console.log(oSettings);
            },
            "columns": [
                { 
                    "data": "id",
                },
                { 
                    "data": "username",
                },  
                {
                   "render": function(data,type,row,meta) {
                        var owner = row.pnp_info.first_name + " " + row.pnp_info.last_name;
                        return owner;
                   }  
                },
                {
                    "data": "created_on",   

                },
                {
                   "render": function(data,type,row,meta) {
                        return row.active == 1 ? "YES" : "NO";
                   }  
                },

            ],

            sPaginationType: "full_numbers",
    });

Solution

  • For fnCreatedRow it is too late, and for fnPreDrawCallback you just end up cancelling rendering of the table. You have two different ways :

    1) Cleanup JSON in the ajax.dataSrc callback :

    var table = $('#example').DataTable( {
        ajax : {
            url : 'test.json',
            dataSrc: function(json) {
                var rows = [];
                for (var i=0;i<json.data.length;i++) {
                    //skip rows "if a condition is met"
                    //here just any rows except row #1
                    if (i>0) rows.push(json.data[i]);
                }
                return rows;
            }
        }
        ....
    })    
    

    2) Cleanup JSON upon the xhr event :

    table.on('xhr.dt', function (e, settings, json, xhr) {
        //manipulate the json directly, no return needed
        //delete row #1, same as above
        json.data.splice(0,1);
    });
    

    Both examples is under assumption that you have wellformed JSON on the (simplified) form

    {
     "data": [
         {
           "id": "2423",
           "username" : "joe"
         },
         {
           "id": "4321",
           "username" : "gordon"
         }
      ]
    }