Conditional Paging feature remove all previously imported extensions

kamil1

Link to test case:
Debugger code (debug.datatables.net): izuvap (not working) ehayog (working)
Error messages shown:

Uncaught TypeError: this.s.dt.columns(...).type is not a function
    at SearchBuilder._setUp (dataTables.searchBuilder.mjs:3333:1)
    at new SearchBuilder (dataTables.searchBuilder.mjs:3241:1)
    at _Api.init (dataTables.searchBuilder.mjs:3749:1)
    at Buttons._expandButton (dataTables.buttons.mjs:669:1)
    at Buttons.add (dataTables.buttons.mjs:181:1)
    at Buttons._constructor (dataTables.buttons.mjs:480:1)
    at new Buttons (dataTables.buttons.mjs:99:1)
    at HTMLDocument.<anonymous> (dataTables.buttons.mjs:2528:1)
    at HTMLDocument.dispatch (jquery.js:5466:1)
    at elemData.handle (jquery.js:5270:1)

Description of problem: Conditional Paging feature remove all previously imported extensions

https://github.com/DataTables/Plugins/tree/master/features/conditionalPaging

import 'datatables.net-plugins/features/conditionalPaging/dataTables.conditionalPaging.mjs

Vue component - with this setup all imported extensions not working

import DataTable from "datatables.net-vue3";
import DataTablesCore from "datatables.net-bs5";
import 'datatables.net-select-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-fixedcolumns-bs5'
import 'datatables.net-colreorder-bs5';
import 'datatables.net-searchbuilder-bs5';
import languageEN from 'datatables.net-plugins/i18n/en-GB.mjs';
import languageSK from 'datatables.net-plugins/i18n/sk.mjs';
// Issue
import 'datatables.net-plugins/features/conditionalPaging/dataTables.conditionalPaging.mjs';

DataTable.use(DataTablesCore);

Vue component - with this setup all extensions working

import 'datatables.net-plugins/features/conditionalPaging/dataTables.conditionalPaging.mjs';
import DataTable from "datatables.net-vue3";
import DataTablesCore from "datatables.net-bs5";
import 'datatables.net-select-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-fixedcolumns-bs5'
import 'datatables.net-colreorder-bs5';
import 'datatables.net-searchbuilder-bs5';
import languageEN from 'datatables.net-plugins/i18n/en-GB.mjs';
import languageSK from 'datatables.net-plugins/i18n/sk.mjs';


DataTable.use(DataTablesCore);

allan

Are you able to create a test case using this as a template please? I don't see any reason in the code why it would remove other plug-ins.

I'd suggest you import DataTable and DataTablesCore first as well, then import the plug-ins suchs as conditional paging, select, etc.

Allan

kamil1

@allan here is an example using your template in this template conditional paging not working, but select plugin works, BTW what I didn't mention I use Vue3 with Options API not Composition API. In the meantime I found out that using datetime-moment plugin has the same behavior

import 'datatables.net-plugins/sorting/datetime-moment.js';

kamil1

@allan sorry my mistake i forgot enable conditionalPaging in options, everything works in example template, what else could I try?

Kamil

allan

Not sure I'm afraid. I'd really need to see it failing to understand why it isn't working. Is the load order the same in your not working page as the working one here?

Allan

kamil1

In this example the load order is same but behavior is not same like in my code.

allan

To confirm, it is working in that example, but not in your local code? I'd need a link to an example showing it not working to be able to debug it.

Allan

kamil1

@allan this is source code of my implementation, after investigation I found out that everything works through Vite but not through Webpack (Symfony + Webpack Encore Bundle ), Could you please try this code through webpack and confirm me if you have the same problem? Maybe it is necessary to configure something in Webpack.

Kamil

allan

Hi Kamil,

That example seems to work as well? Do you have a link to your Webpack based example that isn't working? It sounds like it will be a Webpack configuration thing, and I'm afraid I'm not Webpack expert, but I can take a look at a test case.

Allan

kamil1

@allan I tried to switch Webpack to Vite in the whole project, but the problem persisted, the solution working for me is the right order.

// Conditional Paging plugin
import 'datatables.net-plugins/features/conditionalPaging/dataTables.conditionalPaging';

import DataTable from "datatables.net-vue3";
import DataTablesCore from "datatables.net-bs5";
import 'datatables.net-select-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-fixedcolumns-bs5'
import 'datatables.net-colreorder-bs5';
import 'datatables.net-searchbuilder-bs5';
import 'datatables.net-datetime';
import 'datatables.net-plugins/sorting/datetime-moment'
import languageEN from 'datatables.net-plugins/i18n/en-GB.mjs';
import languageSK from 'datatables.net-plugins/i18n/sk.mjs';

DataTable.use(DataTablesCore);

allan

I'd say the conditional paging plug-in should certainly be loaded after DataTables. It is a plug-in for DataTables after all.

Allan