<!--
/**
  * Description     :   Component for javascript datatable.   
  *
  * Created By      :   Abhi Tripathi
  *
  * Created Date    :   12/27/2013
  *
  * Version         :   V1.0  
  *
  **/
-->
<apex:component controller="ComponentDemo" >
  
    <!-- attributes to be called on page -->  
    <apex:attribute name="listOfRecords" description="list Of Records" type="Object[]" required="false"/> 
    <apex:attribute name="fieldHeader" description="field Header" type="String" required="false" assignTo="{!columnHeader}"/>      
      
    <!-- reference to the static resource -->  
    <apex:stylesheet value="{!URLFOR($Resource.DataTable, 'css/demo_page.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.DataTable, 'css/demo_table.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JavaScript, 'js/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JavaScript, 'js/DataTables.js')}"/>

    <script type="text/javascript" charset="utf-8">
    (function($) {
        /*
         * 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
         */
        $.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 wany 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 wany 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) > -1) continue;
                
                // else push the value onto the result data array
                else asResultData.push(sValue);
            }
            
            return asResultData;
        }}(jQuery));
        
        
        function fnCreateSelect( aData )
        {
            var r='<select><option value=""></option>', i, iLen=aData.length;
            for ( i=0 ; i<iLen ; i++ )
            {
                r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
            }
            return r+'</select>';
        }
        
        
        $(document).ready(function() {
            /* Initialise the DataTable */
            var oTable = $('#example').dataTable( {
                "oLanguage": {
                    "sSearch": "Search all columns:"
                }
            } );
            
            /* Add a select menu for each TH element in the table footer */
            $("tfoot th").each( function ( i ) {
                this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
                $('select', this).change( function () {
                    oTable.fnFilter( $(this).val(), i );
                } );
            } );
        } );
    </script>
    
    <div id="demo">
    
        <!-- table Starts from here -->        
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
            
            <thead>
                <tr>
                    <!-- header of the table -->
                    <apex:repeat value="{!fieldLabel}" var="i">
                        <th>{!i}</th>  
                    </apex:repeat> 
                </tr>
            </thead>
    
            <!-- content of the table -->
            <tbody>  
                <apex:repeat value="{!listOfRecords}" var="item">
                    <tr class="gradeX">
                        
                        <!-- coloumns -->
                        <apex:repeat value="{!fieldLabel}" var="label">
                        <td><apex:outPutText value="{!item[label]}"/></td>
                        </apex:repeat>
                    </tr> 
                </apex:repeat>
            </tbody>
            
            <!-- picklist of searching for particular column -->
            <tfoot>
                <tr>
                <apex:repeat value="{!fieldLabel}" var="label">
                    <th></th>
                </apex:repeat>
                </tr>
            </tfoot>
         </table>
    </div>
</apex:component>