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;
  6.     columnIds = {};
  8.     static EVENTS = {
  9.         ON_TABLE_FILTERED: 'tableFiltered'
  10.     };
  12.     constructor(selector, options = {}) {
  13.         this.selector = selector;
  14.         this.options = {
  15.             dom: 'i lfrtip',   // i = info сверху
  16.             "lengthMenu": [[10, 20, 50, 100, 200, 300, 500, 700, -1], [10, 20, 50, 100, 200, 300, 500, 700, "Все"]],
  17.             language: {
  18.                 url: '/js/vendor/datatables/ru.json'
  19.             },
  20.             drawRowNumbersForColIndex: undefined,
  21.             searchPrehandler: null, // Function to preprocess search terms before applying search
  22.             ...options
  23.         };
  24.         this.eventDispatcher = new EventDispatcher();
  26.         let $head = $(this.selector).find('thead');
  27.         let i = -1;
  28.         const me = this;
  29.         $head.find('th').each(function (){
  30.             i++;
  31.             let colId = $(this).data('table-col-id');
  32.             me.columnIds[i] = colId;
  33.         });
  34.     }
  36.     static getOptionsExample() {
  37.         return {
  38.             "lengthMenu": [[10, 20, 50, 100, 200, 300, 500, 700, -1], [10, 20, 50, 100, 200, 300, 500, 700, "Все"]],
  39.             "columnDefs": [ // Columns definitions
  40.                 {
  41.                     "targets": 0,
  42.                     "type": "num",
  43.                     "visible": false,
  44.                 },
  45.                 {
  46.                     "targets": 1,
  47.                     "type": "date-d-m-Y"
  48.                 },
  49.             ],
  50.             drawRowNumbersForColIndex: 0,
  51.             "searchPrehandler": (searchTerm) => {
  52.                 // Example: if user enters "111", search for both "111" and "222"
  53.                 if (searchTerm === '111') {
  54.                     return '111|222';
  55.                 }
  56.                 return searchTerm;
  57.             },
  58.             "dropdownFiltersConfig": {
  59.                 "elementsData": [
  60.                     {
  61.                         "columnIndex": 2, //3th column
  62.                         "dropdownId": "departmentDropdown", // Dropdown button ID
  63.                         "badgeId": "departmentBadge", // Badge ID to show filter status (optional)
  64.                         "textForAll": "All" // Text to show when 'all' is selected (optional)
  65.                     },
  66.                 ]
  67.             },
  68.         }
  69.     }
  71.     getColumnIndexByColumnId(colId) {
  72.         for (let index in this.columnIds) {
  73.             if (this.columnIds[index] === colId) {
  74.                 return parseInt(index);
  75.             }
  76.         }
  77.         return -1;
  78.     }
  80.     getAllFilteredTableData() {
  81.         let allData = [];
  82.         this.table.rows({ search: 'applied' }).every((rowIdx) => {
  83.             let row = this.table.row(rowIdx);
  84.             allData.push(row.data());
  85.         });
  86.         return allData;
  87.     }
  89.     getFilteredData() {
  90.         return this.table.rows({ search: 'applied', order: 'applied' }).data().toArray();
  91.     }
  93.     getHeadElement() {
  94.         return $(this.table.table().header());
  95.     }
  97.     downloadCsv(filename = 'data_table_export.csv') {
  98.         const delimiter = ';';
  99.         const rows = [];
  101.         // collect headers and escape
  102.         const headers = [];
  103.         this.table.columns().every((index) => {
  104.             const $header = $(this.table.column(index).header());
  105.             if ($header.is('[data-export-exclude-col]')) return;
  106.             const raw = $header.text();
  107.             const safe = String(raw).replace(/"/g, '""');
  108.             headers.push(`"${safe}"`);
  109.         });
  110.         rows.push(headers.join(delimiter));
  112.         // collect rows (respect search: 'applied')
  113.         let number = 0;
  114.         this.table.rows({ search: 'applied' }).every((rowIdx) => {
  115.             const row = this.table.row(rowIdx);
  116.             const rowData = [];
  118.             row.columns().every((colIdx) => {
  119.                 const $header = $(this.table.column(colIdx).header());
  120.                 if ($header.is('[data-export-exclude-col]')) return;
  121.                 let cell = row.data()[colIdx];
  122.                 if (this.options.drawRowNumbersForColIndex === colIdx) {
  123.                     cell = ++number;
  124.                 }
  125.                 const raw = cell === null || cell === undefined ? '' : String(cell);
  126.                 const safe = raw.replace(/"/g, '""');
  127.                 rowData.push(`"${safe}"`);
  128.             });
  130.             rows.push(rowData.join(delimiter));
  131.         });
  133.         // Join with CRLF for Windows compatibility and prefix with UTF-8 BOM
  134.         const csvString = '\uFEFF' + rows.join('\r\n');
  136.         const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
  137.         const link = document.createElement('a');
  138.         if (link.download !== undefined) {
  139.             const url = URL.createObjectURL(blob);
  140.             link.setAttribute('href', url);
  141.             link.setAttribute('download', filename);
  142.             link.style.visibility = 'hidden';
  143.             document.body.appendChild(link);
  144.             link.click();
  145.             document.body.removeChild(link);
  146.         }
  147.     }
  149.     initDataTable() {
  150.         let columnDefs = [];
  151.         let dropdownFiltersConfig = {
  152.             elementsData: []
  153.         };
  154.         $(`${this.selector} th`).each(function(index) {
  155.             let hideCol = $(this).is('[data-table-hide-col]');
  156.             let tableType = $(this).data('table-type');
  157.             let optionsItem = {
  158.                 "targets": index,
  159.             };
  160.             if (hideCol) {
  161.                 optionsItem['visible'] = false;
  162.             }
  163.             if (tableType) {
  164.                 optionsItem['type'] = tableType;
  165.             }
  166.             if (Object.keys(optionsItem).length > 1) {
  167.                 columnDefs.push(optionsItem);
  168.             }
  170.             let dropdownFilterConfig_elementsDataItem = {};
  171.             let dropdownId = $(this).data('table-dropdown-id');
  172.             if (dropdownId) {
  173.                 dropdownFilterConfig_elementsDataItem['columnIndex'] = index;
  174.                 dropdownFilterConfig_elementsDataItem['dropdownId'] = dropdownId;
  175.                 let badgeId = $(this).data('table-badge-id');
  176.                 if (badgeId) {
  177.                     dropdownFilterConfig_elementsDataItem['badgeId'] = badgeId;
  178.                 }
  179.                 let textForAll = $(this).data('table-dropdown-text-for-all');
  180.                 if (textForAll) {
  181.                     dropdownFilterConfig_elementsDataItem['textForAll'] = textForAll;
  182.                 }
  183.                 dropdownFiltersConfig.elementsData.push(dropdownFilterConfig_elementsDataItem);
  184.             }
  186.             let uniqueValues = $(this).data('table-dropdown-values');
  187.             if (uniqueValues) {
  188.                 uniqueValues = uniqueValues.split('|').map(v => v.trim());
  189.                 dropdownFilterConfig_elementsDataItem['uniqueValues'] = uniqueValues;
  190.             }
  191.         });
  192.         if (!this.options.columnDefs || this.options.columnDefs.length === 0) {
  193.             console.log(columnDefs)
  194.             this.options.columnDefs = columnDefs;
  195.         }
  196.         if (dropdownFiltersConfig && (!this.options.dropdownFiltersConfig
  197.             || !this.options.dropdownFiltersConfig.elementsData
  198.             || this.options.dropdownFiltersConfig.elementsData.length === 0)) {
  199.             this.options.dropdownFiltersConfig = dropdownFiltersConfig;
  200.         }
  202.         const me = this;
  204.         const originalInitComplete = this.options.initComplete;
  205.         this.options.initComplete = function(settings, json) {
  206.             if (originalInitComplete) {
  207.                 originalInitComplete.call(this, settings, json);
  208.             }
  209.             me.overrideSearchEngine(settings);
  210.         };
  212.         this.table = $(this.selector).DataTable(this.options);
  214.         $(document).ready(() => {
  215.             this.populateDropdowns();
  217.             this.table.on('draw', () => {
  218.                 this.populateDropdowns();
  219.             });
  220.         });
  222.         this.eventDispatcher.addEventListener(CustomDataTable.EVENTS.ON_TABLE_FILTERED, () => {
  223.             if (this.options.drawRowNumbersForColIndex !== null && this.options.drawRowNumbersForColIndex !== undefined) {
  224.                 this.drawRowNumbers();
  225.             }
  226.         });
  228.         return this.table;
  229.     }
  231.     overrideSearchEngine(settings) {
  232.         const me = this;
  233.         const api = new $.fn.dataTable.Api(settings);
  234.         const searchInput = $(api.table().container()).find('.dataTables_filter input');
  236.         if (searchInput.length === 0) {
  237.             return;
  238.         }
  240.         const newInput = searchInput.clone();
  241.         newInput.val(searchInput.val());
  242.         searchInput.replaceWith(newInput);
  244.         newInput.on('keyup search input', function() {
  245.             let preprocessedSearchValue = this.value;
  247.             if (StringUtils.containsEngString(preprocessedSearchValue)) {
  248.                 let converted = StringUtils.engKeyboardLayoutToRus(preprocessedSearchValue);
  249.                 converted = StringUtils.escapeRegex(converted);
  250.                 preprocessedSearchValue = preprocessedSearchValue +
  251.                     "|" + converted;
  252.             }
  254.             if (me.options.searchPrehandler && typeof me.options.searchPrehandler === 'function') {
  255.                 preprocessedSearchValue = me.options.searchPrehandler(preprocessedSearchValue);
  256.             }
  258.             api.search(preprocessedSearchValue, true, false).draw();
  259.         });
  260.     }
  262.     drawRowNumbers() {
  263.         this.table.column(this.options.drawRowNumbersForColIndex, { search: 'applied' }).nodes().each(function(cell, i) {
  264.             cell.innerHTML = i + 1;
  265.         });
  266.     }
  268.     populateDropdowns() {
  269.         if (this.options.dropdownFiltersConfig && this.options.dropdownFiltersConfig.elementsData) {
  270.             this.options.dropdownFiltersConfig.elementsData.forEach((options) => {
  271.                 this.populateDropdown(options);
  272.             });
  273.         }
  274.     }
  276.     populateDropdown(options) {
  277.         const me = this;
  279.         options = {
  280.             columnIndex: null,
  281.             dropdownId: null,
  282.             badgeId: null,
  283.             textForAll: 'Все',
  284.             uniqueValues: null,
  285.             ...options
  286.         };
  288.         var dropdownButton = $("#" + options.dropdownId);
  289.         var dropdownMenu = dropdownButton.next('.dropdown-menu');
  291.         // Read multiple flag from data attribute on button (template sets data-multiple)
  292.         var isMultiple = false;
  293.         try {
  294.             var dataMultiple = dropdownButton.data('multiple');
  295.             if (typeof dataMultiple === 'boolean') {
  296.                 isMultiple = dataMultiple;
  297.             } else if (typeof dataMultiple === 'string') {
  298.                 isMultiple = dataMultiple === 'true';
  299.             }
  300.         } catch (e) {
  301.             isMultiple = false;
  302.         }
  304.         // Get unique values from column
  305.         if (!options.uniqueValues) {
  306.             options.uniqueValues = this.table
  307.                 .column(options.columnIndex)
  308.                 .data()
  309.                 .unique()
  310.                 .sort()
  311.                 .toArray();
  312.         }
  314.         // Remove previously generated non-all items
  315.         dropdownMenu.find('.dropdown-item:not([data-filter="all"])').remove();
  317.         // Append new items (галочка вместо checkbox)
  318.         options.uniqueValues.forEach(function(value) {
  319.             var item = $('<a class="dropdown-item d-flex align-items-center" href="#" role="menuitem" aria-pressed="false"></a>');
  320.             item.attr('data-filter', value);
  322.             // Общий контейнер с галочкой (скрыт до выбора)
  323.             var checkWrap = $('<span class="filter-check me-2" style="visibility:hidden;"></span>');
  324.             var checkIcon = $('<i class="fas fa-check text-white"></i>');
  325.             checkWrap.append(checkIcon);
  327.             var textSpan = $('<span class="filter-text"></span>').text(value);
  329.             item.append(checkWrap).append(textSpan);
  330.             dropdownMenu.append(item);
  331.         });
  333.         // Ensure no duplicate handlers
  334.         dropdownMenu.find('.dropdown-item').off('click');
  336.         var selectedValues = dropdownButton.data('selectedValues') || [];
  338.         function updateCheckMark($el, selected) {
  339.             var wrap = $el.find('.filter-check');
  340.             if (!wrap.length) return;
  341.             if (selected) {
  342.                 wrap.css('visibility', 'visible');
  343.                 $el.addClass('active').attr('aria-pressed', 'true');
  344.             } else {
  345.                 wrap.css('visibility', 'hidden');
  346.                 $el.removeClass('active').attr('aria-pressed', 'false');
  347.             }
  348.         }
  350.         // Initialize existing selections
  351.         if (selectedValues && selectedValues.length > 0) {
  352.             dropdownMenu.find('.dropdown-item:not([data-filter="all"])').each(function() {
  353.                 var $it = $(this);
  354.                 var val = $it.data('filter');
  355.                 updateCheckMark($it, selectedValues.indexOf(val) !== -1);
  356.             });
  357.             if (selectedValues.length === 1) {
  358.                 dropdownButton.text(selectedValues[0]);
  359.                 if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + selectedValues[0]);
  360.             } else {
  361.                 dropdownButton.text(selectedValues.length + ' выбрано');
  362.                 if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + selectedValues.length);
  363.             }
  364.         } else {
  365.             dropdownButton.text(options.textForAll || 'Все');
  366.             if (options.badgeId) $(options.badgeId).addClass('d-none');
  367.         }
  369.         dropdownMenu.find('.dropdown-item').on('click', function(e) {
  370.             e.preventDefault();
  371.             var $el = $(this);
  372.             var filterValue = $el.data('filter');
  374.             if (!isMultiple) {
  375.                 if (filterValue === 'all') {
  376.                     dropdownButton.data('selectedValues', []);
  377.                     dropdownMenu.find('.dropdown-item:not([data-filter="all"])').each(function(){ updateCheckMark($(this), false); });
  378.                     dropdownButton.text(options.textForAll || 'Все');
  379.                     if (options.badgeId) $(options.badgeId).addClass('d-none');
  380.                     me.table.column(options.columnIndex).search('').draw();
  381.                 } else {
  382.                     dropdownButton.data('selectedValues', [filterValue]);
  383.                     dropdownMenu.find('.dropdown-item:not([data-filter="all"])').each(function(){
  384.                         var $other = $(this);
  385.                         updateCheckMark($other, $other.data('filter') === filterValue);
  386.                     });
  387.                     dropdownButton.text(filterValue);
  388.                     if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + filterValue);
  389.                     let esc = StringUtils.escapeRegex(filterValue);
  390.                     me.table.column(options.columnIndex).search('^' + esc + '$', true, false).draw();
  391.                 }
  392.             } else {
  393.                 if (filterValue === 'all') {
  394.                     selectedValues = [];
  395.                     dropdownButton.data('selectedValues', selectedValues);
  396.                     dropdownMenu.find('.dropdown-item:not([data-filter="all"])').each(function(){ updateCheckMark($(this), false); });
  397.                     dropdownButton.text(options.textForAll || 'Все');
  398.                     if (options.badgeId) $(options.badgeId).addClass('d-none');
  399.                     me.table.column(options.columnIndex).search('').draw();
  400.                 } else {
  401.                     var idx = selectedValues.indexOf(filterValue);
  402.                     if (idx === -1) {
  403.                         selectedValues.push(filterValue);
  404.                         updateCheckMark($el, true);
  405.                     } else {
  406.                         selectedValues.splice(idx, 1);
  407.                         updateCheckMark($el, false);
  408.                     }
  409.                     if (selectedValues.length === 0) {
  410.                         dropdownButton.text(options.textForAll || 'Все');
  411.                         if (options.badgeId) $(options.badgeId).addClass('d-none');
  412.                         dropdownButton.data('selectedValues', selectedValues);
  413.                         me.table.column(options.columnIndex).search('').draw();
  414.                     } else {
  415.                         if (selectedValues.length === 1) {
  416.                             dropdownButton.text(selectedValues[0]);
  417.                             if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + selectedValues[0]);
  418.                         } else {
  419.                             dropdownButton.text(selectedValues.length + ' выбрано');
  420.                             if (options.badgeId) $(options.badgeId).removeClass('d-none').text('Filter: ' + selectedValues.length);
  421.                         }
  422.                         var escaped = selectedValues.map(function(v){ return StringUtils.escapeRegex(v); });
  423.                         var regex = '^(' + escaped.join('|') + ')$';
  424.                         dropdownButton.data('selectedValues', selectedValues);
  425.                         me.table.column(options.columnIndex).search(regex, true, false).draw();
  426.                     }
  427.                 }
  428.             }
  429.             me.eventDispatcher.emit(CustomDataTable.EVENTS.ON_TABLE_FILTERED);
  430.         });
  431.     }
  432. }