Error initializing table: Error: SearchPane requires Select

rv98

Hi All!

I'm currently rewriting a project and i want to put everything in a bundle.

i installed everything with npm install, but i keep runnign into the follwing error:

Error initializing table: Error: SearchPane requires Select

at new SearchPanes (dataTables.searchPanes.mjs:2138:1)
at _init (dataTables.searchPanes.mjs:3477:1)

I've imported everything at the top of the file:

import $ from "jquery";
import "datatables.net";
import "datatables.net-select";
import 'datatables.net-searchpanes';

....

const table = tableElement.DataTable({
serverSide: settings.serverSide,
processing: settings.serverSide,
ajax: settings.ajax,
paging: settings.paging,
pageLength: settings.pageLength,
searching: settings.searching,
autoWidth: false,
order: [],
searchPanes:{
layout: 'columns-1',
},
columns: settings.columns,
dom: "tr",
language: {
emptyTable: settings.message_if_empty || "No records found",
},
});

I already tried to shuffle the order of imports around and tried the bs-5 packages but i keep getting this error. I also tried to isntall older releases, but without result. In the old code everything was imported from the cdn and it worked perfectly fine:

<link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">

$(document).ready(function () {
var table = $('#itemTable').DataTable({
processing: true,
serverSide: true,
ajax: "data",
order:[],
searchPanes:{
layout: 'columns-1',
},
columnDefs: [
{
// For Checkboxes
targets: 0,
orderable: false,
searchable: false,
checkboxes: true,
render: function () {
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
},
checkboxes: {
selectAllRender: '<input type="checkbox" class="form-check-input">'
}
},
],
rowCallback: function(row, data) {
// Assuming the record ID is in the first element of the data array or is called data.id
$(row).attr('data-id', data[0]); // Adjust 'data.id' based on your data structure
},

  });

// Searchpanels

$('div.dtsp-verticalPanes').append(table.searchPanes.container().get(0));

Does any of you have the answer?

Thank you in advance!

allan

My guess is that somewhere an old version of DataTables or one of the extensions is being included in your npm structure. Can you show me the package.json? Without being able to see the project it is very difficult to say for sure though - if you can recreate the issue on StackBltiz that would help me resolve it.

Allan

rv98

Hi Allen,

Thanks for your Quick response.

My dependencies are as followed:

"dependencies": {
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.1",
"datatables.net": "^1.13.4",
"datatables.net-dt": "^1.13.4",
"datatables.net-select": "^2.1.0",
"jquery": "^3.7.1",
"jquery-datatables-checkboxes": "^1.3.0",
"jsdom": "^25.0.1",
"tom-select": "^2.4.1"
},

My current setup is heavily depending on the backend; but i think im able to reproduces the error in a clean project. I will try it in a minute

Thank you!
Ralph

rv98

HI Allen,

I recreated the problem:

https://stackblitz.com/edit/stackblitz-starters-8d6ykq?file=index.html

Thanks in advance!

Ralph

allan

"datatables.net-dt": "^1.13.4",

That's not going to help (v2 is the supported version), however that isn't the issue.

There is something happening here that I'm not understanding. Probably somewhere in the Webpack build. If I comment out the import 'datatables.net-searchpanes'; it still gives the error about SearchPane requiring Select, which makes no sense to me.

I'll need to come back to this one. Hopefully tomorrow, all being well.

Allan

rv98

Hi Allen,

Thanks again for your work and quick response. Hope it will make sense soon

Ralph

allan

Here we go.

A few steps, including a separate build step, which was what was confusing me:

1. Update package.json to use ^2 for datatables.net and datatables.net-dt.
2. Delete node_modules and package-lock.json so the updated modules could be installed
3. npm install
4. npm run build
5. Comment out import 'jquery-datatables-checkboxes'; that appears to have problems with DataTables 2. Not sure it is needed any more with Select v2 anyway.
6. npm run start

It should work.

Allan