CODEWITHSUNDEEP
jquerydatatables
user2388554
user2388554

Reputation:

jQuery datatables don't show table if haven't data

I'm using jquery datatables with server side fetch data, my problem is when table of data is empty datatables hide table and don't show that, i want to show table with no any data on table message, how to have this option?

oTable_topics =$('#showTopics').dataTable({
    "bLengthChange": false,
    "bStateSave": true,
    "iDisplayLength": 12,                               
    "bScrollCollapse": true,       
    "bJQueryUI": true,
    "bAutoWidth": false,
    "sAjaxSource": "server_processing.php",
    "sPaginationType": "full_numbers",
    "bProcessing": true,
    // "fnCreatedRow": function( nRow, aData, iDataIndex ) {
     // $('td:eq(5)', nRow).html("<ul class='styledlist' style='width:80px !important;'><img src='http://localhost/shirazee/UI/images/icons/publish.png' style='border:none;'/></ul>");
    // },
    "fnDrawCallback": function(oSettings) {
        clickRowHandler_topics();
        if ( oSettings.aiDisplay.length == 0 )
        {
            return;
        }                       
        var nTrs = $('tbody tr', oSettings.nTable);
        var iColspan = nTrs[0].getElementsByTagName('td').length;
        var sLastGroup = "";
        for ( var i=0 ; i<nTrs.length ; i++ )
        {
            var iDisplayIndex = oSettings._iDisplayStart + i;
            var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
            if ( sGroup != sLastGroup )
            {
                var nGroup = document.createElement( 'tr' );
                var nCell = document.createElement( 'td' );
                nCell.colSpan = iColspan;
                nCell.className = "group";
                nCell.innerHTML = sGroup;
                nGroup.appendChild( nCell );
                nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
                sLastGroup = sGroup;
            }
        }
    },
    "aoColumnDefs": [
        { "bVisible": false, "aTargets": [ 0 ] }
    ],
    "aaSortingFixed": [[ 0, 'asc' ]],
    "aaSorting": [[ 1, 'asc' ]],
    "fnServerParams": function ( aoData ) {
      aoData.push(
         {"name": "id"   ,      "value": "i.id" },          
         {"name": "subject"   , "value": "i.subject" },
         {"name": "date_time",  "value": "i.date_time"} ,
         {"name": "posted_by",  "value": "u.username"} ,
         {"name": "ctitle"   ,  "value": "c.title"} ,
         {"name": "etitle"   ,  "value": "e.title"},
         {"name": "istatus"   ,  "value": "i.status"},
         {"name": "join"     ,  "value": "JOIN categories c ON i.category = c.id JOIN status_topics e ON i.status = e.id JOIN users u ON i.posted_by = c.id"},
         {"name": "action"   ,  "value": "topics" }
      )}
    });
    function clickRowHandler_topics() {
        $('#showTopics tbody tr').bind('click', function () {
            var aData = oTable_topics.fnGetData( this );
            iId_topics = aData[1];
        });
    }

Upvotes: 7

Views: 13724

Answers (5)

Mezrani ISMAIL
Mezrani ISMAIL

Reputation: 1

var myTable = $("#my_table");
myTable.dataTable({
        "fnInitComplete": function(oSettings) {
           if (oSettings.aiDisplayMaster.length <= 0) {
               $("#my_table_wrapper").hide();
           }
        }
});

Edit(add description): based on event doc and setting doc we see that the DisplayMaster contain the number of elements in the table and based on HTML render, the table have a global div with class = "table class"+ _wrapper" with default settings. so if we don't have elements we hide this div.

maybe this is not the best solution but it's work.

Upvotes: -1

Johann
Johann

Reputation: 12398

To toggle the table visibility depending on the number of result, simply use the property fnDrawCallback:

var _grid = $("#myTable").dataTable({
    fnDrawCallback: function (settings) {
        $("#myTable").parent().toggle(settings.fnRecordsDisplay() > 0);
    }
});

Upvotes: 11

rogueleaderr
rogueleaderr

Reputation: 4799

DataTables provides a callback that's triggered when the table loads (e.g. when the server-side call completes.) You can put arbitrary code there to modify the table however you like.

For example, to hide your table on load:

var myTable = $("#my_table");
myTable.dataTable({

    "fnInitComplete": function(oSettings, json) {
        myTable.hide();
    }
});

Upvotes: 0

DrewT
DrewT

Reputation: 5072

I think what you mean is if your table is empty of all data don't show any datatable. That's not something you can do in your table init directly.

What you'd need to do is test the output coming from your "sAjaxSource": "server_processing.php" and see if it's empty:

$.getJSON( "server_processing.php", function( data ) {
    if( this = "" || NULL ) {
        // add css hidden classes to all datatables elements
        $("#showTopics").addClass("hidden");
        $(".your-th-and-thead-classes").addClass("hidden");
    }
}

Then in your CSS can just do:

.hidden {
    display: none;
}

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

You can do it as

$('#showTopics').dataTable( {
    "oLanguage": {
        "sEmptyTable" : "Your custom message for empty table"
    }
} );

Just add this

"oLanguage": {
    "sEmptyTable" : "Your custom message for empty table"
}

Upvotes: 3

Related Questions