Make table on page load empty?

webman

I have a datatable that I am returning from a mysql database. I would like the table to be empty at first page load then load based on my filter radio buttons. Can I do this? Not sure where to place the clear() tag, then the draw tag?

www.c3events.org/connectmobilerpt.php

rf1234

Just set the default of your filter radio buttons to filter out everything. Then you won't see anything in the front-end. Once the user changes the radio buttons your filter should be less restrictive.

This is one way to use search.push: https://datatables.net/examples/plug-ins/range_filtering.html

And here is another one that allows you to get hold of individual rows:
https://datatables.net/forums/discussion/45637/possible-to-have-search-filters-away-from-table#latest

webman

On page load brings back everything in my query, should I have a default radio on the page load that clears everything? Or should I filter everything out on the actually table until a user choose something, sorry a little confused by your answer.

Demo code
https://c3events.org/connectmobilerpt.php

rf1234

I would recommend the latter. Leave your back end query unchanged and filter all records on the client side. Initially just filter out everything. The filtering I suggest is client side only. No changes on the back end!

webman

Can you supply the syntax?

On the table or add a new radio button

webman

where do I hide the table at first load? Driving me nuts everything I try it doesnt work?

$(document).ready(function() {
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100], [25, 50, 100]],
responsive:true,
});
$('div.container').removeClass('hidden');
} );

rf1234

This looks like the old syntax. No experience with that.

You need to use an event to hide the table initially. I thought you only wanted an empty table. Then you wouldn’t have needed it.
https://datatables.net/reference/event/init

webman

I really want to hide the table on page load, maybe using DIV, then on click using my radio display the table.

rf1234

here is an example from my own coding. I am using multiple tables on the same page and show and hide them dynamically based on events.

When I iniitalize the first table I hide all others

contractGovDeptTable
        .on ('init', function () {
            hideTbls( [contractTable, contractFixedTable,
                       contractVariableTable, cashFlowTable, contractRfaGovTable] );
    })

function hideTbls(tbls) {  //array of table objects
    $('.headers').addClass('hidden');
    for (i=0; i < tbls.length; i++) {
        $(tbls[i].table().container()).addClass('hidden');
    }
};

$('#yourButton').click(function () {
    showTbls( [contractTable, contractFixedTable,
                       contractVariableTable, cashFlowTable, contractRfaGovTable] );
});

function showTbls(tbls) { //array of table objects
    $('.headers').removeClass('hidden');
    for (i=0; i < tbls.length; i++) {
        $(tbls[i].table().container()).removeClass('hidden');
    }
};

The above could be something for you.

allan

Put it in a div which has display:none, then use $('div.myContainer').css('display', 'block'); when you want to show it. You can dynamically add data to a table using rows.add().

Allan