|
|
@@ -422,185 +422,178 @@ var TableWithCheckbox = function () {
|
|
|
|
|
|
|
|
|
var tableWithCheckboxAjax = function () {
|
|
|
- //var arrayForRows = [];
|
|
|
- var initTableCheckboxAjax = function (tableClass, columns, order, extraParams, arrayForRows) {
|
|
|
- var table = $(tableClass);
|
|
|
-
|
|
|
- /* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */
|
|
|
- $.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-xlarge input-inline";
|
|
|
- /* Set tabletools buttons and button container */
|
|
|
-
|
|
|
-
|
|
|
- var oTable = table.dataTable({
|
|
|
- "processing": true,
|
|
|
- "serverSide": true,
|
|
|
- "ajax": {
|
|
|
- "url": $(tableClass).data('source'),
|
|
|
- "data": function ( d ) {
|
|
|
- d.busqueda = $(tableClass).closest('.dataTables_wrapper').find('input[type="search"]').val();
|
|
|
- // son los parametros custom de cada tabla, se envia el obj.
|
|
|
- for(var param in extraParams){
|
|
|
- d[param] = extraParams[param];
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- "drawCallback": function( settings ) {
|
|
|
- arrayForRows.length = 0;
|
|
|
- },
|
|
|
- 'columns': columns,
|
|
|
- 'columnDefs': [{
|
|
|
- 'targets': 0,
|
|
|
- 'searchable':false,
|
|
|
- 'orderable':false,
|
|
|
- 'className': 'dt-body-center',
|
|
|
- 'render': function (data, type, full, meta) {
|
|
|
- return '<input type="checkbox" name="id[]">';
|
|
|
- }
|
|
|
- }],
|
|
|
- "language": {
|
|
|
- "aria": {
|
|
|
- "sortAscending": ": activate to sort column ascending",
|
|
|
- "sortDescending": ": activate to sort column descending"
|
|
|
- },
|
|
|
- "sProcessing": "Cargando...",
|
|
|
- "emptyTable": "No hay informacion en la tabla",
|
|
|
- "info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
|
|
|
- "infoEmpty": "No se encontraron coincidencias",
|
|
|
- "infoFiltered": "(filtrado un total de _MAX_ registros)",
|
|
|
- "lengthMenu": "Mostrar _MENU_ registros",
|
|
|
- "search": "Buscar:",
|
|
|
- "zeroRecords": "No se encontraron coincidencias",
|
|
|
- "paginate": {
|
|
|
- "sPrevious": "Ant",
|
|
|
- "sNext": "Sig"
|
|
|
- }
|
|
|
- },
|
|
|
- 'order': [order, 'asc'],
|
|
|
- "rowCallback": function(row, data, dataIndex){
|
|
|
- // Get row ID
|
|
|
- var rowId = data[0];
|
|
|
-
|
|
|
- // If row ID is in the list of selected row IDs
|
|
|
- if($.inArray(rowId, arrayForRows) !== -1){
|
|
|
- $(row).find('input[type="checkbox"]').prop('checked', true);
|
|
|
- $(row).addClass('selected');
|
|
|
- }
|
|
|
- },
|
|
|
- "lengthMenu": [
|
|
|
- [20, 50, 75, 100, -1],
|
|
|
- [20, 50, 75, 100, "Todos"] // change per page values here
|
|
|
- ],
|
|
|
- // set the initial value
|
|
|
- "pageLength": 20,
|
|
|
- "dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>" // horizobtal scrollable datatable
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- var tableWrapper = $('.tableadvanced_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
|
|
|
-
|
|
|
- tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
|
|
|
-
|
|
|
-
|
|
|
- var table = $(tableClass).DataTable();
|
|
|
- // Handle click on checkbox
|
|
|
- $(tableClass + ' tbody').on('click', 'input[type="checkbox"]', function(e){
|
|
|
- var $row = $(this).closest('tr');
|
|
|
-
|
|
|
- // Get row data
|
|
|
- var data = table.row($row).data();
|
|
|
-
|
|
|
- // Get row ID
|
|
|
- // var rowId = data[0];
|
|
|
- var rowId = $row.attr('id').substring($row.attr('id').indexOf('_') + 1, $row.attr('id').length);
|
|
|
- // Determine whether row ID is in the list of selected row IDs
|
|
|
- var index = $.inArray(rowId, arrayForRows);
|
|
|
-
|
|
|
- // If checkbox is checked and row ID is not in list of selected row IDs
|
|
|
- if(this.checked && index === -1){
|
|
|
- arrayForRows.push(rowId);
|
|
|
-
|
|
|
- // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
|
|
|
- } else if (!this.checked && index !== -1){
|
|
|
- arrayForRows.splice(index, 1);
|
|
|
- }
|
|
|
-
|
|
|
- if(this.checked){
|
|
|
- $row.addClass('selected');
|
|
|
- //$row.css('background-color', '#34495E');
|
|
|
- } else {
|
|
|
- //$row.css('background-color', '#F9F9F9');
|
|
|
- $row.removeClass('selected');
|
|
|
- }
|
|
|
+ //var arrayForRows = [];
|
|
|
+ var initTableCheckboxAjax = function (tableClass, columns, order, extraParams, arrayForRows) {
|
|
|
+ var table = $(tableClass);
|
|
|
+
|
|
|
+ /* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */
|
|
|
+ $.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-xlarge input-inline";
|
|
|
+ /* Set tabletools buttons and button container */
|
|
|
+ var oTable = table.dataTable({
|
|
|
+ "processing": true,
|
|
|
+ "serverSide": true,
|
|
|
+ "ajax": {
|
|
|
+ "url": $(tableClass).data('source'),
|
|
|
+ "data": function ( d ) {
|
|
|
+ d.busqueda = $(tableClass).closest('.dataTables_wrapper').find('input[type="search"]').val();
|
|
|
+ d.pointsale = $('#pointsale').val();
|
|
|
+ // son los parametros custom de cada tabla, se envia el obj.
|
|
|
+ for(var param in extraParams){
|
|
|
+ d[param] = extraParams[param];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "drawCallback": function( settings ) {
|
|
|
+ arrayForRows.length = 0;
|
|
|
+ },
|
|
|
+ 'columns': columns,
|
|
|
+ 'columnDefs': [{
|
|
|
+ 'targets': 0,
|
|
|
+ 'searchable':false,
|
|
|
+ 'orderable':false,
|
|
|
+ 'className': 'dt-body-center',
|
|
|
+ 'render': function (data, type, full, meta) {
|
|
|
+ return '<input type="checkbox" name="id[]">';
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ "language": {
|
|
|
+ "aria": {
|
|
|
+ "sortAscending": ": activate to sort column ascending",
|
|
|
+ "sortDescending": ": activate to sort column descending"
|
|
|
+ },
|
|
|
+ "sProcessing": "Cargando...",
|
|
|
+ "emptyTable": "No hay informacion en la tabla",
|
|
|
+ "info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
|
|
|
+ "infoEmpty": "No se encontraron coincidencias",
|
|
|
+ "infoFiltered": "(filtrado un total de _MAX_ registros)",
|
|
|
+ "lengthMenu": "Mostrar _MENU_ registros",
|
|
|
+ "search": "Buscar:",
|
|
|
+ "zeroRecords": "No se encontraron coincidencias",
|
|
|
+ "paginate": {
|
|
|
+ "sPrevious": "Ant",
|
|
|
+ "sNext": "Sig"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 'order': [order, 'asc'],
|
|
|
+ "rowCallback": function(row, data, dataIndex) {
|
|
|
+ // Get row ID
|
|
|
+ var rowId = data[0];
|
|
|
+ // If row ID is in the list of selected row IDs
|
|
|
+ if($.inArray(rowId, arrayForRows) !== -1){
|
|
|
+ $(row).find('input[type="checkbox"]').prop('checked', true);
|
|
|
+ $(row).addClass('selected');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "lengthMenu": [
|
|
|
+ [20, 50, 75, 100, -1],
|
|
|
+ [20, 50, 75, 100, "Todos"] // change per page values here
|
|
|
+ ],
|
|
|
+ // set the initial value
|
|
|
+ "pageLength": 20,
|
|
|
+ "dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>" // horizobtal scrollable datatable
|
|
|
+ });
|
|
|
|
|
|
- // Update state of "Select all" control
|
|
|
- updateDataTableSelectAllCtrl(table);
|
|
|
+ var tableWrapper = $('.tableadvanced_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
|
|
|
+ tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
|
|
|
+
|
|
|
+ var table = $(tableClass).DataTable();
|
|
|
+ // Handle click on checkbox
|
|
|
+ $(tableClass + ' tbody').on('click', 'input[type="checkbox"]', function(e){
|
|
|
+ var $row = $(this).closest('tr');
|
|
|
+
|
|
|
+ // Get row data
|
|
|
+ var data = table.row($row).data();
|
|
|
+
|
|
|
+ // Get row ID
|
|
|
+ // var rowId = data[0];
|
|
|
+ var rowId = $row.attr('id').substring($row.attr('id').indexOf('_') + 1, $row.attr('id').length);
|
|
|
+ // Determine whether row ID is in the list of selected row IDs
|
|
|
+ var index = $.inArray(rowId, arrayForRows);
|
|
|
+
|
|
|
+ // If checkbox is checked and row ID is not in list of selected row IDs
|
|
|
+ if(this.checked && index === -1) {
|
|
|
+ arrayForRows.push(rowId);
|
|
|
+ // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
|
|
|
+ } else if (!this.checked && index !== -1) {
|
|
|
+ arrayForRows.splice(index, 1);
|
|
|
+ }
|
|
|
|
|
|
- // Prevent click event from propagating to parent
|
|
|
- e.stopPropagation();
|
|
|
- });
|
|
|
+ if(this.checked){
|
|
|
+ $row.addClass('selected');
|
|
|
+ //$row.css('background-color', '#34495E');
|
|
|
+ } else {
|
|
|
+ //$row.css('background-color', '#F9F9F9');
|
|
|
+ $row.removeClass('selected');
|
|
|
+ }
|
|
|
|
|
|
- // Handle click on table cells with checkboxes
|
|
|
- $(tableClass).on('click', 'tbody td, thead th:first-child', function(e){
|
|
|
- $(this).parent().find('input[type="checkbox"]').trigger('click');
|
|
|
- });
|
|
|
+ // Update state of "Select all" control
|
|
|
+ updateDataTableSelectAllCtrl(table);
|
|
|
|
|
|
- // Handle click on "Select all" control
|
|
|
- $('thead input[name="select_all"]', table.table().container()).on('click', function(e){
|
|
|
- if(this.checked){
|
|
|
- $(tableClass + ' tbody input[type="checkbox"]:not(:checked)').trigger('click');
|
|
|
- } else {
|
|
|
- $(tableClass + ' tbody input[type="checkbox"]:checked').trigger('click');
|
|
|
- }
|
|
|
+ // Prevent click event from propagating to parent
|
|
|
+ e.stopPropagation();
|
|
|
+ });
|
|
|
|
|
|
- // Prevent click event from propagating to parent
|
|
|
- e.stopPropagation();
|
|
|
- });
|
|
|
+ // Handle click on table cells with checkboxes
|
|
|
+ $(tableClass).on('click', 'tbody td, thead th:first-child', function(e){
|
|
|
+ $(this).parent().find('input[type="checkbox"]').trigger('click');
|
|
|
+ });
|
|
|
|
|
|
- // Handle table draw event
|
|
|
- table.on('draw', function(){
|
|
|
- // Update state of "Select all" control
|
|
|
- updateDataTableSelectAllCtrl(table);
|
|
|
- });
|
|
|
+ // Handle click on "Select all" control
|
|
|
+ $('thead input[name="select_all"]', table.table().container()).on('click', function(e){
|
|
|
+ if(this.checked){
|
|
|
+ $(tableClass + ' tbody input[type="checkbox"]:not(:checked)').trigger('click');
|
|
|
+ } else {
|
|
|
+ $(tableClass + ' tbody input[type="checkbox"]:checked').trigger('click');
|
|
|
+ }
|
|
|
|
|
|
- function updateDataTableSelectAllCtrl(table){
|
|
|
- var $table = table.table().node();
|
|
|
- var $chkbox_all = $('tbody input[type="checkbox"]', $table);
|
|
|
- var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
|
|
|
- var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
|
|
|
-
|
|
|
- // If none of the checkboxes are checked
|
|
|
- if($chkbox_checked.length === 0){
|
|
|
- chkbox_select_all.checked = false;
|
|
|
- if('indeterminate' in chkbox_select_all){
|
|
|
- chkbox_select_all.indeterminate = false;
|
|
|
- }
|
|
|
-
|
|
|
- // If all of the checkboxes are checked
|
|
|
- } else if ($chkbox_checked.length === $chkbox_all.length){
|
|
|
- chkbox_select_all.checked = true;
|
|
|
- if('indeterminate' in chkbox_select_all){
|
|
|
- chkbox_select_all.indeterminate = false;
|
|
|
- }
|
|
|
-
|
|
|
- // If some of the checkboxes are checked
|
|
|
- } else {
|
|
|
- chkbox_select_all.checked = true;
|
|
|
- if('indeterminate' in chkbox_select_all){
|
|
|
- chkbox_select_all.indeterminate = true;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // Prevent click event from propagating to parent
|
|
|
+ e.stopPropagation();
|
|
|
+ });
|
|
|
+
|
|
|
+ // Handle table draw event
|
|
|
+ table.on('draw', function(){
|
|
|
+ // Update state of "Select all" control
|
|
|
+ updateDataTableSelectAllCtrl(table);
|
|
|
+ });
|
|
|
+
|
|
|
+ function updateDataTableSelectAllCtrl(table){
|
|
|
+ var $table = table.table().node();
|
|
|
+ var $chkbox_all = $('tbody input[type="checkbox"]', $table);
|
|
|
+ var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
|
|
|
+ var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
|
|
|
+
|
|
|
+ // If none of the checkboxes are checked
|
|
|
+ if($chkbox_checked.length === 0){
|
|
|
+ chkbox_select_all.checked = false;
|
|
|
+ if('indeterminate' in chkbox_select_all){
|
|
|
+ chkbox_select_all.indeterminate = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // If all of the checkboxes are checked
|
|
|
+ } else if ($chkbox_checked.length === $chkbox_all.length){
|
|
|
+ chkbox_select_all.checked = true;
|
|
|
+ if('indeterminate' in chkbox_select_all){
|
|
|
+ chkbox_select_all.indeterminate = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // If some of the checkboxes are checked
|
|
|
+ } else {
|
|
|
+ chkbox_select_all.checked = true;
|
|
|
+ if('indeterminate' in chkbox_select_all){
|
|
|
+ chkbox_select_all.indeterminate = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- return {
|
|
|
- //main function to initiate the module
|
|
|
- init: function (tableClass, columns, order, data, arrayForRows) {
|
|
|
- if (!$().dataTable) {
|
|
|
- return;
|
|
|
- }
|
|
|
- initTableCheckboxAjax(tableClass, columns, order, data, arrayForRows);
|
|
|
-
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ //main function to initiate the module
|
|
|
+ init: function (tableClass, columns, order, data, arrayForRows) {
|
|
|
+ if (!$().dataTable) {
|
|
|
+ return;
|
|
|
}
|
|
|
- };
|
|
|
+ initTableCheckboxAjax(tableClass, columns, order, data, arrayForRows);
|
|
|
+ }
|
|
|
+ };
|
|
|
}();
|
|
|
|
|
|
|