Question

我有两个表（table1，table2）在结构上相同，但来自不同的来源。两个表共享类'display'，我用它来初始化两个表的插件。这在大多数情况下都很有用，但是table1的列过滤器选择菜单在table1上是重复的。

我试图通过使用'this'关键字来指明每个过滤器需要应用的工具栏的特定实例，但没有取得多大成功。

有效的代码是：

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

我更新了你的jsfiddle并创建了一个新的jsfiddle。它现在在两个表的包装div中附加2个选择菜单。我已经找到了为什么它会在table1的包装div上附加4个选择菜单而不是2个。这是因为这段代码：.appendTo($('.toolbar'))。当为table1调用initComplete回调函数时，只有一个div具有class = toolbar，当为table2调用initComplete回调函数时，有两个div使用class = toolbar，一个在table1＆＃39; s包装div中，一个在table2＆＃39; s包装div。这就是为什么在table2的initComplete回调函数上它将选择菜单附加到所有具有class = toolbar的div。我们应该使用class = toolbar附加到当前表包装器的div。

使用jquery数据表插件将选择菜单添加到多个表

1 个答案: