Adding select menu to multiple tables with jquery data tables pluglin

Question

I've got two tables (table1,table2) that are structurally the same, but fed from different sources. Both tables share the class 'display' which I use to initialise the plugin for both tables. This works great for the most part, however the column filters select menu for table2 is duplicated on table1.

I've tried to fix this by using 'this' keyword to indicate a particular instance of the toolbar each of the filters need applying to, but not had much success.

The code that works is:

HTML:

<table id="table1" class="display table-striped table-borded table-hover" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Report Name</th>
        <th>Year</th>
        <th>Montly Snapshot</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>Date of Last Refresh --var from warehouse-- </th>
    </tr>
</tfoot>
</table>
<table id="table2" class="display table-striped table-borded table-hover" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Report Name</th>
        <th>Year</th>
        <th>Montly Snapshot</th>
    </tr>
</thead>
    <tfoot>
          <tr>
        <th>Date of Last Refresh --var from warehouse-- </th>
    </tr>
</tfoot>
</table>

JS:

//initialise data tables plugin and apply custom settings.
var reportstable = $('table.display').DataTable({
"sDom": '<"toolbar">Bfrtlp',
"searchCols": [
    null, {
        'sSearch': 'Current'
    }
],
language: {
    search: "_INPUT_",
    searchPlaceholder: "Search for a Report..."
},
// create select form controls
initComplete: function() {

    this.api().columns([1, 2]).every(function() {

        var column = this;
        var select = $('<select><option value=""></option></select>')

        .appendTo($('.toolbar'))
            .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>')
            if ($('#info').css('display') == 'block') {

                $("#reports_wrapper").css('display', 'none');
            }

            // add bootstrap classes and placeholder property to form controls to add style
            $('.toolbar select').addClass('selectpicker');
            $('.dt-button').addClass('btn btn-danger').removeClass('dt-button');
            $('.toolbar select').attr('id', 'year');

            $('#year').prop('title', 'Financial Year');
            $("#year option:contains('Current')").remove();

            $('.toolbar select:nth-of-type(2)').attr('id', 'month');
            $('#month').prop('title', 'Monthy Snapshot');
            $("#month option:contains('undefined')").remove();


        });
    });
},

// create clear filter button
buttons: [

    {
        text: 'Clear Filters',
        action: function(e, dt, node, config) {

            $('select').val('').selectpicker('refresh');

            // set Current Year as default filter
            reportstable

                .search('')
                .columns([1]).search('Current')
                .columns([2]).search('')
                .draw();

        }
    }

],

//hide specified columns
"columnDefs": [

    {
        "targets": [1],
        "visible": false,
        "searchable": true
    }, {
        "targets": [2],
        "visible": false,
        "searchable": true
    }
]
});

Answer 1

I've updates your jsfiddle and created a new jsfiddle. It's now appending 2 select menus in both tables's wrapper div. I've found why it's appending 4 select menus instead of 2 on the table1's wrapper div. It's because of this code: .appendTo($('.toolbar')). When initComplete callback function is called for table1 there is only one div with class=toolbar, and when the initComplete callback function is called for table2 there is two div with class=toolbar, one in table1's wrapper div and one in table2's wrapper div. that's why on table2's initComplete callback function it append select menus to all divs with class=toolbar. We should rather append to the current table wrapper's div with class=toolbar.