"No data available in table", then loads

colgreen

Hi

When the page loads "No data available in table" is displayd briefly, the table then loads as expected.

http://oxfordandbucks.co.uk/Child/ROHsearch.html?searchJson=

$(document).ready(function() {
    var table = $('#roh').DataTable( {
        "ajax": "data/ROH-Data.json",
        "responsive": {
            "details": {
                "type": 'column',
                "target": 'tr'
            }
        },

//      "deferRender": true,

        'columnDefs': [
            { "width": "25px", 'targets': 0 },
            { "width": "65px", 'targets': 9 },  //Cause
            { "width": "75px", 'targets': 10 },
          ],
        
        "columns": [
            {
                "className":      'control',
                "orderable": false,
                "data":        null,
                "defaultContent": '' 
            },

            { 'data': 'serviceno' },
            { 'data': 'alternativeno' },
            { 'data': 'rank',  "searchable": false },
            { 'data': 'surname' },
            { 'data': 'christianname',  "searchable": false },
            { 'data': 'coy',  "searchable": false  },
            { 'data': 'enlist',  "searchable": false  },
            { 'data': 'overseas',   "searchable": false  },
            { 'data': 'cause',   "searchable": false  },
            { 'data': 'date',   "searchable": false  },
            { 'data': 'age',   "searchable": false  },
            { 'data': 'location',  "searchable": false  },
            { 'data': 'ref',   "searchable": false  },
            { 'data': 'notes',   "searchable": false  },

                 ],

        
        "lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]],
        
        "search": { "search": jsonSearch    },
        "ordering": false,  // Disabels COLUMN ordering
        "scrollY":        "300px",
        "scrollCollapse": false,

    } );
     
    // Add event listener for opening and closing details
    $('#roh tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
        
    } );
} );

allan

That's sort of expected since the data is being loaded by Ajax. However, it should really say "Loading..." and not "No records". I'm not immediately sure what would cause that as it seems to be working okay here.

Allan

colgreen

Hi Allan

If I remove all responsive java script, "Loading" appears before table is rendered. I then introduce dataTables.responsive.min.js (to dispay the Child row) "No Data Available in Table" appears before table is loaded.

Regards

Colin

allan

Hi Colin,

Git it - thanks for digging into this!

This commit fixes that issue. The nightly version contains that fix and it will be in the next release of Responsive.

Regards,
Allan

colgreen

Hi Allan,

Works as expected, thank you.

Regards

Colin