DataTables

DataTables Examples

by Ford Heacock

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css">
<select class="w300" multiple="multiple" id="dropdown1" style="width: 50%;">
        <option value="Anderson|Alamo|Alcoa">Anderson</option>
        <option value="Bedford">Bedford</option>
        <option value="Benton">Benton</option>
        <option value="Bledsoe">Bledsoe</option>
        <option value="Blount">Blount</option>
        <option value="Bradley">Bradley</option>
        <option value="Campbell">Campbell</option>
        <option value="Cannon">Cannon</option>
        <option value="Carroll">Carroll</option>
        <option value="Carter">Carter</option>
        <option value="Cheatham">Cheatham</option>
        <option value="Chester">Chester</option>
        <option value="Claiborne">Claiborne</option>
        <option value="Clay">Clay</option>
        <option value="Cocke">Cocke</option>
        <option value="Coffee">Coffee</option>
        <option value="Crockett">Crockett</option>
        <option value="Cumberland">Cumberland</option>
        <option value="Davidson">Davidson</option>
        <option value="Decatur">Decatur</option>
        <option value="DeKalb">DeKalb</option>
        <option value="Dickson">Dickson</option>
        <option value="Dyer">Dyer</option>
        <option value="Fayette">Fayette</option>
        <option value="Fentress">Fentress</option>
        <option value="Franklin">Franklin</option>
        <option value="Gibson">Gibson</option>
        <option value="Giles">Giles</option>
        <option value="Grainger">Grainger</option>
        <option...

CSS

.hide-me {
  display: none;
}

JavaScript

$(document).ready(function() {
        var table = $('#example, #example2, #example3').DataTable({
            search: {
                regex: true
            },
            bPaginate: false
        });

        $('#dropdown1').on('change', function() {
            table.search(this.value).draw();
        });
        // $('#dropdown2').on('change', function () {
        //                table.search( $("select").multipleSelect("getSelects") ).draw();
        //                console.log(this.value);
        //            } );

        $(function() {
            $('#dropdown1').multipleSelect({
                placeholder: "Select your County."
            });
        });

        $(function() {
            $('#dropdown2').multipleSelect({
                placeholder: "Select your District."
            });
        });
        //appends selected districts to all search inputs
        $("#getSelectsBtn").click(function() {
            table.search($("select").multipleSelect("getSelects").join("|")).draw();
        });

    });