SearchPanes > serverSide > POST > Cannot create property 'searchPanes' on string

ServiceSoftware

How can we use SearchPanes with serverSide and POST?

SearchPanes doesn't consume returned data the same way that DataTables does?

We have this error when using DataTables 2.2.2 with POST and SearchPanes:

"Uncaught TypeError: Cannot create property 'searchPanes' on string '{"draw":1,"columns":[{"data":null,"name":"","searchable":false,"orderable":false,"search":{"value":"","regex":false}}, ..."

The error is also documented here (but not a specific solution): We have this error: https://stackoverflow.com/questions/77555721/datatables-error-using-searchpanes-and-serverside-with-post-ajax-request

Per https://datatables.net/reference/option/ajax.data we always use this ajax syntax:

new DataTable('#myTable', {
    ajax: {
        url: 'data.json',
        contentType: 'application/json',
        type: 'POST',
        data: function (d) {
            return JSON.stringify(d);
        }
    }
});

Apparently data with JSON.stringify is the culprit when using serverSide and POST?

If we need to switch to using "ajax": function (data, callback, settings) {} then what is the equivalent of the simple ajax setting to setting the url and type?

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Possibly you can use the preXhr event and JSON.stringify the sent data there instead of in-option ajax.data`. For example:

$('#example')
    .on('preXhr.dt', function (e, settings, data) {
        JSON.stringify(data);
    })
    .DataTable({
        ajax: {
            url: 'data.json',
            contentType: 'application/json',
            type: 'POST',
        }
    });

Sorry I don't have a way to test it You can interrogate the data parameter to see if the SearchPanes parameters are in the payload to confirm if preXhr is the right place.

Kevin

kthorngren

I created this test case using the above:
https://live.datatables.net/yaroyala/95/edit

It appears to work. The browser's network inspector shows the SearchPanes parameters in the request payload. However the server side processing script used doesn't support SearchPanes so the panes aren't populated.

Let us know if it works.

Kevin

allan

It's this bit that kills it:

        data: function (d) {
            return JSON.stringify(d);
        }

The preXhr event happens after the ajax.data function is called. The result is that SearchPanes is expecting a list of data, but it is a string, and thus an error is thrown. I'm going to look into this today.

Allan

allan

I've just committed a change to add a new option to address this issue.

Rather than using ajax.data to return a string, there is a new ajax.submitAs option which should be set to json to have it send the data as JSON. This allows the preXhr listeners to still see an object since it hasn't been modified.

$('#example')
    .DataTable({
        ajax: {
            url: 'data.json',
            contentType: 'application/json',
            type: 'POST',
            submitAs: 'json'
        }
    });

is how to do it after this change. That will allow SearchPanes, SearchBuilder and anything else that uses the event to operate correctly.

I've committed this to the master branch so that it will be in the nightly, but noted it as a 2.3 feature (there is a reasonable chance that 2.3.0 will be the next release). Here is an updated example with this new option.

Thanks for flagging this up and prompting me to make this change.

Allan

ServiceSoftware

The committed change is working perfectly!

When using more than a few Search Panes then POST is essential. Allan, I'm very grateful for the speedy and valuable solution.

As a long-time DataTables user, we've finally progressed to using serverSide with our own API to accept and reply to DataTables requests. We're paging millions of records and have total control over SearchPanes selections. Datatables and serverSide combine for great performance, and thus create a great user experience.