Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | /*** |
| 2 | Wrapper/Helper Class for datagrid based on jQuery Datatable Plugin |
||
| 3 | ***/ |
||
| 4 | var Datatable = function() { |
||
| 5 | |||
| 6 | var tableOptions; // main options |
||
| 7 | var dataTable; // datatable object |
||
| 8 | var table; // actual table jquery object |
||
| 9 | var tableContainer; // actual table container object |
||
| 10 | var tableWrapper; // actual table wrapper jquery object |
||
| 11 | var tableInitialized = false; |
||
| 12 | var ajaxParams = {}; // set filter mode |
||
| 13 | var the; |
||
| 14 | |||
| 15 | var countSelectedRecords = function() { |
||
| 16 | var selected = $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).size(); |
||
| 17 | var text = tableOptions.dataTable.language.metronicGroupActions; |
||
| 18 | if (selected > 0) { |
||
| 19 | $('.table-group-actions > span', tableWrapper).text(text.replace("_TOTAL_", selected)); |
||
| 20 | } else { |
||
| 21 | $('.table-group-actions > span', tableWrapper).text(""); |
||
| 22 | } |
||
| 23 | }; |
||
| 24 | |||
| 25 | return { |
||
| 26 | |||
| 27 | //main function to initiate the module |
||
| 28 | init: function(options) { |
||
| 29 | |||
| 30 | if (!$().dataTable) { |
||
| 31 | return; |
||
| 32 | } |
||
| 33 | |||
| 34 | the = this; |
||
| 35 | |||
| 36 | // default settings |
||
| 37 | options = $.extend(true, { |
||
| 38 | src: "", // actual table |
||
| 39 | filterApplyAction: "filter", |
||
| 40 | filterCancelAction: "filter_cancel", |
||
| 41 | resetGroupActionInputOnSuccess: true, |
||
| 42 | loadingMessage: 'Loading...', |
||
| 43 | dataTable: { |
||
| 44 | "dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r><'table-scrollable't><'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>", // datatable layout |
||
| 45 | "pageLength": 10, // default records per page |
||
| 46 | "language": { // language settings |
||
| 47 | // metronic spesific |
||
| 48 | "metronicGroupActions": "_TOTAL_ records selected: ", |
||
| 49 | "metronicAjaxRequestGeneralError": "Could not complete request. Please check your internet connection", |
||
| 50 | |||
| 51 | // data tables spesific |
||
| 52 | "lengthMenu": "<span class='seperator'>|</span>View _MENU_ records", |
||
| 53 | "info": "<span class='seperator'>|</span>Found total _TOTAL_ records", |
||
| 54 | "infoEmpty": "No records found to show", |
||
| 55 | "emptyTable": "No data available in table", |
||
| 56 | "zeroRecords": "No matching records found", |
||
| 57 | "paginate": { |
||
| 58 | "previous": "Prev", |
||
| 59 | "next": "Next", |
||
| 60 | "last": "Last", |
||
| 61 | "first": "First", |
||
| 62 | "page": "Page", |
||
| 63 | "pageOf": "of" |
||
| 64 | } |
||
| 65 | }, |
||
| 66 | |||
| 67 | "orderCellsTop": true, |
||
| 68 | "columnDefs": [{ // define columns sorting options(by default all columns are sortable extept the first checkbox column) |
||
| 69 | 'orderable': false, |
||
| 70 | 'targets': [0] |
||
| 71 | }], |
||
| 72 | |||
| 73 | "pagingType": "bootstrap_extended", // pagination type(bootstrap, bootstrap_full_number or bootstrap_extended) |
||
| 74 | "autoWidth": false, // disable fixed width and enable fluid table |
||
| 75 | "processing": false, // enable/disable display message box on record load |
||
| 76 | "serverSide": true, // enable/disable server side ajax loading |
||
| 77 | |||
| 78 | "ajax": { // define ajax settings |
||
| 79 | "url": "", // ajax URL |
||
| 80 | "type": "POST", // request type |
||
| 81 | "timeout": 20000, |
||
| 82 | "data": function(data) { // add request parameters before submit |
||
| 83 | $.each(ajaxParams, function(key, value) { |
||
| 84 | data[key] = value; |
||
| 85 | }); |
||
| 86 | Metronic.blockUI({ |
||
| 87 | message: tableOptions.loadingMessage, |
||
| 88 | target: tableContainer, |
||
| 89 | overlayColor: 'none', |
||
| 90 | cenrerY: true, |
||
| 91 | boxed: true |
||
| 92 | }); |
||
| 93 | }, |
||
| 94 | "dataSrc": function(res) { // Manipulate the data returned from the server |
||
| 95 | if (res.customActionMessage) { |
||
| 96 | Metronic.alert({ |
||
| 97 | type: (res.customActionStatus == 'OK' ? 'success' : 'danger'), |
||
| 98 | icon: (res.customActionStatus == 'OK' ? 'check' : 'warning'), |
||
| 99 | message: res.customActionMessage, |
||
| 100 | container: tableWrapper, |
||
| 101 | place: 'prepend' |
||
| 102 | }); |
||
| 103 | } |
||
| 104 | |||
| 105 | if (res.customActionStatus) { |
||
| 106 | if (tableOptions.resetGroupActionInputOnSuccess) { |
||
| 107 | $('.table-group-action-input', tableWrapper).val(""); |
||
| 108 | } |
||
| 109 | } |
||
| 110 | |||
| 111 | if ($('.group-checkable', table).size() === 1) { |
||
| 112 | $('.group-checkable', table).attr("checked", false); |
||
| 113 | $.uniform.update($('.group-checkable', table)); |
||
| 114 | } |
||
| 115 | |||
| 116 | if (tableOptions.onSuccess) { |
||
| 117 | tableOptions.onSuccess.call(undefined, the); |
||
| 118 | } |
||
| 119 | |||
| 120 | Metronic.unblockUI(tableContainer); |
||
| 121 | |||
| 122 | return res.data; |
||
| 123 | }, |
||
| 124 | "error": function() { // handle general connection errors |
||
| 125 | if (tableOptions.onError) { |
||
| 126 | tableOptions.onError.call(undefined, the); |
||
| 127 | } |
||
| 128 | |||
| 129 | Metronic.alert({ |
||
| 130 | type: 'danger', |
||
| 131 | icon: 'warning', |
||
| 132 | message: tableOptions.dataTable.language.metronicAjaxRequestGeneralError, |
||
| 133 | container: tableWrapper, |
||
| 134 | place: 'prepend' |
||
| 135 | }); |
||
| 136 | |||
| 137 | Metronic.unblockUI(tableContainer); |
||
| 138 | } |
||
| 139 | }, |
||
| 140 | |||
| 141 | "drawCallback": function(oSettings) { // run some code on table redraw |
||
| 142 | if (tableInitialized === false) { // check if table has been initialized |
||
| 143 | tableInitialized = true; // set table initialized |
||
| 144 | table.show(); // display table |
||
| 145 | } |
||
| 146 | Metronic.initUniform($('input[type="checkbox"]', table)); // reinitialize uniform checkboxes on each table reload |
||
| 147 | countSelectedRecords(); // reset selected records indicator |
||
| 148 | |||
| 149 | // callback for ajax data load |
||
| 150 | if (tableOptions.onDataLoad) { |
||
| 151 | tableOptions.onDataLoad.call(undefined, the); |
||
| 152 | } |
||
| 153 | } |
||
| 154 | } |
||
| 155 | }, options); |
||
| 156 | |||
| 157 | tableOptions = options; |
||
| 158 | |||
| 159 | // create table's jquery object |
||
| 160 | table = $(options.src); |
||
| 161 | tableContainer = table.parents(".table-container"); |
||
| 162 | |||
| 163 | // apply the special class that used to restyle the default datatable |
||
| 164 | var tmp = $.fn.dataTableExt.oStdClasses; |
||
| 165 | |||
| 166 | $.fn.dataTableExt.oStdClasses.sWrapper = $.fn.dataTableExt.oStdClasses.sWrapper + " dataTables_extended_wrapper"; |
||
| 167 | $.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-small input-sm input-inline"; |
||
| 168 | $.fn.dataTableExt.oStdClasses.sLengthSelect = "form-control input-xsmall input-sm input-inline"; |
||
| 169 | |||
| 170 | // initialize a datatable |
||
| 171 | dataTable = table.DataTable(options.dataTable); |
||
| 172 | |||
| 173 | // revert back to default |
||
| 174 | $.fn.dataTableExt.oStdClasses.sWrapper = tmp.sWrapper; |
||
| 175 | $.fn.dataTableExt.oStdClasses.sFilterInput = tmp.sFilterInput; |
||
| 176 | $.fn.dataTableExt.oStdClasses.sLengthSelect = tmp.sLengthSelect; |
||
| 177 | |||
| 178 | // get table wrapper |
||
| 179 | tableWrapper = table.parents('.dataTables_wrapper'); |
||
| 180 | |||
| 181 | // build table group actions panel |
||
| 182 | if ($('.table-actions-wrapper', tableContainer).size() === 1) { |
||
| 183 | $('.table-group-actions', tableWrapper).html($('.table-actions-wrapper', tableContainer).html()); // place the panel inside the wrapper |
||
| 184 | $('.table-actions-wrapper', tableContainer).remove(); // remove the template container |
||
| 185 | } |
||
| 186 | // handle group checkboxes check/uncheck |
||
| 187 | $('.group-checkable', table).change(function() { |
||
| 188 | var set = $('tbody > tr > td:nth-child(1) input[type="checkbox"]', table); |
||
| 189 | var checked = $(this).is(":checked"); |
||
| 190 | $(set).each(function() { |
||
| 191 | $(this).attr("checked", checked); |
||
| 192 | }); |
||
| 193 | $.uniform.update(set); |
||
| 194 | countSelectedRecords(); |
||
| 195 | }); |
||
| 196 | |||
| 197 | // handle row's checkbox click |
||
| 198 | table.on('change', 'tbody > tr > td:nth-child(1) input[type="checkbox"]', function() { |
||
| 199 | countSelectedRecords(); |
||
| 200 | }); |
||
| 201 | |||
| 202 | // handle filter submit button click |
||
| 203 | table.on('click', '.filter-submit', function(e) { |
||
| 204 | e.preventDefault(); |
||
| 205 | the.submitFilter(); |
||
| 206 | }); |
||
| 207 | |||
| 208 | // handle filter cancel button click |
||
| 209 | table.on('click', '.filter-cancel', function(e) { |
||
| 210 | e.preventDefault(); |
||
| 211 | the.resetFilter(); |
||
| 212 | }); |
||
| 213 | }, |
||
| 214 | |||
| 215 | submitFilter: function() { |
||
| 216 | the.setAjaxParam("action", tableOptions.filterApplyAction); |
||
| 217 | |||
| 218 | // get all typeable inputs |
||
| 219 | $('textarea.form-filter, select.form-filter, input.form-filter:not([type="radio"],[type="checkbox"])', table).each(function() { |
||
| 220 | the.setAjaxParam($(this).attr("name"), $(this).val()); |
||
| 221 | }); |
||
| 222 | |||
| 223 | // get all checkboxes |
||
| 224 | $('input.form-filter[type="checkbox"]:checked', table).each(function() { |
||
| 225 | the.addAjaxParam($(this).attr("name"), $(this).val()); |
||
| 226 | }); |
||
| 227 | |||
| 228 | // get all radio buttons |
||
| 229 | $('input.form-filter[type="radio"]:checked', table).each(function() { |
||
| 230 | the.setAjaxParam($(this).attr("name"), $(this).val()); |
||
| 231 | }); |
||
| 232 | |||
| 233 | dataTable.ajax.reload(); |
||
| 234 | }, |
||
| 235 | |||
| 236 | resetFilter: function() { |
||
| 237 | $('textarea.form-filter, select.form-filter, input.form-filter', table).each(function() { |
||
| 238 | $(this).val(""); |
||
| 239 | }); |
||
| 240 | $('input.form-filter[type="checkbox"]', table).each(function() { |
||
| 241 | $(this).attr("checked", false); |
||
| 242 | }); |
||
| 243 | the.clearAjaxParams(); |
||
| 244 | the.addAjaxParam("action", tableOptions.filterCancelAction); |
||
| 245 | dataTable.ajax.reload(); |
||
| 246 | }, |
||
| 247 | |||
| 248 | getSelectedRowsCount: function() { |
||
| 249 | return $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).size(); |
||
| 250 | }, |
||
| 251 | |||
| 252 | getSelectedRows: function() { |
||
| 253 | var rows = []; |
||
| 254 | $('tbody > tr > td:nth-child(1) input[type="checkbox"]:checked', table).each(function() { |
||
| 255 | rows.push($(this).val()); |
||
| 256 | }); |
||
| 257 | |||
| 258 | return rows; |
||
| 259 | }, |
||
| 260 | |||
| 261 | setAjaxParam: function(name, value) { |
||
| 262 | ajaxParams[name] = value; |
||
| 263 | }, |
||
| 264 | |||
| 265 | addAjaxParam: function(name, value) { |
||
| 266 | if (!ajaxParams[name]) { |
||
| 267 | ajaxParams[name] = []; |
||
| 268 | } |
||
| 269 | |||
| 270 | skip = false; |
||
| 271 | for (var i = 0; i < (ajaxParams[name]).length; i++) { // check for duplicates |
||
| 272 | if (ajaxParams[name][i] === value) { |
||
| 273 | skip = true; |
||
| 274 | } |
||
| 275 | } |
||
| 276 | |||
| 277 | if (skip === false) { |
||
| 278 | ajaxParams[name].push(value); |
||
| 279 | } |
||
| 280 | }, |
||
| 281 | |||
| 282 | clearAjaxParams: function(name, value) { |
||
| 283 | ajaxParams = {}; |
||
| 284 | }, |
||
| 285 | |||
| 286 | getDataTable: function() { |
||
| 287 | return dataTable; |
||
| 288 | }, |
||
| 289 | |||
| 290 | getTableWrapper: function() { |
||
| 291 | return tableWrapper; |
||
| 292 | }, |
||
| 293 | |||
| 294 | gettableContainer: function() { |
||
| 295 | return tableContainer; |
||
| 296 | }, |
||
| 297 | |||
| 298 | getTable: function() { |
||
| 299 | return table; |
||
| 300 | } |
||
| 301 | |||
| 302 | }; |
||
| 303 | |||
| 304 | }; |