how to change format of output

how to change format of output

mamadsolimamadsoli Posts: 28Questions: 5Answers: 1
edited November 23 in Free community support

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    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

  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1
    edited 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

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    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

  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1
    edited 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&...
            }
        }
    });
    
  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited November 23 Answer ✓

    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

  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1

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

    thanks a lot

  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1
    edited 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

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited 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

  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1

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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1
    edited 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]
    
  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1

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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    Answer ✓

    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

  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1
    edited November 25

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

    Thank you

  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1

    Can you answer for second question?
    About SearchBuilder

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited November 25 Answer ✓

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • mamadsolimamadsoli Posts: 28Questions: 5Answers: 1
    edited 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

Sign In or Register to comment.