如何使用jquery数据表的多选择下拉过滤器

Question

在我的jquery数据表中，我想使用带有多选选项的下拉过滤器

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

正如你在这个例子中看到的。。。

https://datatables.net/examples/api/multi_filter_select

我可以过滤专栏Office，例如通过东京或通过伦敦。但我需要有机会展示所有在东京和伦敦设有办事处的参赛作品。

Answer 1

http://live.datatables.net/bixikujo/1/edit

$(document).ready( function () {

var table = $('#example').DataTable({
scrollY: 200,
initComplete: function () {
count = 0;
this.api().columns().every( function () {
var title = this.header();
//replace spaces with dashes
title = $(title).html().replace(/[W]/g, '-');
var column = this;
var select = $('<select id="' + title + '" class="select2" ></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
//Get the "text" property from each selected data 
//regex escape the value and store in array
var data = $.map( $(this).select2('data'), function( value, key ) {
return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
});

//if no data selected use ""
if (data.length === 0) {
data = [""];
}

//join array into string with regex or (|)
var val = data.join('|');

//search for the option(s) selected
column
.search( val ? val : '', true, false )
.draw();
} );

column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' );
} );

//use column title as selector and placeholder
$('#' + title).select2({
multiple: true,
closeOnSelect: false,
placeholder: "Select a " + title
});

//initially clear select otherwise first option is selected
$('.select2').val(null).trigger('change');
} );
}
});
} );