How can i combine 2 different API's for the same table?

Mortennordby

Hi, i want to use both the API for • Show / hide columns dynamically AND the API for • Individual column searching (select inputs) for a table. How do i combine the two javascript examples for these 2 API's to get it to work?

allan

Perhaps you can give us a link to a page showing what you have tried please?

Mortennordby

Hi Allan, and thank you for responding so quickly. I have successfully used the API for hide/show columns on a table, so that is working fine. But i also would want the API for Individual column searching(select inputs) applied to the same table, and so far i have not been able to do that because i dont understand how to combine the javascript code from each of the API's in the code. As you know the code for the Hide/show is:

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );
 
    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
 
        // Get the column API object
        var column = table.column( $(this).attr('data-column') );
 
        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

and the code for Individual column searching (select inputs) is like this:

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

So how can these 2 codes be put together for the same table?

Sorry for the messy message, tried to format the code text, but i think i did something wrong when writing this post :-(

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

allan

This section in the manual describes how to combine initialisation options into a single object.

Allan

Mortennordby

Hi Allan and thank you for responding. I have read the section in the Manual to try to understand how to do it, but i am afraid that i need an example on how to combine these 2 for me to be able to understand how to put it together. I'm sorry to bother you, but i'm fairly new to programming and i have found that i learn best from viewing examples of code when there is something i struggle to understand. So if you would be able to post an example i would be very happy.
Kind regards Morten

allan

    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false,
        initComplete: function () {
          ...
        }
    } );

If you would like a running example, that would be covered by the DataTables support options.

Allan