Tables & Grids

dataTables

dataTables is a table plugin with many options and free or premium addons.
For more details see plugin's page: datatables.net
To use it, you should include:
components/datatables/media/js/jquery.dataTables.js
components/_mod/datatables/jquery.dataTables.bootstrap.js
To enable or disable pagination buttons such as 'next', 'prev', 'last' and 'first', you should edit components/_mod/datatables/jquery.dataTables.bootstrap.js and modify the part that says //Pagination Buttons

A basic example is as follows:

var myTable = 
 $('#my-table')
 .dataTable({
    /**
    sScrollY: "200px",//enable vertical scrolling
    sScrollX: "100%",
    sScrollXInner: "120%",//enable horizintal scrolling with its content 120% of its container
    bScrollCollapse: true,
    */

    bAutoWidth: false,//for better responsiveness
    aoColumns": [
      { "bSortable": false },
      null, null,null, null, null,
      { "bSortable": false }
    ]
 })

aoColumns is an array containing info and options for each table column and its element count should match the number of columns.
For more information about aoColumns and other options, please see the plugin's page.

If you want to apply horizontal scrolling (sScrollX) on a bordered table (.table-bordered) you can wrap the table inside a .dataTables_borderWrap element first:
```
var myTable = 
 $('#my-table')
 .wrap("<div class='dataTables_borderWrap' />")
 .dataTable({
    //options
 });
```
"buttons" and "select" extensions are also included.
To use "buttons" you should include the following files:
components/datatables.net-buttons/js/dataTables.buttons.js
components/datatables.net-buttons/js/buttons.print.js (for print button)
components/datatables.net-buttons/js/buttons.html5.js (for html5 buttons)
components/datatables.net-buttons/js/buttons.flash.js (for flash buttons)
components/datatables.net-buttons/js/buttons.colVis.js(for column visibility button)

To use "select" you should include the following file:
components/datatables.net-select/js/dataTables.select.js
If you want "html5" buttons to export table data to "PDF" or "Excel", you need extra plugins.
Please see https://datatables.net/extensions/buttons/examples/html5/simple.html for more info.
For an example please see: mustache/app/views/assets/scripts/tables.js
Note the changes dynamically done to make the extensions styling look like Ace.

jqGrid

jqGrid is a table and grid plugin with advanced functionality and many different options
Please make sure you see its page, examples and documentation at: www.trirand.com
You can also a build a custom version depending on your needs: http://www.trirand.com/blog/?page_id=6
To use it, you should include:
components/_mod/jqgrid/ui.jqgrid.css
components/jqGrid/js/jquery.jqGrid.js
Please note that in our demo example, data source is a local static table but you can retrieve data dynamically from server:
mustache/app/views/assets/scripts/jqgrid.js
jqGrid has many options and you can choose a different icon for different buttons, etc.
But sometimes you need to dynamically style buttons, icons, checkboxes using Javascript for example when search dialog is displayed.

If you want to style checkboxes dynamically using Javascript, please note that you shouldn't wrap them inside label or jqGrid plugin will not send your data to server properly:

 //inside colModel we have a checkbox
 /**{name: 'stock', index: 'stock', width:70, editable: true, edittype: 'checkbox',
   editoptions: {value:"Yes:No"}, unformat: aceSwitch},*/
 //aceSwitch is the function which styles the checkbox  
 
 function aceSwitch( cellvalue, options, cell ) {
    setTimeout(function(){
        $(cell) .find('input[type=checkbox]')
          .addClass('ace ace-switch ace-switch-5')
          .after('<span class="lbl"></span>');
    }, 0);
 }

To make the grid responsive, you can use the following code:

 var parent_column = $(grid_selector).closest('[class*="col-"]');
 $(window).on('resize.jqGrid', function () {
     $(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
 })
 //optional: resize on sidebar collapse/expand and container fixed/unfixed
 $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
    if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
       $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
    }
 })