Error ColVis

rafasw

I am automatically hiding field 5, 7 when I click to enable both the search field does not come together how to solve this? thank you

My Code

$(document).ready(function() {


      var advance = $('#advanced-table').DataTable( {
      dom: 'Blfrtip',
           columnDefs: [
            {
                targets: 1,
                className: 'noVis',
            },
            {
            
                "targets": [ 5 ],
                "visible": false,
                "searchable": true,
            },
            {
                "targets": [ 7 ],
                "visible": false,
                "searchable": true,
            }
        
        ],
    buttons: {
        name: 'primary',

        buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'  ]
    },
          
          
  
    
          //"language": {
                //"url": "http://cdn.datatables.net/plug-ins/1.10.13/i18n/Portuguese-Brasil.json"
           // } 
          
   
    } );

    
$(document).ready(function() {
    $('a.toggle-vis').on('click', function (e) {
        e.preventDefault();
 
        // table
        var table = $('#advanced-table').dataTable();
 
        // column
        var ColNum = $(this).attr('data-column');
 
        // Define
        var bVis = table.fnSettings().aoColumns[ColNum].bVisible;
 
        // Toggle
        table.fnSetColumnVis(ColNum, bVis ? false : true);
 
    });
});
    


// Setup - add a text input to each footer cell
    $('#advanced-table tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );
    } );
      // Apply the search
    advance.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

    

    } );

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you link to a page showing the issue please?

Thanks,
Allan

rafasw

I sent private message to you with the data of the page for you to see the error

allan

Thanks for the link. This is the issue:

$('#advanced-table tfoot th').each( function () {

You are looping over only the cells which are in the document there, but the hidden columns have been removed. You need to use columns().every() like you have in the next block to loop over them.

Allan

rafasw

I do not quite understand what I should change, is it inside the code block? What should I change?

$('#advanced-table tfoot th').each( function () {

    var title = $(this).text();
    $(this).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );
} );
  // Apply the search
advance.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );

rafasw

?

rafasw

I still can not solve the problem

kthorngren

In addition to the change Allan mentioned you will use column().footer() to add the input to each footer. For example:

advance.columns().every( function () {
 
    var title = $(this.footer()).text();
    $(this.footer()).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );
} );

Kevin

rafasw

I tested like this but it did not work

`// Setup - add a text input to each footer cell
$('#advanced-table tfoot th').each( function () {

    var title = $(this).text();
    $(this).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );
} );
  // Apply the search
advance.columns().every( function () {
    var that = this;

    var title = $(this.footer()).text();
    $(this.footer()).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that.search( this.value ).draw();
        }
    } );
} );`

I tested it this way and it did not work too

`// Setup - add a text input to each footer cell
$('#advanced-table tfoot th').each( function () {

    var title = $(this.footer()).text();
    $(this.footer()).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );
} );
  // Apply the search
advance.columns().every( function () {
    var that = this;



    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that.search( this.value ).draw();
        }
    } );
} );`

rafasw

it worked like that

`
advance.columns().every( function () {
var title = $(this.footer()).text();
$(this.footer()).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );

    var that = this;
    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that.search( this.value ).draw();
        }
    } );
} );

$('#advanced-table tfoot th').each( function () {

    $(this).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="Pesquisar '+title+'" /></div>' );


} );

`

allan

Thanks for posting back - good to hear you've got it working now.

Allan