how to change format of output

mamadsoli · November 23

Hello, we know datatables send output with this format:

columns[0][data]= first_name
columns[0][name]=
columns[0][searchable]= true
columns[0][orderable]= true
columns[0][search][value]=
columns[0][search][regex]= false

but I need this format for output:

columns[0].data= first_name
columns[0].name=
columns[0].searchable= true
columns[0].orderable= true
columns[0].search.value=
columns[0].search.regex= false

How to can change format in datatables.net JQuery ?

Thanks

kthorngren · November 23

Use ajax.data to change the format of the request sent to the server. Are you asking to change the format to JSON? If yes then see the last example in the ajax.data docs. Otherwise use ajax.data as a function to change to the desired format.

Kevin

mamadsoli · November 23

I can't understand. can you show me an example?
sure JSON is good...
but I want to send data with request parameter

.../pagination?draw=1&columns[0].data=first_name&...

I need an example for it

thanks

kthorngren · November 23

As I said the last example in the ajax.data docs show how to convert the request to JSON. Here is the code from the example:

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

Kevin

mamadsoli · November 23

Thank you very much

Can I send data looks like this ? (parameter request)

new DataTable('#myTable', {
    ajax: {
        url: '.../pagination',
        type: 'GET',
        data: function (d) {
            return draw=1&columns[0].data=first_name&...
        }
    }
});

kthorngren · November 23

You will need to use ajax.data as a function to manipulate the original format sent to the server to the format you want. There is nothing built into Datatables to convert the default parameters to the format you want.

Kevin

mamadsoli · November 23

Thank you dear
I have to remove [] and send them.

thanks a lot

mamadsoli · November 24

Excuse me. In the continuing this discussion...
I used searchBuilder and I know the searchBuilder doesn't call ajax.data and this function is unused !!!
and doesn't call it

my code is:

table = $('#example').DataTable({
    ajax: {
        url: 'http://localhost:8080/api/v1/persons',
        type: 'GET',
        data: function (d) { 
            const queryParams = jsonToQueryParams(d);
            
            return queryParams;
        },
    },
    processing: true,
    serverSide: true,
    lengthMenu: [[5, 10, 25, 50, 100, "All"], [5, 10, 25, 50, 100, "All"]],
    
    layout: {
        top3: {
            searchBuilder: {
                liveSearch: false,
                className: 'btn btn-light',
                logic: 'AND'
            }
        },
    }
    
});

And I have this error after 2 times click on refresh button or search button

dataTables.searchBuilder.min.js:4 Uncaught TypeError: Cannot create property 'searchBuilder' on string 'draw=2&columns%5B0%5D.data=id&columns%5B0%5D.name=&columns%5B0%5D.searchable=true&columns%5B0%5D.orderable=true&columns%5B0%5D.search.value=&columns%5B0%5D.search.regex=false&columns%5B0%5D.search.fixed=&columns%5B1%5D.data=version&columns%5B1%5D.name=&columns%5B1%5D.searchable=true&columns%5B1%5D.orderable=true&columns%5B1%5D.search.value=&columns%5B1%5D.search.regex=false&columns%5B1%5D.search.fixed=&columns%5B2%5D.data=deleted&columns%5B2%5D.name=&columns%5B2%5D.searchable=true&columns%5B2%5D.orderable=true&columns%5B2%5D.search.value=&columns%5B2%5D.search.regex=false&columns%5B2%5D.search.fixed=&columns%5B3%5D.data=createdDate&columns%5B3%5D.name=&columns%5B3%5D.searchable=true&columns%5B3%5D.orderable=true&columns%5B3%5D.search.value=&columns%5B3%5D.search.regex=false&columns%5B3%5D.search.fixed=&columns%5B4%5D.data=updatedDate&columns%5B4%5D.name=&columns%5B4%5D.searchable=true&columns%5B4%5D.orderable=true&columns%5B4%5D.search.value=&columns%5B4%5D.search.regex=false&columns%5B4%5D.search.fixed=&columns%5B5%5D.data=firstName&columns%5B5%5D.name=&columns%5B5%5D.searchable=true&columns%5B5%5D.orderable=true&columns%5B5%5D.search.value=&columns%5B5%5D.search.regex=false&columns%5B5%5D.search.fixed=&columns%5B6%5D.data=lastName&columns%5B6%5D.name=&columns%5B6%5D.searchable=true&columns%5B6%5D.orderable=true&columns%5B6%5D.search.value=&columns%5B6%5D.search.regex=false&columns%5B6%5D.search.fixed=&columns%5B7%5D.data=gender&columns%5B7%5D.name=&columns%5B7%5D.searchable=true&columns%5B7%5D.orderable=true&columns%5B7%5D.search.value=&columns%5B7%5D.search.regex=false&columns%5B7%5D.search.fixed=&columns%5B8%5D.data=salary&columns%5B8%5D.name=&columns%5B8%5D.searchable=true&columns%5B8%5D.orderable=true&columns%5B8%5D.search.value=&columns%5B8%5D.search.regex=false&columns%5B8%5D.search.fixed=&columns%5B9%5D.data=employDate&columns%5B9%5D.name=&columns%5B9%5D.searchable=true&columns%5B9%5D.orderable=true&columns%5B9%5D.search.value=&columns%5B9%5D.search.regex=false&columns%5B9%5D.search.fixed=&columns%5B10%5D.data=email&columns%5B10%5D.name=&columns%5B10%5D.searchable=true&columns%5B10%5D.orderable=true&columns%5B10%5D.search.value=&columns%5B10%5D.search.regex=false&columns%5B10%5D.search.fixed=&columns%5B11%5D.data=photo&columns%5B11%5D.name=&columns%5B11%5D.searchable=true&columns%5B11%5D.orderable=true&columns%5B11%5D.search.value=&columns%5B11%5D.search.regex=false&columns%5B11%5D.search.fixed=&columns%5B12%5D.data=resume&columns%5B12%5D.name=&columns%5B12%5D.searchable=true&columns%5B12%5D.orderable=true&columns%5B12%5D.search.value=&columns%5B12%5D.search.regex=false&columns%5B12%5D.search.fixed=&order%5B0%5D.column=0&order%5B0%5D.dir=asc&order%5B0%5D.name=&start=0&length=5&search.value=&search.regex=false&search.fixed='

