templates/CRM/common/jsortable.tpl

   1 {*
   2  +--------------------------------------------------------------------+
   3  | Copyright CiviCRM LLC. All rights reserved.                        |
   4  |                                                                    |
   5  | This work is published under the GNU AGPLv3 license with some      |
   6  | permitted exceptions and without any warranty. For full license    |
   7  | and copyright information, see https://civicrm.org/licensing       |
   8  +--------------------------------------------------------------------+
   9 *}
  10 {literal}
  11 <script type="text/javascript">
  12   CRM.$(function($) {
  13
  14     function getElementClass(element) {
  15       return $(element).attr('class') || '';
  16     }
  17
  18     // fetch the occurrence of element
  19     function getRowId(row, str) {
  20       var optionId;
  21       $.each(row, function(i, n) {
  22         if (str === $(n).attr('class')) {
  23           optionId = i;
  24         }
  25       });
  26       return optionId;
  27     }
  28
  29     // for date sorting see http://wiki.civicrm.org/confluence/display/CRMDOC/Sorting+Date+Fields+in+dataTables+Widget
  30     var useAjax = {/literal}{$useAjax}{literal},
  31       sourceUrl = '',
  32       useClass  = 'display',
  33       tcount = 1,
  34       tableId = [];
  35
  36     if ( useAjax ) {
  37       {/literal}{if $sourceUrl}sourceUrl = "{$sourceUrl}";{/if}{literal}
  38       useClass = 'pagerDisplay';
  39       tcount = 5;
  40     }
  41
  42     CRM.dataTableCount = CRM.dataTableCount || 1;
  43
  44     // FIXME: Rewriting DOM ids is probably a bad idea, and could be avoided
  45     $('table.' + useClass).not('.dataTable').each(function() {
  46       $(this).attr('id','option' + tcount + CRM.dataTableCount);
  47       tableId.push(CRM.dataTableCount);
  48       CRM.dataTableCount++;
  49     });
  50
  51     $.each(tableId, function(i,n){
  52       var tabId = '#option' + tcount + n;
  53       //get the object of first tr data row.
  54       var tdObject = $(tabId + ' tr:nth(1) td');
  55       var id = -1; var count = 0; var columns=''; var sortColumn = '';
  56       //build columns array for sorting or not sorting
  57       $(tabId + ' th').each( function( ) {
  58         var option = $(this).prop('id').split("_");
  59         option  = ( option.length > 1 ) ? option[1] : option[0];
  60         var stype   = 'numeric';
  61         switch( option ) {
  62           case 'sortable':
  63             sortColumn += '[' + count + ', "asc" ],';
  64             columns += '{"sClass": "'+ getElementClass( this ) +'"},';
  65             break;
  66           case 'date':
  67             stype = 'date';
  68           case 'order':
  69             if ( $(this).attr('class') == 'sortable' ){
  70               sortColumn += '[' + count + ', "asc" ],';
  71             }
  72             var sortId   = getRowId(tdObject, $(this).attr('id') +' hiddenElement' );
  73             columns += '{ "render": function ( data, type, row ) { return "<div style=\'display:none\'>"+ data +"</div>" + row[sortId] ; }, "targets": sortColumn,"bUseRendered": false},';
  74             break;
  75           case 'nosort':
  76             columns += '{ "bSortable": false, "sClass": "'+ getElementClass( this ) +'"},';
  77             break;
  78           case 'currency':
  79             columns += '{ "sType": "currency" },';
  80             break;
  81           case 'link':
  82             columns += '{"sType": "html"},';
  83             break;
  84           default:
  85             if ( $(this).text() ) {
  86               columns += '{"sClass": "'+ getElementClass( this ) +'"},';
  87             } else {
  88               columns += '{ "bSortable": false },';
  89             }
  90             break;
  91         }
  92         count++;
  93       });
  94       // Fixme: this could be done without eval
  95       columns    = columns.substring(0, columns.length - 1 );
  96       sortColumn = sortColumn.substring(0, sortColumn.length - 1 );
  97       eval('sortColumn =[' + sortColumn + ']');
  98       eval('columns =[' + columns + ']');
  99
 100       var noRecordFoundMsg  = {/literal}'{ts escape="js"}None found.{/ts}'{literal};
 101
 102       var oTable;
 103       if ( useAjax ) {
 104         oTable = $(tabId).dataTable({
 105           "iDisplayLength": 25,
 106           "bFilter": false,
 107           "bAutoWidth": false,
 108           "aaSorting": sortColumn,
 109           "aoColumns": columns,
 110           "bProcessing": true,
 111           "bJQueryUI": true,
 112           "asStripClasses": [ "odd-row", "even-row" ],
 113           "sPaginationType": "full_numbers",
 114           "sDom": '<"crm-datatable-pager-top"lfp>rt<"crm-datatable-pager-bottom"ip>',
 115           "bServerSide": true,
 116           "sAjaxSource": sourceUrl,
 117           "oLanguage":{
 118             "sEmptyTable": noRecordFoundMsg,
 119             "sZeroRecords": noRecordFoundMsg
 120           },
 121           "fnServerData": function ( sSource, aoData, fnCallback ) {
 122             $.ajax( {
 123               "dataType": 'json',
 124               "type": "POST",
 125               "url": sSource,
 126               "data": aoData,
 127               "success": fnCallback
 128             });
 129           }
 130         });
 131       } else {
 132         oTable = $(tabId).dataTable({
 133           "aaSorting": sortColumn,
 134           "bPaginate": false,
 135           "bLengthChange": true,
 136           "bFilter": false,
 137           "bInfo": false,
 138           "asStripClasses": [ "odd-row", "even-row" ],
 139           "bAutoWidth": false,
 140           "aoColumns": columns,
 141           "bSort": true,
 142           "sDom": 'ti',
 143           "oLanguage":{
 144             "sEmptyTable": noRecordFoundMsg,
 145             "sZeroRecords": noRecordFoundMsg
 146           }
 147         });
 148       }
 149     });
 150   });
 151
 152   //plugin to sort on currency
 153   cj.fn.dataTableExt.oSort['currency-asc']  = function(a,b) {
 154     var symbol = "{/literal}{$defaultCurrencySymbol}{literal}";
 155     var x = (a == "-") ? 0 : a.replace( symbol, "" );
 156     var y = (b == "-") ? 0 : b.replace( symbol, "" );
 157     x = parseFloat( x );
 158     y = parseFloat( y );
 159     return ((x < y) ? -1 : ((x > y) ?  1 : 0));
 160   };
 161
 162   cj.fn.dataTableExt.oSort['currency-desc'] = function(a,b) {
 163     var symbol = "{/literal}{$defaultCurrencySymbol}{literal}";
 164     var x = (a == "-") ? 0 : a.replace( symbol, "" );
 165     var y = (b == "-") ? 0 : b.replace( symbol, "" );
 166     x = parseFloat( x );
 167     y = parseFloat( y );
 168     return ((x < y) ?  1 : ((x > y) ? -1 : 0));
 169   };
 170 </script>
 171 {/literal}