# 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:
  `assets/js/dataTables/jquery.dataTables.js`
  `assets/js/dataTables/jquery.dataTables.bootstrap.js`
- To enable or disable pagination buttons such as 'next', 'prev', 'last' and 'first', you should edit `assets/js/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
       });

- Two extensions "TableTools" and "ColVis" are also included.
  To use them you should include the following files:
  `assets/js/dataTables/extensions/TableTools/js/dataTables.tableTools.js`
  `assets/js/dataTables/extensions/ColVis/js/dataTables.colVis.js`
- 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:
  `assets/css/ui.jqgrid.css`
  `assets/js/jqGrid/jquery.jqGrid.src.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() );
          }
       })