my breakpoint is unused. my function jsonToQueryParams(d) doesn't work any more.

thanks

kthorngren · November 24

Based on a couple other threads it sounds like SearchBuilder adds it's parameters after ajax.data is called. Modifying the data structure seems to cause this error. See these threads:
https://datatables.net/forums/discussion/comment/223786/#Comment_223786
https://datatables.net/forums/discussion/76464

Looks like someone was able to use jQuery ajax() beforeSend to modify the data when using SearchBuilder. Try add beforeSend to the ajax option.

@allan will need to comment on if there is a better way to handle this.

Kevin

mamadsoli · November 25

So sorry, I can't understand your answer. d.SearchBuilder is always undefined

allan · November 25

columns[0][search][regex]= false

but I need this format for output:

columns[0].data= first_name

That isn't an option in jQuery's Ajax handling. HTTP parameters are always sent with [] for objects and arrays. As far as I am aware there is no way to override that in jQuery. Most server-side parsers will expect it in the [] format anyway.

What are you using on the server-side that expects it in columns[0].data format?

You can send pure JSON to the server in the request body - last example in the ajax.data docs. That might allow you more options at the server-side?

It would be helpful if you could explain what the problem at the server-side is - i.e. why do you need to do this?

Allan

mamadsoli · November 25

Thank you
I used Spring boot (Java). Java only understands this format:

columns[0].data

But datatables send this format:

columns[0][data]

both of them is correct in Javascript, but not in Java

I have this error

org.springframework.beans.InvalidPropertyException: Invalid property 'columns[0][data]' of bean class [DatatablesCriterias]: Property referenced in indexed property path 'columns[0][data]' is neither an array nor a List nor a Map; returned value was [DatatablesColumn@3a46aae2]

mamadsoli · November 25

I want to send data with type of GET, so I need Query Params and not JSON.

allan · November 25

I've just read over the jQuery Ajax docs, and I don't see any way to get the format you are looking for, for the parameter keys.

I think you'll need to ask on StackOverflow or a Java specific forum about how to parse data in the a[b][c] format. I'm afraid I have virtually no knowledge of Java.

One possibly option is that you could assign JSON to an HTTP parameter:

data.json = JSON.stringify(data);

And then at the server-side decode the json parameter. Might be an option? But yeah, for the format that is sent, I'l afraid you'll need to ask in a Java support forum.

Allan

mamadsoli · November 25

Thank you very much. Is it possible you create a feature for it at next version?

Thank you

mamadsoli · November 25

Can you answer for second question?
About SearchBuilder

kthorngren · November 25

I can't understand your answer. d.SearchBuilder is always undefined

Where are you trying to access d.SearchBuilder?

The threads I posted indicate that the searchBuilder parameters are added after both the ajax.data and preXhr events. I modified one of the examples in the threads I linked to above to show this:
https://live.datatables.net/gupumija/8/edit

Perform a searchBuilder search and you will see the searchBuilders parameters aren't added in ajax.data or preXhr. However, in beforeSend the parameters are there. As suggested in the second thread try making the modifications in the beforeSend.

Kevin

allan · November 25

Is it possible you create a feature for it at next version?

Very unlikely I'm afraid. This is the first request for that submission format that I can recall, and I just use jQuery to submit data via jQuery.ajax - the change would need to be there.

Allan

mamadsoli · November 25

Thanks a lot. It's answer so completly.

table = $('#example').DataTable({
    ajax: {
        url: 'http://localhost:8080/api/v1/persons',
        type: 'GET',
    },
    beforeSend: function (xhr, data) {
        data.url = jsonToQueryParams(data.url);
    },
    processing: true,
    serverSide: true,

And Thanks a lot @allan too

how to change format of output

how to change format of output

Answers

Howdy, Stranger!

Categories

DataTables

how to change format of output

how to change format of output

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables