•  

    JQuery DataTables

    Each time I work with a new jQuery feature, I'm astonished at the vast number of capabilities available through these JavaScript components. Recently I worked with the jQuery DataTables libraries - a set of very powerful table display components. In today's eCommerce world, users expect to be able to (for example) search for an item, receive a tabular list of results, sort the results by price, change the number of displayed items to fit their page, and then filter within those results by some other word or attribute. In the interest of usability, even non-eCommerce web applications need to include these common capabilities. These features are so commonplace that they are simply expected.

    The DataTables libraries add these visual and functional features to standard HTML table output including formatting, dynamic sorting, drag-and-drop column rearranging, server-side data processing with AJAX, column hiding, dynamically changing the number of displayed rows, and dataset filtering.

    For a developer, one of the hurdles to learning the DataTables APIS is that "legacy" versions prior to 1.10 used a significantly different API than subsequent versions. This API change presents a challenge since many blog postings and tutorials written for developers reference the legacy APIs, making them useless when trying to work with the current versions. It's especially frustrating to search for a solution to a coding problem at hand and find the exact answer to that problem which uses the legacy API rather than the new one. Over time this should be resolved as more examples and blog posts address the new APIs.

    As with other jQuery components, implementation can be very simple or very elaborate. Basic but powerful DataTables capabilities can be added to existing HTML tables by simply including the JavaScript libraries and CSS files to the web page code and calling a single line of JavaScript code to initialize the DataTable. For example:

    <SCRIPT type="text/javascript">

    var myTable = $('#htmltable').DataTable();

    </SCRIPT>

    Building upon this, nearly every feature of the table can be modified by adding "options" in this DataTable initialization code. For example:

        var myTable = $('#htmltable').DataTable( {
            "buttons": [
                {
                    extend: 'colvis',
                    text: 'Show/Hide Columns'
                },
            ],
            "columnDefs": [
                    {"visible": false, "targets": [0,1,23,24]},
                    { "width": "45px", "targets": [ 2 ] }
            ],
            "dom": '<"toolbar"><"H1"<"plen"l><"pdisp"<B>>><"H2"<"ptool"p><"pinfo"i><"toolfind"f>>rt<"F1"ip>',                
            "language": {"info": "Displaying results _START_ - _END_ of _TOTAL_ found",
                "lengthMenu": "Display _MENU_ results",
                "infoFiltered": " - filtered from _MAX_ results",
                "search": "Find in results:",
                "infoEmpty": "No results to display",
                "emptyTable": "No results found" },
            "deferRender": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": 'mySearch.do',
                "type": "POST"
            },
            "autoWidth": false,
            "jQueryUI": false,
            "paging": true,
            "pagingType": "full_numbers",
            "scrollCollapse": true,
            "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
            "pageLength": 25
        } );

     

    The online DataTables API documentation (https://datatables.net/reference/api/) is thorough and includes examples for setting these options. The legacy API documentation is at http://legacy.datatables.net/ which is useful for understanding any existing code.

Comments

  • (no comment)

This website is created and hosted by Website.com's Site Builder.