templates/js/library/data_table/custom_data_table.js line 1

Open in your IDE?
  1. class CustomDataTable {
  2.     options = {};
  3.     selector = null;
  4.     table = null;
  5.     eventDispatcher = null;
  7.     static EVENTS = {
  8.         ON_TABLE_FILTERED: 'tableFiltered'
  9.     };
  11.     constructor(selector, options = {}) {
  12.         this.selector = selector;
  13.         this.options = {
  14.             dom: 'i lfrtip',   // i = info сверху
  15.             "lengthMenu": [[10, 20, 50, 100, 200, 300, 500, 700, -1], [10, 20, 50, 100, 200, 300, 500, 700, "Все"]],
  16.             language: {
  17.                 url: '/js/vendor/datatables/ru.json'
  18.             },
  19.             drawRowNumbersForColIndex: undefined,
  20.             ...options
  21.         };
  22.         this.eventDispatcher = new EventDispatcher();
  23.     }
  25.     static getOptionsExample() {
  26.         return {
  27.             "lengthMenu": [[10, 20, 50, 100, 200, 300, 500, 700, -1], [10, 20, 50, 100, 200, 300, 500, 700, "Все"]],
  28.             "columnDefs": [ // Columns definitions
  29.                 {
  30.                     "targets": 0,
  31.                     "type": "num",
  32.                     "visible": false,
  33.                 },
  34.                 {
  35.                     "targets": 1,
  36.                     "type": "date-d-m-Y"
  37.                 },
  38.             ],
  39.             drawRowNumbersForColIndex: 0,
  40.             "dropdownFiltersConfig": {
  41.                 "elementsData": [
  42.                     {
  43.                         "columnIndex": 2, //3th column
  44.                         "dropdownId": "departmentDropdown", // Dropdown button ID
  45.                         "badgeId": "departmentBadge", // Badge ID to show filter status (optional)
  46.                         "textForAll": "All" // Text to show when 'all' is selected (optional)
  47.                     },
  48.                 ]
  49.             },
  50.         }
  51.     }
  53.     getAllFilteredTableData() {
  54.         let allData = [];
  55.         this.table.rows({ search: 'applied' }).every((rowIdx) => {
  56.             let row = this.table.row(rowIdx);
  57.             allData.push(row.data());
  58.         });
  59.         return allData;
  60.     }
  62.     downloadCsv(filename = 'data_table_export.csv') {
  63.         const delimiter = ';';
  64.         const rows = [];
  66.         // collect headers and escape
  67.         const headers = [];
  68.         this.table.columns().every((index) => {
  69.             const raw = this.table.column(index).header().innerText;
  70.             const safe = String(raw).replace(/"/g, '""');
  71.             headers.push(`"${safe}"`);
  72.         });
  73.         rows.push(headers.join(delimiter));
  75.         // collect rows (respect search: 'applied')
  76.         let number = 0;
  77.         this.table.rows({ search: 'applied' }).every((rowIdx) => {
  78.             const row = this.table.row(rowIdx);
  79.             const rowData = [];
  81.             row.columns().every((colIdx) => {
  82.                 let cell = row.data()[colIdx];
  83.                 if (this.options.drawRowNumbersForColIndex === colIdx) {
  84.                     cell = ++number;
  85.                 }
  86.                 const raw = cell === null || cell === undefined ? '' : String(cell);
  87.                 const safe = raw.replace(/"/g, '""');
  88.                 rowData.push(`"${safe}"`);
  89.             });
  91.             rows.push(rowData.join(delimiter));
  92.         });
  94.         // Join with CRLF for Windows compatibility and prefix with UTF-8 BOM
  95.         const csvString = '\uFEFF' + rows.join('\r\n');
  97.         const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
  98.         const link = document.createElement('a');
  99.         if (link.download !== undefined) {
  100.             const url = URL.createObjectURL(blob);
  101.             link.setAttribute('href', url);
  102.             link.setAttribute('download', filename);
  103.             link.style.visibility = 'hidden';
  104.             document.body.appendChild(link);
  105.             link.click();
  106.             document.body.removeChild(link);
  107.         }
  108.     }
  110.     initDataTable() {
  111.         let columnDefs = [];
  112.         let dropdownFiltersConfig = {
  113.             elementsData: []
  114.         };
  115.         $(`${this.selector} th`).each(function(index) {
  116.             let hideCol = $(this).is('[data-table-hide-col]');
  117.             let tableType = $(this).data('table-type');
  118.             let optionsItem = {
  119.                 "targets": index,
  120.             };
  121.             if (hideCol) {
  122.                 optionsItem['visible'] = false;
  123.             }
  124.             if (tableType) {
  125.                 optionsItem['type'] = tableType;
  126.             }
  127.             if (Object.keys(optionsItem).length > 1) {
  128.                 columnDefs.push(optionsItem);
  129.             }
  131.             let dropdownFilterConfig_elementsDataItem = {};
  132.             let dropdownId = $(this).data('table-dropdown-id');
  133.             if (dropdownId) {
  134.                 dropdownFilterConfig_elementsDataItem['columnIndex'] = index;
  135.                 dropdownFilterConfig_elementsDataItem['dropdownId'] = dropdownId;
  136.                 let badgeId = $(this).data('table-badge-id');
  137.                 if (badgeId) {
  138.                     dropdownFilterConfig_elementsDataItem['badgeId'] = badgeId;
  139.                 }
  140.                 let textForAll = $(this).data('table-dropdown-text-for-all');
  141.                 if (textForAll) {
  142.                     dropdownFilterConfig_elementsDataItem['textForAll'] = textForAll;
  143.                 }
  144.                 dropdownFiltersConfig.elementsData.push(dropdownFilterConfig_elementsDataItem);
  145.             }
  146.         });
  147.         if (!this.options.columnDefs || this.options.columnDefs.length === 0) {
  148.             console.log(columnDefs)
  149.             this.options.columnDefs = columnDefs;
  150.         }
  151.         if (dropdownFiltersConfig && (!this.options.dropdownFiltersConfig
  152.             || !this.options.dropdownFiltersConfig.elementsData
  153.             || this.options.dropdownFiltersConfig.elementsData.length === 0)) {
  154.             this.options.dropdownFiltersConfig = dropdownFiltersConfig;
  155.         }
  157.         this.table = $(this.selector).DataTable(this.options);
  159.         $(document).ready(() => {
  160.             this.populateDropdowns();
  162.             this.table.on('draw', () => {
  163.                 this.populateDropdowns();
  164.             });
  165.         });
  167.         this.eventDispatcher.addEventListener(CustomDataTable.EVENTS.ON_TABLE_FILTERED, () => {
  168.             if (this.options.drawRowNumbersForColIndex !== null && this.options.drawRowNumbersForColIndex !== undefined) {
  169.                 this.drawRowNumbers();
  170.             }
  171.         });
  173.         return this.table;
  174.     }
  176.     drawRowNumbers() {
  177.         this.table.column(this.options.drawRowNumbersForColIndex, { search: 'applied' }).nodes().each(function(cell, i) {
  178.             cell.innerHTML = i + 1;
  179.         });
  180.     }
  182.     populateDropdowns() {
  183.         if (this.options.dropdownFiltersConfig && this.options.dropdownFiltersConfig.elementsData) {
  184.             this.options.dropdownFiltersConfig.elementsData.forEach((options) => {
  185.                 this.populateDropdown(options);
  186.             });
  187.         }
  188.     }
  190.     populateDropdown(options) {
  191.         const me = this;
  193.         options = {
  194.             columnIndex: null,
  195.             dropdownId: null,
  196.             badgeId: null,
  197.             textForAll: 'Все',
  198.             ...options
  199.         };
  201.         var dropdownButton = $("#" + options.dropdownId);
  202.         var dropdownMenu = dropdownButton.next('.dropdown-menu');
  204.         // Read multiple flag from data attribute on button (template sets data-multiple)
  205.         var isMultiple = false;
  206.         try {
  207.             var dataMultiple = dropdownButton.data('multiple');
  208.             if (typeof dataMultiple === 'boolean') {
  209.                 isMultiple = dataMultiple;
  210.             } else if (typeof dataMultiple === 'string') {
  211.                 isMultiple = dataMultiple === 'true';
  212.             }
  213.         } catch (e) {
  214.             isMultiple = false;
  215.         }
  217.         // Get unique values from column
  218.         var uniqueValues = this.table
  219.             .column(options.columnIndex)
  220.             .data()
  221.             .unique()
  222.             .sort()
  223.             .toArray();
  225.         // Remove previously generated non-all items
  226.         dropdownMenu.find('.dropdown-item:not([data-filter="all"])').remove();
  228.         // Append new items (галочка вместо checkbox)
  229.         uniqueValues.forEach(function(value) {
  230.             var item = $('<a class="dropdown-item d-flex align-items-center" href="#" role="menuitem" aria-pressed="false"></a>');
  231.             item.attr('data-filter', value);
  233.             // Общий контейнер с галочкой (скрыт до выбора)
  234.             var checkWrap = $('<span class="filter-check me-2" style="visibility:hidden;"></span>');
  235.             var checkIcon = $('<i class="fas fa-check text-white"></i>');
  236.             checkWrap.append(checkIcon);
  238.             var textSpan = $('<span class="filter-text"></span>').text(value);
  240.             item.append(checkWrap).append(textSpan);
  241.             dropdownMenu.append(item);
  242.         });
  244.         // Ensure no duplicate handlers
  245.         dropdownMenu.find('.dropdown-item').off('click');
  247.         var selectedValues = dropdownButton.data('selectedValues') || [];
  249.         function updateCheckMark($el, selected) {
  250.             var wrap = $el.find('.filter-check');
  251.             if (!wrap.length) return;
  252.             if (selected) {
  253.                 wrap.css('visibility', 'visible');
  254.                 $el.addClass('active').attr('aria-pressed', 'true');
  255.             } else {
  256.                 wrap.css('visibility', 'hidden');
  257.                 $el.removeClass('active').attr('aria-pressed', 'false');
  258.             }
  259.         }
  261.         // Initialize existing selections
  262.         if (selectedValues && selectedValues.length > 0) {
  263.             dropdownMenu.find('.dropdown-item:not([data-filter="all"])').each(function() {
  264.                 var $it = $(this);
  265.                 var val = $it.data('filter');
  266.                 updateCheckMark($it, selectedValues.indexOf(val) !== -1);
  267.             });
  268.             if (selectedValues.length === 1) {
  269.                 dropdownButton.text(selectedValues[0]);
  270.                 if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + selectedValues[0]);
  271.             } else {
  272.                 dropdownButton.text(selectedValues.length + ' выбрано');
  273.                 if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + selectedValues.length);
  274.             }
  275.         } else {
  276.             dropdownButton.text(options.textForAll || 'Все');
  277.             if (options.badgeId) $(options.badgeId).addClass('d-none');
  278.         }
  280.         dropdownMenu.find('.dropdown-item').on('click', function(e) {
  281.             e.preventDefault();
  282.             var $el = $(this);
  283.             var filterValue = $el.data('filter');
  285.             if (!isMultiple) {
  286.                 if (filterValue === 'all') {
  287.                     dropdownButton.data('selectedValues', []);
  288.                     dropdownMenu.find('.dropdown-item:not([data-filter="all"])').each(function(){ updateCheckMark($(this), false); });
  289.                     dropdownButton.text(options.textForAll || 'Все');
  290.                     if (options.badgeId) $(options.badgeId).addClass('d-none');
  291.                     me.table.column(options.columnIndex).search('').draw();
  292.                 } else {
  293.                     dropdownButton.data('selectedValues', [filterValue]);
  294.                     dropdownMenu.find('.dropdown-item:not([data-filter="all"])').each(function(){
  295.                         var $other = $(this);
  296.                         updateCheckMark($other, $other.data('filter') === filterValue);
  297.                     });
  298.                     dropdownButton.text(filterValue);
  299.                     if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + filterValue);
  300.                     let esc = StringUtils.escapeRegex(filterValue);
  301.                     me.table.column(options.columnIndex).search('^' + esc + '$', true, false).draw();
  302.                 }
  303.             } else {
  304.                 if (filterValue === 'all') {
  305.                     selectedValues = [];
  306.                     dropdownButton.data('selectedValues', selectedValues);
  307.                     dropdownMenu.find('.dropdown-item:not([data-filter="all"])').each(function(){ updateCheckMark($(this), false); });
  308.                     dropdownButton.text(options.textForAll || 'Все');
  309.                     if (options.badgeId) $(options.badgeId).addClass('d-none');
  310.                     me.table.column(options.columnIndex).search('').draw();
  311.                 } else {
  312.                     var idx = selectedValues.indexOf(filterValue);
  313.                     if (idx === -1) {
  314.                         selectedValues.push(filterValue);
  315.                         updateCheckMark($el, true);
  316.                     } else {
  317.                         selectedValues.splice(idx, 1);
  318.                         updateCheckMark($el, false);
  319.                     }
  320.                     if (selectedValues.length === 0) {
  321.                         dropdownButton.text(options.textForAll || 'Все');
  322.                         if (options.badgeId) $(options.badgeId).addClass('d-none');
  323.                         dropdownButton.data('selectedValues', selectedValues);
  324.                         me.table.column(options.columnIndex).search('').draw();
  325.                     } else {
  326.                         if (selectedValues.length === 1) {
  327.                             dropdownButton.text(selectedValues[0]);
  328.                             if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + selectedValues[0]);
  329.                         } else {
  330.                             dropdownButton.text(selectedValues.length + ' выбрано');
  331.                             if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + selectedValues.length);
  332.                         }
  333.                         var escaped = selectedValues.map(function(v){ return StringUtils.escapeRegex(v); });
  334.                         var regex = '^(' + escaped.join('|') + ')$';
  335.                         dropdownButton.data('selectedValues', selectedValues);
  336.                         me.table.column(options.columnIndex).search(regex, true, false).draw();
  337.                     }
  338.                 }
  339.             }
  340.             me.eventDispatcher.emit(CustomDataTable.EVENTS.ON_TABLE_FILTERED);
  341.         });
  342.     }
  343. }