Make table on page load empty?

Make table on page load empty?

webmanwebman Posts: 25Questions: 1Answers: 0

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

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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

  • webmanwebman Posts: 25Questions: 1Answers: 0

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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!

  • webmanwebman Posts: 25Questions: 1Answers: 0

    Can you supply the syntax?

    On the table or add a new radio button

  • webmanwebman Posts: 25Questions: 1Answers: 0

    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');
    } );

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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

  • webmanwebman Posts: 25Questions: 1Answers: 0

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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.