Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | var TableAjax = function () { |
| 2 | |||
| 3 | var initPickers = function () { |
||
| 4 | //init date pickers |
||
| 5 | $('.date-picker').datepicker({ |
||
| 6 | rtl: Metronic.isRTL(), |
||
| 7 | autoclose: true |
||
| 8 | }); |
||
| 9 | } |
||
| 10 | |||
| 11 | var handleRecords = function () { |
||
| 12 | |||
| 13 | var grid = new Datatable(); |
||
| 14 | |||
| 15 | grid.init({ |
||
| 16 | src: $("#datatable_ajax"), |
||
| 17 | onSuccess: function (grid) { |
||
| 18 | // execute some code after table records loaded |
||
| 19 | }, |
||
| 20 | onError: function (grid) { |
||
| 21 | // execute some code on network or other general error |
||
| 22 | }, |
||
| 23 | onDataLoad: function(grid) { |
||
| 24 | // execute some code on ajax data load |
||
| 25 | }, |
||
| 26 | loadingMessage: 'Loading...', |
||
| 27 | dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options |
||
| 28 | |||
| 29 | // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout |
||
| 30 | // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js). |
||
| 31 | // So when dropdowns used the scrollable div should be removed. |
||
| 32 | //"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>", |
||
| 33 | |||
| 34 | "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie. |
||
| 35 | |||
| 36 | "lengthMenu": [ |
||
| 37 | [10, 20, 50, 100, 150, -1], |
||
| 38 | [10, 20, 50, 100, 150, "All"] // change per page values here |
||
| 39 | ], |
||
| 40 | "pageLength": 10, // default record count per page |
||
| 41 | "ajax": { |
||
| 42 | "url": "demo/table_ajax.php", // ajax source |
||
| 43 | }, |
||
| 44 | "order": [ |
||
| 45 | [1, "asc"] |
||
| 46 | ]// set first column as a default sort by asc |
||
| 47 | } |
||
| 48 | }); |
||
| 49 | |||
| 50 | // handle group actionsubmit button click |
||
| 51 | grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) { |
||
| 52 | e.preventDefault(); |
||
| 53 | var action = $(".table-group-action-input", grid.getTableWrapper()); |
||
| 54 | if (action.val() != "" && grid.getSelectedRowsCount() > 0) { |
||
| 55 | grid.setAjaxParam("customActionType", "group_action"); |
||
| 56 | grid.setAjaxParam("customActionName", action.val()); |
||
| 57 | grid.setAjaxParam("id", grid.getSelectedRows()); |
||
| 58 | grid.getDataTable().ajax.reload(); |
||
| 59 | grid.clearAjaxParams(); |
||
| 60 | } else if (action.val() == "") { |
||
| 61 | Metronic.alert({ |
||
| 62 | type: 'danger', |
||
| 63 | icon: 'warning', |
||
| 64 | message: 'Please select an action', |
||
| 65 | container: grid.getTableWrapper(), |
||
| 66 | place: 'prepend' |
||
| 67 | }); |
||
| 68 | } else if (grid.getSelectedRowsCount() === 0) { |
||
| 69 | Metronic.alert({ |
||
| 70 | type: 'danger', |
||
| 71 | icon: 'warning', |
||
| 72 | message: 'No record selected', |
||
| 73 | container: grid.getTableWrapper(), |
||
| 74 | place: 'prepend' |
||
| 75 | }); |
||
| 76 | } |
||
| 77 | }); |
||
| 78 | } |
||
| 79 | |||
| 80 | return { |
||
| 81 | |||
| 82 | //main function to initiate the module |
||
| 83 | init: function () { |
||
| 84 | |||
| 85 | initPickers(); |
||
| 86 | handleRecords(); |
||
| 87 | } |
||
| 88 | |||
| 89 | }; |
||
| 90 | |||
| 91 | }(); |