DataTables

DataTables Examples

HTML

<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<table id="inviteeListTable" class="display" border="0" >         
            <thead>
                <tr>
                <th title="UserName" id="Email" class="header"> Email</th>
                 <th title="ProcessStatus" id="ProcessStatus" class="header">Process Status</th>
                 <th title="Disabled " id="Disabled " class="header">Disabled </th>  
                <th title="ResultStatus" id="ResultStatus" class="header"> Result Status</th>
                <th title="CreatorName" id="CreatorName" class="header">Creator Name</th>
                <th title="UpdaterName" id="UpdaterName" class="header">Updater Name</th>
    
            </tr>
        </thead>
        <tbody>
            
                <tr id='1191' >   
                    <td class="center">[email protected]</td>
                    
                     
	              <td class="center"> <b>Complete</b></td>
                    
                    
                    
                    
                      
                    <td class="center">F</td>
                    
                    
                     
                       
                       
                    
	              <td class="center"> <b>Invalid Email</b></td>
                    
                      
                      <td class="center">07/06/2015 04:37:32 PM EDT</td>
                  
                    <td class="center">[email protected]</td>
                                          

                </tr>
            
                <tr id='1192' >   
                    <td class="center">[email protected]</td>
                    
                     
	              <td class="center"> <b>Complete</b></td>
                    
                    
                   ...

JavaScript

$(document).ready(function() {   
       var oTable = $('#inviteeListTable').DataTable({  
         "bStateSave": true, 
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sScrollX": "100%",
        "bScrollCollapse": true,
       "aoColumnDefs": [
       
        { "aaSorting": [4, "asc"] }
        ]
   }); 


});