datatables.multiSelect
Example using two datatables and multiSelect filters.
by omarcho
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://rawgit.com/DataTables/DataTables/master/media/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://rawgit.com/DataTables/DataTables/master/media/js/dataTables.bootstrap.min.js"></script>
<script src="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<script src="https://rawgit.com/omarcho/dataTables.multiSelect/master/dist/js/dataTables.multiSelect.min.js"></script>
<div class="container-fluid ">
<div class="row">
<div class="col-lg-12">
<h3>DataTable MultiSelect</h3>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<select id="maintable-quick-filter-0" multiple class="form-control" size="1" data-enable-filtering="true" data-button-class="btn btn-sm btn-default" data-placeholder="Name"></select>
<select id="maintable-quick-filter-1" multiple class="form-control" size="1" data-enable-filtering="true" data-button-class="btn btn-sm btn-default" data-placeholder="Position"></select>
<select id="maintable-quick-filter-2" multiple class="form-control" size="1" data-enable-filtering="true" data-button-class="btn btn-sm btn-default" data-placeholder="Office"></select>
<select id="maintable-quick-filter-3" multiple class="form-control" size="1" data-enable-filtering="true" data-button-class="btn btn-sm btn-default" data-placeholder="Extn."></select>
<select id="maintable-quick-filter-4" multiple class="form-control" size="1" data-enable-filtering="false" data-button-class="btn...JavaScript
var data = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
[ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
[ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
[ "Yuri Berry", "Chief...