diff --git a/bundle.js b/bundle.js index ebe17c010..235ca815d 100644 --- a/bundle.js +++ b/bundle.js @@ -77161,7 +77161,21 @@ const applyDatatables = () => { const doNotProcess = element.querySelectorAll('[colspan],[rowspan]').length; // Don't process anything with less than 40 rows - if (rows < 40 || doNotProcess) return; + if (doNotProcess) return; + + // Bootstrap style tables, with responsive table + let dom = `<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row table-responsive'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 text-center'p>>`; + // How many items per page + let pageLength = 25; + // How to order our pages + let order = [[0, 'asc']]; + + // If we have less than 40 rows, we don't need pagination, but table will still be sortable + if (rows < 40) { + pageLength = 40; + dom = `<'row'<'col-sm-12 col-md-6'><'col-sm-12 col-md-6'>><'row table-responsive'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'><'col-sm-12 col-md-7 text-center'>>` + order = []; + } $(element).DataTable({ // Remember page/search/order @@ -77178,12 +77192,11 @@ const applyDatatables = () => { stateLoadCallback: function(settings) { return JSON.parse(sessionStorage.getItem(`DataTables_${Wiki.pageType()}_${Wiki.pageName()}_${i}`) || '{}'); }, - // Bootstrap style tables, with responsive table - dom: `<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row table-responsive'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 text-center'p>>`, - // Our custom page implementation + dom, + pageLength, + order, + // Our custom page implementation pagingType: 'simple_numbers_no_ellipses', - // How many items per page - pageLength: 25, // Adjust text language: { paginate: { @@ -77937,6 +77950,7 @@ onhashchange = (event) => { pageElementCustom.html(''); } }).always(() => { + applyDatatables(); if (other == 'edit') { // Initialise markdown editor createMarkDownEditor('custom-edit', customContentFileName); @@ -77959,6 +77973,7 @@ onhashchange = (event) => { pageElementCustomDescription.html(''); } }).always(() => { + applyDatatables(); if (other == 'edit') { // Initialise markdown editor createMarkDownEditor('custom-edit-desc', customContentDescFileName); @@ -77980,6 +77995,7 @@ $(document).ready(() => { ko.applyBindings({}, document.getElementById('breadcrumbs')); ko.applyBindings({}, document.getElementById('settings-modal')); ko.applyBindings({}, document.getElementById('footer')); + applyBindings.subscribe((v) => { // Unbind and re-bind knockout if (v) { diff --git a/scripts/datatables.js b/scripts/datatables.js index 659ffa108..f2ded20b4 100644 --- a/scripts/datatables.js +++ b/scripts/datatables.js @@ -8,7 +8,21 @@ const applyDatatables = () => { const doNotProcess = element.querySelectorAll('[colspan],[rowspan]').length; // Don't process anything with less than 40 rows - if (rows < 40 || doNotProcess) return; + if (doNotProcess) return; + + // Bootstrap style tables, with responsive table + let dom = `<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row table-responsive'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 text-center'p>>`; + // How many items per page + let pageLength = 25; + // How to order our pages + let order = [[0, 'asc']]; + + // If we have less than 40 rows, we don't need pagination, but table will still be sortable + if (rows < 40) { + pageLength = 40; + dom = `<'row'<'col-sm-12 col-md-6'><'col-sm-12 col-md-6'>><'row table-responsive'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'><'col-sm-12 col-md-7 text-center'>>` + order = []; + } $(element).DataTable({ // Remember page/search/order @@ -25,12 +39,11 @@ const applyDatatables = () => { stateLoadCallback: function(settings) { return JSON.parse(sessionStorage.getItem(`DataTables_${Wiki.pageType()}_${Wiki.pageName()}_${i}`) || '{}'); }, - // Bootstrap style tables, with responsive table - dom: `<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row table-responsive'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 text-center'p>>`, - // Our custom page implementation + dom, + pageLength, + order, + // Our custom page implementation pagingType: 'simple_numbers_no_ellipses', - // How many items per page - pageLength: 25, // Adjust text language: { paginate: { diff --git a/scripts/navigation.js b/scripts/navigation.js index 632ca61ac..eedf59c1f 100644 --- a/scripts/navigation.js +++ b/scripts/navigation.js @@ -111,6 +111,7 @@ onhashchange = (event) => { pageElementCustom.html(''); } }).always(() => { + applyDatatables(); if (other == 'edit') { // Initialise markdown editor createMarkDownEditor('custom-edit', customContentFileName); @@ -133,6 +134,7 @@ onhashchange = (event) => { pageElementCustomDescription.html(''); } }).always(() => { + applyDatatables(); if (other == 'edit') { // Initialise markdown editor createMarkDownEditor('custom-edit-desc', customContentDescFileName); @@ -154,6 +156,7 @@ $(document).ready(() => { ko.applyBindings({}, document.getElementById('breadcrumbs')); ko.applyBindings({}, document.getElementById('settings-modal')); ko.applyBindings({}, document.getElementById('footer')); + applyBindings.subscribe((v) => { // Unbind and re-bind knockout if (v) {