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