Plugin FixedColumn: duplicate the bottom scrollbar at the top of the table

NHen

Hi there,

First of all, thank you very much for this valuable plugin. It's just amazing how DataTables has changed my developer's life.

I'm using DataTables with the FixedColumn feature for several tables and everything is working fine but (because it's never as easy as that, you know...) I've a request to duplicate the bottom scrollbar at the top of the table. The goal is to avoid scrolling to then move to the cells at the right of the table.

I already checked plugins like 'doubleScrollbar', eso but I didn't achieve to get a successfull configuration. I already spent hours on it. Can you please help me?

If it can help, here's is my DataTable configuration to use FixedColumn.

          datatable1 = $('#@(Model.Print ? "fake" : ReportGuid)').DataTable({
                 language: {
                    processing: '@Html.Translate("Processing...")',
                    search: '@Html.Translate("Search: ")',
                    lengthMenu: '@Html.Translate("Show _MENU_ entries")',
                    info: '@Html.Translate("Show _START_ to _END_ of _TOTAL_ entries")',
                    infoEmpty: '@Html.Translate("Show 0 to 0 of 0 entries ")',
                    infoFiltered: '@Html.Translate("(Filter from _MAX_ entries)")',
                    infoPostFix: "",
                    loadingRecords: '@Html.Translate("Loading...")',
                    zeroRecords: '@Html.Translate("No record to display")',
                    emptyTable: '@Html.Translate("No data available in the table")',
                    paginate: {
                        first: '@Html.Translate("First")',
                        previous: '@Html.Translate("Previous")',
                        next: '@Html.Translate("Next")',
                        last: '@Html.Translate("Last")'
                    },
                    aria: {
                        sortAscending: '@Html.Translate(": enable to sort the column ascending")',
                        sortDescending: '@Html.Translate(": enable to sort the column descending")'
                      },

                    buttons: {
                        copyTitle: '@Html.Translate("Copy to clipboard")',
                        copyKeys: '@Html.Translate("Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.")',
                        copySuccess: {
                            _: '@Html.Translate("%d rows copied")',
                            1: '@Html.Translate("1 row copied")'
                        }
                    }
                },
                  dom: '<"html5buttons"B>lTfgtpi',
                  scrollX: true,
                  scrollY: "75vh",
                  scrollCollapse: true,
                  fixedColumns: {
                      leftColumns: 2
                  },
                ordering: false,
                pageLength: 1000,
                lengthChange: false,
                buttons: [
                    { extend: 'excel', title: exportFilename, exportOptions: { format: { body: function (data, row, column, node) { return column >= 1 ? node.textContent.replace(/[€.]/g, '').replace(/[,]/g, '.') : node.textContent; } } } }
                ]
             });

Thank you,
Nicolas.

allan

I'm afraid there is no option for that in FixedColumns. We use the browser's native scroll bars. Sorry.

Allan

NHen

OK no problem, thank you for the fast answer.