[jQuery][Datatables] Sort DataTables with a Select field

Javascript :

 

$(document).ready(function () {
 var table = $('#datatable').DataTable({
 dom: 'lr<"table-filter-container">tip',
 initComplete: function (settings) {
 var api = new $.fn.dataTable.Api(settings);
 $('.table-filter-container', api.table().container()).append(
 $('#table-filter').detach().show()
 );

$('#table-filter select').on('change', function () {
 table.search(this.value).draw();
 });
 }
 });

});

HTML :

 

<p id="table-filter" style="display:none">

                                    Chercher:

                                    <select>

                                        <option value="">All</option>

                                        <option>Tag1</option>

                                        <option>Tag2</option>

                                        <option>Tag3</option>

                                        <option>Tag4</option>

                                    </select>

                                </p>

                                <table id="datatable" class="display table table-hover table-responsive" cellspacing="0" width="100%">

                                    <thead>

                                        <tr>

                                            <th>Titre</th>

                                            <th>Assigné à</th>

                                            <th>Commencé le</th>

                                            <th>Dû dans</th>

                                            <th></th>

                                        </tr>

                                    </thead>

Advertisement