Tabulator: send headerFilters in ajax request as well as standard filters

Created on 23 Jun 2017 · 10Comments · Source: olifolkerd/tabulator

Hi oli,
I was able to do ajax pagination , but filter and sorting ajax calls not reaching server

On clicking any sort in table header
getting this ReferenceError: table is not define

$("#example-table").tabulator({
            ajaxURL:"http://localhost:8081/admin/getCustomers", //set url for ajax request
            pagination:"remote", //enable remote pagination
            paginationSize:10,
            ajaxSorting:true, //send sort data to the server instead of processing locally
            resizableColumns:true,
            movableColumns: true,
            selectable:1,
            ajaxFiltering:true,
            fitColumns:true, //fit columns to width of table (optional)
            columns:[ //Define Table Columns
                {title:"ID", field:"id", sorter:"string", headerFilter:"input"},
                {title:"Contact", field:"contact", formatter:contactFormatter},
                {title:"First Name", field:"firstName", sorter:"string", headerFilter:"input"},
                {title:"Last Name", field:"lastName", sorter:"string", headerFilter:"input"},
                {title:"Status", field:"status",width:250, sorter:"string", editor:StatusEditor, formatter:StatusFormatter},
                {title:"Registration Date (UTC)", field:"registrationDate", sorter:"string", sorterParams:{format:"yyyy-MM-ddTHH:mm:ss.fffZ"}, headerFilter:"input"},
                {title:"License Expiry Date (UTC)", field:"licenseExpiryDate", sorter:"string", sorterParams:{format:"yyyy-MM-ddTHH:mm:ss.fffZ"}, headerFilter:"input"},
                {title:"Company", field:"company", sorter:"string", headerFilter:"input", formatter:companyFormatter},
                {title:"Country", field:"country", sorter:"string", headerFilter:"input"}
            ],
        });

Bug Enhancement

Source

mohanen

All 10 comments

Hey,

That was a bug, i have just released 3.1.1 patch to fix that, update and try again.

Thanks for letting me know

Cheers

Oli

olifolkerd on 23 Jun 2017

👍1

Hi Oli ,

Sorting working now . But Filter arguments still doesn't seem to reach server .

mohanen on 25 Jun 2017

are you talking about header filters or filters set using the setFilters function?

olifolkerd on 25 Jun 2017

HeaderFilters

mohanen on 25 Jun 2017

set filters working but header filters aren't (in ajax)
Typo in Filter Type ajax argument to server

{ page: '1',
  size: '10',
  sort: 'id',
  sort_dir: 'asc',
  filter: 'firstName',
  fitler_type: 'like',  ----> there is a typo here 
  filter_value: 'mo' }

mohanen on 25 Jun 2017

And only getting last array value in setFilters function

$("#customer-table").tabulator("setFilter",[ {field:"lastName", type:"like", value:"b"}, //and by height less than 142 {field:"firstName", type:"like", value:"mo"}, //filter by age greater than 52 ]);
getting these only
....?page=1&size=10&sort=id&sort_dir=asc&filter=lastName&fitler_type=like&filter_value=b

mohanen on 25 Jun 2017

The header filters, should propagate through, i will correct that in version 3.2

As per the documentation, currently only the first filter and sorter are passed through on the ajax request.

If i were to make some changes in 3.2 and send through all of the filters and sorters in the request, how would you expect to receive them in the request parameters?

Cheers

Oli

olifolkerd on 26 Jun 2017

I am Really in need of this feature
It would be best if json but since we use get request , i can only think of arrays like

{ page: '1',
  size: '10',
  sort: 'id',
  sort_dir: 'asc',
  filter: ['firstName','lastName','gender'],
  fitler_type: ['like','like','='], 
  filter_value: ['mo','b','male'] 
}

Where the index defines there order : 0 is first ,1 is second so on..

What you think oli

mohanen on 27 Jun 2017

Hi Oli,

I'm trying to implement headerFilter (remote) and this is what I did.

$("#example-table").tabulator({
fitColumns: true,
movableColumns: true,
columnMinWidth: 100,
ajaxFiltering: true,
placeholder: "No Data Available",
ajaxURL: "Export.action?search3=",
ajaxConfig: "POST",
columns: tabulatorCols,
ajaxParams: {page: 1, startDate: $("#startDateHidden").val(), endDate: $("#endDateHidden").val()},
footerElement: $("

")
});

All my header filters are of "input" type. When I type something in the header filter input box, it makes an ajax call to the server. But in server side code, how can I get which column I filtered and what is the value I typed? If I know that, then I can invoke method on my data provider class with those filters. I'm struggling seriously with this. Can you please reply me ASAP?

Regards,
-Shibli