Tabulator: Need Help Processing X-WWW-Form-URLEncoded

[Sw0rDz]

I want to begin by saying that I love this library! I'm having some difficulty implementing the AJAX sorting and filtering. My application uses server side pagination. There is too many rows of data for a normal browser to handle. I'm having difficulty trying to implement server side filtering/sorting (I have no problem with pagination).

Here is what Tabulator sends to my server (decoded).

page=1&size=50&filters[0][field]=IPAddress&filters[0][type]=like&filters[0][value]=123

I'm struggling to find a solution to handle the filter array. I use Java Spring MVC as the server. Is there a way to override the .ajax call? I want to be able to change data (above) to something below.

{ "page" : 1, "size" : 50, "filters" : [ { "field" : "IPAddress", "type" : "like", "value" : "123" }]

Thanks!

[olifolkerd]

Hey @Sw0rDz

Thanks for your kind, words, it is great to hear that Tabulator is appreciated.

You can use the paginator callback to do this, It is passed in an object containing all of the request parameters and must return the URL as a string.

$("#example-table").tabulator({
    pagination:"remote", //enable remote pagination
    ajaxURL:"http://testdata.com/data", //set url for ajax request
    paginator: function(url, pageNo, pageSize, ajaxParams ){
        //url - the url from the ajaxURL parameter
        //pageNo - the requested page number
        //pageSize - the value of the paginationSize parameter
        //ajaxParams - the value of the ajaxParams parameter

        return ""; //must return the string of the page request URL
    },
});

Let me know if this helps,

Cheers

Oli :)

[Sw0rDz]

Thanks for your response! I'm wondering if the following solution is "good"? In other words, is there a better way to get access to header filters?

$("#example-table").tabulator({
    pagination:"remote", //enable remote pagination
    ajaxURL:"http://testdata.com/data", //set url for ajax request
    paginator: function(url, pageNo, pageSize, ajaxParams ){
        //url - the url from the ajaxURL parameter
        //pageNo - the requested page number
        //pageSize - the value of the paginationSize parameter
        //ajaxParams - the value of the ajaxParams parameter


        var myFilters = this.table.extensions.filter.headerFilters;

        //Check if myFilters.MYFILTER exists
        return ""; //must return the string of the page request URL
    },
});

[olifolkerd]

ahhh, now i see your issue,

If you enable the ajaxSorting and ajaxFiltering options in your table constructor then the filter and sort values will be automatically sent back to the server with the pagination data, no need for a custom paginator

$("#example-table").tabulator({
    pagination:"remote", //enable remote pagination
    ajaxURL:"http://testdata.com/data", //set url for ajax request
    ajaxSorting:true,
    ajaxFiltering:true, 
    columns:[...]
});

I would definitely avoid accessing the filters directly from the extension. there are public functions you can call to access all data and settings contained in tabulator that are all fully documented (though i applaud your ingenuity to look through the source), These functions make sure the data is isolated from the inner working of tabulator and format it in a usable way. trying to access things directly could result in unpredictable behaviour.

You can access the table filters programatically using the getFilters function:

$("#example-table").tabulator("getFilters", true);

i hope that answers your question. If you are still having dificulty it would be really useful if you could post a copy of your current table constructor so i can understand exactly how your table is set up, and if you could explain a bit more about how you are struggling with getting the filter info to the server, ie, what is being included in the requests that are being sent etc, exactly how are your looking to get at the data etc..

Cheers

Oli :)

[Sw0rDz]

Here is my JavaScript

    $("#iPAddressTables").tabulator({
        pagination:"remote", //enable remote pagination
        paginationSize:50,
        ajaxSorting:true,
        ajaxFiltering:true, 
        layout:"fitColumns",
        ajaxURL:"v1/getmytablejson", //set url for ajax request
        columns:[
                {title:"StringField0", field:"StringField0", sortable:true, headerFilter:"input"},
                {title: "Date Added", field:"DateAdded", sortable:true, sorter:"datetime", sorterParams:{format:"MM-DD-YYYY HH:mm:ss"}} ,
                {title: "State", field:"State", sortable:true, editor:"select", editorParams:{"State0":"State0", "State1":"State1"}, headerFilter:true, headerFilterParams:{"State0":"State0", "State1":"State1"}},
                {title:"Active", field:"Active", sortable:true } 
            ]
    }); 

This produces the following HTTP Get request.

/v1/getmytablejson?page=1&size=50&sorters[0][field]=Active&sorters[0][dir]=asc&filters[0][field]=State&filters[0][type]==&filters[0][value]=State1

Where I'm getting difficult is trying to figure the following in Spring MVC. I've tried the following

@RequestParam(value = "filters", required = false) TabulatorFilter[] params,

@RequestParam(value = "filters[]", required = false) TabulatorFilter[] params,

@RequestParam(value = "filters[][]", required = false) TabulatorFilter[] params,

@RequestParam(value = "filters", required = false) Map<String, String>[] params

@RequestParam(value = "filters[]", required = false) Map<String, String>[] params

@RequestParam(value = "filters[][]", required = false) Map<String, String>[] params

I did the same value=? for String[][] params as well.

[olifolkerd]

Hey @Sw0rDz

Im afraid I have never used Spring.

Can you see what you are getting back in the filter arguments in Spring?, is it a text string or an array? if it is a text string you may need to JSON decode it first.

Let me know if that helps

Cheers

Oli :)

[Sw0rDz]

My solution will be to modify the request before sending it to the server. I'll be using the getters and setters as mentioned. Again, thank you for your help! If I had more time, I would have dug more into your code and submit a pull request for others to use.

Anyone that comes upon this post, here is the stuff I learned. PHP/Perl are able to handle arrays via HTTP POST or GET with ease. Spring MVC does not handle it. If you use Spring MVC and you don't want to modify javascript, use @ResponseBody versus @RequestParam. From there, parse the string to extract data.