https://onlineservice.eins.de/powercommerce/eins/fo/portal/resources/js/core/dataTablesOptions.js

1
2/**
3 * Central configuration for DataTables (language, icons,..).
4 * Contains only options that apply globally to all tables in the application.
5 * Ensures consistent appearance and easy extension of DataTables across the application.
6 */
7const dataTablesOptions	=	{
8	language	:	{
9		info	:	globalJSMessage['message.table.language.info'],
10	    paginate : {
11	    	first: globalJSMessage['button.table.paginate.first'],
12	        previous: globalJSMessage['button.table.paginate.previous'],
13	        next: globalJSMessage['button.table.paginate.next'],
14	        last: globalJSMessage['button.table.paginate.last']
15	    },
16	    aria: {
17	        paginate: {
18	            first: globalJSMessage['button.table.paginate.first.ariaLabel'],
19	            previous: globalJSMessage['button.table.paginate.previous.ariaLabel'],
20	            next: globalJSMessage['button.table.paginate.next.ariaLabel'],
21	            last: globalJSMessage['button.table.paginate.last.ariaLabel']
22	        }
23	    }
24	},
25	'lengthChange': globalJSMessage['message.table.config.lengthChange'],
26	dom: globalJSMessage['message.table.config.dom']
27};
28
29/**
30 * Function to initialize custom column sort buttons.
31 * Replaces the default sorting icons in the table header with buttons 
32 * that have custom icons and sorting logic.
33 * 
34 * @param {string} tableId - The ID of the DataTable for which to create sorting buttons
35 * @param {Array<number>} unsortableColumns - List of column indices that should NOT be sortable
36 */
37 
38const initCustomColumnOrder	=	function(tableId, unsortableColumns){
39
40	const api = this.api();
41	
42	$('#' + tableId + ' thead span.dt-column-order').each(function () {
43        let th = $(this).closest('th');         
44        let colIdx = th.index();                
45		
46		// get the column title for aria-label
47        // and set the aria-label for the button
48        let colTitle = th.find('span.dt-column-title').text();                
49        let ariaLabelSortDesc = globalJSMessage['button.ariaLabel.column.sort.desc'];
50        let ariaLabelSortAsc = globalJSMessage['button.ariaLabel.column.sort.asc'];
51		
52		
53        // replace the column order icons with buttons
54        // and add click event to sort the table
55        // add aria-label to the button
56        if(!unsortableColumns.includes(colIdx)){
57            $(this).replaceWith(
58                `<button class="dt-column-order text-nowrap" id="column${colIdx}" aria-label="${colTitle} ${ariaLabelSortDesc}">` +
59                    '<i class="fas fa-long-arrow-alt-up"></i>' +
60                    '<i class="fas fa-long-arrow-alt-down"></i>' +
61                '</button>'
62            );
63            let currentDir = 'asc';
64            $(`#column${colIdx}`).on('click', function() {
65                
66                $(this).find('i').remove();
67                if(currentDir == 'desc'){
68                    let ariaLabel = `"${colTitle} ${ariaLabelSortDesc}"`;
69                    $(this).attr('aria-label',ariaLabel);
70                    $(this).append('<i class="fas fa-sort-amount-up-alt"></i>');
71                    currentDir = 'asc';
72                }
73                else{
74                    let ariaLabel = `"${colTitle} ${ariaLabelSortAsc}"`;
75                    $(this).attr('aria-label',ariaLabel);
76                    $(this).append('<i class="fas fa-sort-amount-down-alt"></i>');
77                    currentDir = 'desc';
78                }
79                api.order([colIdx, currentDir]).draw();
80            });
81        }
82    });
83        
84    // remove default event handlers to avoid double binding
85	$('thead.align-middle').off();
86    $('table').off(); 
87}