Load data but hide some lines if some column contains something

Load data but hide some lines if some column contains something

trucmuche2005trucmuche2005 Posts: 71Questions: 22Answers: 2

Hello,

I load data using ajax and it works perfectly. But immediately when the table is loaded, I would like to display only lines which the column named "nom" does not begin by "STH".

I managed to create a checkbox which hide or show those lines when the user clicks on the checkbox :

$('input[name="mycheckbox"]').on('ifChanged', function(event){
        if ($(this).prop('checked')) {
            table2.column("nom:name").search("", true).draw();
        }
        else {
            table2.column("nom:name").search("^(?!STH)").draw();
        }
    });

but the lines where "nom" column begins by "STH" are shown when the datatable is drawn for the first time. I don't want this : I would like to hide them by default.

So I tried to do this :

$('#table2').on('xhr.dt', function ( e, settings, json, xhr ) {
                new $.fn.dataTable.Api( settings ).one( 'draw', function () {
                    $('input[name="mycheckbox"]').iCheck('uncheck');    
                    //$('input[name="mycheckbox"]').trigger('ifChanged');
                } );
            } );

but the 'ifChanged' event is not fired after data loaded and the lines beginning by "STH" are displayed on the table after loading.
If I uncomment the line with "trigger('ifChanged')", the 'ifChanged' event is fired but the table is empty after loading. I have to check and uncheck 'mycheckbox' to have what I want...

Is there a solution ??

Many thanks in advance for your help...

T.

This question has an accepted answers - jump to answer

Answers

  • Tester2017Tester2017 Posts: 145Questions: 23Answers: 17

    Maybe you can use the example of row-callback , add the class "hidden" to those rows starting with "STH".

  • Tester2017Tester2017 Posts: 145Questions: 23Answers: 17

    Forget my answer as this will not work.
    Look here for another way to achieve hiding rows by using filters:

    link1 and link2 which contains a live example of link1. I have found this right now and I think it will give you a way to resolve hiding rows.

  • allanallan Posts: 63,464Questions: 1Answers: 10,466 Site admin

    I'd suggest simply doing:

    $('input[name="mycheckbox"]').trigger('ifChanged');
    

    just after you've initialised the DataTable. That will then activate your trigger and apply its filter to the table.

    Allan

  • trucmuche2005trucmuche2005 Posts: 71Questions: 22Answers: 2

    @Allan : I tried exactly that : just have a look here above on('xhr.dt' function which contains one( 'draw' but if I uncomment that line, the table is displayed empty when loaded. And then, if I check the checkbox, relevant items appears... I uncheck then the checkbox and the datatable then displays the lines I would like to see when the data are loaded for the first time...

  • trucmuche2005trucmuche2005 Posts: 71Questions: 22Answers: 2
    Answer ✓

    Ok it is solved. I made a mistake... Thank you very much !!

This discussion has been closed.