datatables.md

How to use DataTables

Getting started

1. Create a table with id="myTable".

<table id="myTable">
    ...
</table>

2. Include these two files

//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js

3. Call this function

$(document).ready( function () {
    $('#myTable').DataTable();
} );

Individual column searching (select inputs)

1. Build the select tag input using the column().data method
2. Use helper methods unique() and sort()
3. Use the change event from the select input to trigger a solumn search using the column().search() method.

    </tbody>
    <tfoot>
        <tr>
            <th>...</th>
            ...
    </tfoot>
</table>

Note:

Table footers are optional in DataTables. If the columns found from the columns() call do not have footer elements, an empty result set will be returned.

$(document).ready(function() {
    $('#myTable').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>' )
                } );
            } );
        }
    } );
} );

Sources Individual column searching (select inputs): https://datatables.net/examples/api/multi_filter_select.html Footer callback: https://datatables.net/examples/advanced_init/footer_callback columns().footer() https://datatables.net/reference/api/columns().footer() Get the footer nodes for the selected columns. initComplete - Lets you know when the data is fully loaded. https://datatables.net/reference/option/initComplete

Hidden columns

$(document).ready( function () {
    $('#myTable').DataTable();
        "columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false
            },
            {
                "targets": [ 3 ],
                "visible": false,
                "searchable": false
            }
        ]
...

Reponsive

Optimizes a table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.

$('#myTable').DataTable( {
    responsive: true
} );

Responsive: https://datatables.net/extensions/responsive/

Search (custom filtering)

How to filter a range of numbers of dates

https://datatables.net/examples/plug-ins/range_filtering.html

Text-based column search

https://datatables.net/examples/api/multi_filter.html

Dropdown-based column search

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