templates/CRM/common/jsortable.tpl

   1 {*
   2  +--------------------------------------------------------------------+
   3  | CiviCRM version 4.3                                                |
   4  +--------------------------------------------------------------------+
   5  | Copyright CiviCRM LLC (c) 2004-2013                                |
   6  +--------------------------------------------------------------------+
   7  | This file is a part of CiviCRM.                                    |
   8  |                                                                    |
   9  | CiviCRM is free software; you can copy, modify, and distribute it  |
  10  | under the terms of the GNU Affero General Public License           |
  11  | Version 3, 19 November 2007 and the CiviCRM Licensing Exception.   |
  12  |                                                                    |
  13  | CiviCRM is distributed in the hope that it will be useful, but     |
  14  | WITHOUT ANY WARRANTY; without even the implied warranty of         |
  15  | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.               |
  16  | See the GNU Affero General Public License for more details.        |
  17  |                                                                    |
  18  | You should have received a copy of the GNU Affero General Public   |
  19  | License and the CiviCRM Licensing Exception along                  |
  20  | with this program; if not, contact CiviCRM LLC                     |
  21  | at info[AT]civicrm[DOT]org. If you have questions about the        |
  22  | GNU Affero General Public License or the licensing of CiviCRM,     |
  23  | see the CiviCRM license FAQ at http://civicrm.org/licensing        |
  24  +--------------------------------------------------------------------+
  25 *}
  26 {literal}
  27 <script type="text/javascript">
  28 cj( function( ) {
  29 // for date sorting see http://wiki.civicrm.org/confluence/display/CRMDOC42/Sorting+Date+Fields+in+dataTables+Widget
  30 var useAjax = {/literal}{if $useAjax}1{else}0{/if}{literal};
  31
  32 var sourceUrl = '';
  33 var useClass  = 'display';
  34
  35 var tcount =1;
  36 if ( useAjax ) {
  37  {/literal}{if isset($sourceUrl)}sourceUrl = "{$sourceUrl}";{/if}{literal}
  38  useClass = 'pagerDisplay';
  39  tcount =5;
  40 }
  41
  42 var tableId = '';
  43 var count   = 1;
  44
  45 //rename id of table with sequence
  46 //and create the object for navigation
  47 cj('table.' + useClass).each(function(){
  48     cj(this).attr('id','option' + tcount + count);
  49     tableId += count + ',';
  50     count++;
  51 });
  52
  53 //remove last comma
  54 tableId = tableId.substring(0, tableId.length - 1 );
  55 eval('tableId =[' + tableId + ']');
  56
  57   cj.each(tableId, function(i,n){
  58     tabId = '#option' + tcount + n;
  59     //get the object of first tr data row.
  60     tdObject = cj(tabId + ' tr:nth(1) td');
  61     var id = -1; var count = 0; var columns=''; var sortColumn = '';
  62     //build columns array for sorting or not sorting
  63     cj(tabId + ' th').each( function( ) {
  64         var option = cj(this).prop('id').split("_");
  65         option  = ( option.length > 1 ) ? option[1] : option[0];
  66         stype   = 'numeric';
  67         switch( option ) {
  68             case 'sortable':
  69                 sortColumn += '[' + count + ', "asc" ],';
  70                 columns += '{"sClass": "'+ getElementClass( this ) +'"},';
  71             break;
  72             case 'date':
  73                 stype = 'date';
  74             case 'order':
  75                 if ( cj(this).attr('class') == 'sortable' ){
  76                     sortColumn += '[' + count + ', "asc" ],';
  77                 }
  78                 sortId   = getRowId(tdObject, cj(this).attr('id') +' hiddenElement' );
  79                 columns += '{ "sType": \'' + stype + '\', "fnRender": function (oObj) { return oObj.aData[' + sortId + ']; },"bUseRendered": false},';
  80             break;
  81             case 'nosort':
  82                 columns += '{ "bSortable": false, "sClass": "'+ getElementClass( this ) +'"},';
  83             break;
  84             case 'currency':
  85                 columns += '{ "sType": "currency" },';
  86             break;
  87             case 'link':
  88                 columns += '{"sType": "html"},';
  89             break;
  90             default:
  91                 if ( cj(this).text() ) {
  92                     columns += '{"sClass": "'+ getElementClass( this ) +'"},';
  93                 } else {
  94                     columns += '{ "bSortable": false },';
  95                 }
  96             break;
  97         }
  98         count++;
  99   });
 100   columns    = columns.substring(0, columns.length - 1 );
 101   sortColumn = sortColumn.substring(0, sortColumn.length - 1 );
 102   eval('sortColumn =[' + sortColumn + ']');
 103   eval('columns =[' + columns + ']');
 104
 105         var currTable = cj(tabId);
 106         if (currTable) {
 107             // contains the dataTables master records
 108             var s = cj(document).dataTableSettings;
 109             if (s != 'undefined') {
 110                 var len = s.length;
 111                 for (var i=0; i < len; i++) {
 112                     // if already exists, remove from the array
 113                     if (s[i].sInstance = tabId) {
 114                         s.splice(i,1);
 115               }
 116               }
 117         }
 118   }
 119
 120     var noRecordFoundMsg  = {/literal}'{ts escape="js"}There are no records.{/ts}'{literal};
 121
 122     oTable = null;
 123     if ( useAjax ) {
 124       oTable = cj(tabId).dataTable({
 125               "bFilter"    : false,
 126               "bAutoWidth" : false,
 127               "aaSorting"  : sortColumn,
 128               "aoColumns"  : columns,
 129               "bProcessing": true,
 130               "bJQueryUI"  : true,
 131               "asStripClasses" : [ "odd-row", "even-row" ],
 132               "sPaginationType": "full_numbers",
 133               "sDom"       : '<"crm-datatable-pager-top"lfp>rt<"crm-datatable-pager-bottom"ip>',
 134               "bServerSide": true,
 135               "sAjaxSource": sourceUrl,
 136               "oLanguage":{"sEmptyTable"  : noRecordFoundMsg,
 137               "sZeroRecords" : noRecordFoundMsg },
 138
 139               {/literal}{if !empty($callBack)}{literal}
 140               "fnDrawCallback": function() { checkSelected(); },
 141               {/literal}{/if}{literal}
 142
 143               "fnServerData": function ( sSource, aoData, fnCallback ) {
 144                 cj.ajax( {
 145                   "dataType": 'json',
 146                   "type": "POST",
 147                   "url": sSource,
 148                   "data": aoData,
 149                   "success": fnCallback
 150                 });
 151               }
 152          });
 153     } else {
 154       oTable = cj(tabId).dataTable({
 155                 "aaSorting"    : sortColumn,
 156                 "bPaginate"    : false,
 157                 "bLengthChange": true,
 158                 "bFilter"      : false,
 159                 "bInfo"        : false,
 160                 "asStripClasses" : [ "odd-row", "even-row" ],
 161                 "bAutoWidth"   : false,
 162                 "aoColumns"   : columns,
 163             "oLanguage":{"sEmptyTable"  : noRecordFoundMsg,
 164                          "sZeroRecords" : noRecordFoundMsg }
 165               });
 166     }
 167     var object;
 168
 169     if ( !useAjax ) {
 170     cj('a.action-item').click( function(){
 171         object = cj(this);
 172         cj('table.display').one( 'mouseover', function() {
 173             var nNodes     = oTable.fnGetNodes( );
 174             var tdSelected = cj(object).closest('td');
 175             var closestEle = cj(object).closest('tr').attr('id');
 176             cj.each( nNodes, function(i,n) {
 177                 //operation on selected row element.
 178                 if ( closestEle == n.id ){
 179                     var col = 0;
 180                     cj('tr#' + closestEle + ' td:not(.hiddenElement)').each( function() {
 181                         if ( tdSelected.get(0) !== cj(this).get(0)  ){
 182                             oTable.fnUpdate( cj(this).html() , i, col );
 183                         }
 184                         col++;
 185                     });
 186                 }
 187             });
 188         });
 189     });
 190     }
 191
 192     });
 193 });
 194
 195 function getElementClass( element ) {
 196 if( cj(element).attr('class') )   return cj(element).attr('class');
 197 return '';
 198 }
 199
 200 //function to fetch the occurence of element
 201 function getRowId(row,str){
 202  cj.each( row, function(i, n) {
 203     if( str === cj(n).attr('class') ) {
 204         optionId = i;
 205     }
 206  });
 207 return optionId;
 208 }
 209
 210 //plugin to sort on currency
 211 var symbol = "{/literal}{$config->defaultCurrencySymbol($config->defaultSymbol)}{literal}";
 212 cj.fn.dataTableExt.oSort['currency-asc']  = function(a,b) {
 213   var x = (a == "-") ? 0 : a.replace( symbol, "" );
 214   var y = (b == "-") ? 0 : b.replace( symbol, "" );
 215   x = parseFloat( x );
 216   y = parseFloat( y );
 217   return ((x < y) ? -1 : ((x > y) ?  1 : 0));
 218 };
 219
 220 cj.fn.dataTableExt.oSort['currency-desc'] = function(a,b) {
 221   var x = (a == "-") ? 0 : a.replace( symbol, "" );
 222   var y = (b == "-") ? 0 : b.replace( symbol, "" );
 223   x = parseFloat( x );
 224   y = parseFloat( y );
 225   return ((x < y) ?  1 : ((x > y) ? -1 : 0));
 226 };
 227 </script>
 228 {/literal}