具有多选外部数据表的列过滤器

时间:2018-11-18 10:06:28

标签: datatable

我正在尝试在数据表外部获取具有multiselect的列过滤器。任何帮助将不胜感激。 jsfiddle https://jsfiddle.net/veymt0hj/1/,在页脚中出现了列过滤器中的单选(需要多选)(**需要将其放在外部数据表的顶部)

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>                
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
        </tr>                     
        <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>

        </tr>
        <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>

        </tr>
        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>

        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>

        </tr>
    </tfoot>
</table>


$(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>' )
            } );
        } );
    }
} );

});

0 个答案:

没有答案
相关问题