How to use DataTables

Datatables a real strong library to create really cool tables using minimum handling and maximum functionality like searching, sorting, fixed headers, pagination etc. etc.. How to create a new table using DataTables from a simple HTML table. I used this implementation in Salesforce but you can easily use the same on any web technology.

    <script>
        var j$ = jQuery.noConflict(); // In Salesforce to avoid any conflict.

        j$(document).ready(function() {
            var teTable = j$('#ActivityTable').dataTable( {
                "sScrollY": 200,
                "bPaginate": true,
                "iDisplayLength": 300,
                "bScrollCollapse": false,
                "sDom": 'tips',
                "sPaginationType" : 'two_button',
                "bSort": true,
                "aaSorting": [[2,'desc']],
                "aoColumnDefs": [
                      { "bSearchable": false, "aTargets": [ 0, 1, 2, 3, 4, 5 ] },
                      { "bVisible": false, "aTargets": [ 6, 7, 8 ] }
                ]
            } );
        } );

    </script>

For more details on all functions refer to http://www.sprymedia.co.uk/article/DataTables 

To allow creation of filters based on data in the table, use the following

    (function(j$) {
    /*
     * Function: fnGetColumnData
     * Purpose:  Return an array of table values from a particular column.
     * Returns:  array string: 1d data array
     * Inputs:   object:oSettings - dataTable settings object. This is always the last argument past to the function
     *           int:iColumn - the id of the column to extract the data from
     *           bool:bUnique - optional - if set to false duplicated values are not filtered out
     *           bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
     *           bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
     * Author:   Benedikt Forchhammer
     */
    j$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
        // check that we have a column id
        if ( typeof iColumn == "undefined" ) return new Array();
       
        // by default we only want unique data
        if ( typeof bUnique == "undefined" ) bUnique = true;
       
        // by default we do want to only look at filtered data
        if ( typeof bFiltered == "undefined" ) bFiltered = true;
       
        // by default we do not want to include empty values
        if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
       
        // list of rows which we're going to loop through
        var aiRows;
       
        // use only filtered rows
        if (bFiltered == true) aiRows = oSettings.aiDisplay;
        // use all rows
        else aiRows = oSettings.aiDisplayMaster; // all row numbers
   
        // set up data array 
        var asResultData = new Array();
       
        for (var i=0,c=aiRows.length; i<c; i++) {
            iRow = aiRows[i];
            var aData = this.fnGetData(iRow);
            var sValue = aData[iColumn];
           
            // ignore empty values?
            if (bIgnoreEmpty == true && sValue.length == 0) continue;
   
            // ignore unique values?
            else if (bUnique == true && jQuery.inArray(sValue, asResultData) &gt; -1) continue;
           
            // else push the value onto the result data array
            else asResultData.push(sValue);
        }
       
        return asResultData;
    }}(jQuery)); 

This function iterates through the data and provides you the list of select options. We will use this function to create a select input field for search.

In the document ready event, add the following

    j$("#recordTypeFilter").each( function () {
        this.innerHTML = fnCreateRecordTypeSelect( teTable.fnGetColumnData(6) );
        j$('select', this).change( function () {
            teTable.fnFilter( j$(this).val(), 6 );
        } );
    } );

 and this function to the script tag of js library.

    function fnCreateRecordTypeSelect( aData ) {
        var r='< select> <option value=""> --All-- </option>', i, iLen=aData.length;
        for ( i=0 ; i<iLen ; i++ ) {
            r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
        }
        return r+'</select>';
    }

You can refer to more live examples on datatables here - http://www.datatables.net/examples/