https://cittametropolitana.torino.it/themes/custom/cmtobs5/lib/boo…/table-responsive-scrollbar-top.js?tltln0

1// aggiungo div per boostrap-table-responsive-scrollbar-top-main (double scroll w) 
2// $('<div class="table-responsive table-responsive-scrollbar-top"></div>').insertBefore(".table-responsive");
3
4// applico js per ordinare e filtrare tabella
5
6(function ($, Drupal, once) {
7    Drupal.behaviors.customTableScroll = {
8        attach: function (context, settings) {
9
10            // 1. Inject CSS only once at the start
11            if (!$("#scrollbar-custom-styles").length) {
12
13                $("<style id='scrollbar-custom-styles'>")
14                    .prop("type", "text/css")
15                    .html(`
16                        .table-responsive-scrollbar-top {
17                            overflow-x: auto !important;
18                            overflow-y: hidden !important;
19                            height: 20px;
20                            margin-bottom: 5px;
21                            display: block;
22                            width: 100%;
23                            clear: both;
24                        }
25                        .scrollbar-dummy { height: 10px; }
26                        .dt-layout-table { display: block !important; width: 100%; }
27                        .table-responsive { overflow-x: auto !important; position: relative; }
28                    `)
29                    .appendTo("head");
30                
31            }
32
33            // 2. Initialize DataTable Logic
34            $(once('init-datatable', '#datatable', context)).each(function () {
35                const $table = $(this);
36
37                new DataTable(this, {
38                    info: false,
39                    ordering: true,
40                    paging: false,
41                    processing: true,
42                    retrieve: true,
43                    language: {
44                        processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>',
45                        search: 'Cerca',
46                        url: 'https://cdn.datatables.net/plug-ins/1.11.5/i18n/it-IT.json'
47                    },
48                    initComplete: function () {
49
50                        // Find the DataTables layout container
51                        const $dtContainer = $table.closest('.dt-container');
52                        const $layoutTable = $dtContainer.find('.dt-layout-full').addClass('table-responsive');
53                        // const $layoutTable = $dtContainer.find('.dt-layout-table');
54
55                        // Create scrollbar and PREPEND it inside the layout table (below search)
56                        const $scrollbarTop = $('<div class="table-responsive table-responsive-scrollbar-top"><div class="scrollbar-dummy"></div></div>');
57                        // $scrollbarTop.prependTo($layoutTable);
58                         $scrollbarTop.insertBefore($layoutTable);
59
60                        setupSync($scrollbarTop, $table.closest('.table-responsive'), $table);
61                    }
62                });
63            });
64
65            // 3. Initialize Standard Tables (skip if it contains the #datatable)
66            $(once('table-top-scroll', '.table-responsive:not(.table-responsive-scrollbar-top)', context)).each(function () {
67                const $container = $(this);
68                if ($container.find('#datatable').length > 0) return;
69
70                const $table = $container.find('table');
71                const $scrollbarTop = $('<div class="table-responsive table-responsive-scrollbar-top"><div class="scrollbar-dummy"></div></div>');
72
73                $scrollbarTop.insertBefore($container);
74                setupSync($scrollbarTop, $container, $table);
75            });
76
77            // Helper function for synchronization
78            function setupSync($scrollbar, $container, $table) {
79                const update = () => {
80                    const tableWidth = $table.outerWidth();
81                    const containerWidth = $container.width();
82                    $scrollbar.find('.scrollbar-dummy').css('width', tableWidth + 'px');
83
84                    // Show only if table actually overflows
85                    if (tableWidth > containerWidth) {
86                        $scrollbar.show();
87                    } else {
88                        $scrollbar.hide();
89                    }
90                };
91
92                // Bidirectional Scroll Sync
93                $scrollbar.on('scroll', () => $container.scrollLeft($scrollbar.scrollLeft()));
94                $container.on('scroll', () => $scrollbar.scrollLeft($container.scrollLeft()));
95
96                // Listeners for layout changes
97                $(window).on('resize', update);
98                $table.on('draw.dt', update);
99                setTimeout(update, 600); // Wait for DataTables to stabilize
100            }
101        }
102    };
103})(jQuery, Drupal, once);