Tabulator: How do i update ajax parameters after table build

[azizur-rahman]

When I click the above Search button then default value "OPEN" is passing to the server. But if I change the selected another value from dropdown list and click the Search button then selected current value doesn't pass to server.

Here is my js code ....

function ReAll() {
var url = "/Account/ReAll";
var oTabulator = $("#grid-table");
//Build Tabulator
oTabulator.tabulator({
height: table_height,
ajaxURL: url,
ajaxParams: { sts: $('#AccStatus').val(), src: $('#mySearch').val() },
ajaxConfig: "POST",
fitColumns: true,
pagination: "local",
paginationSize: 300,
movableColumns: true,
responsiveLayout: true,
resizableColumns: true,
tooltips: true,
sortBy: "AccountName",
sortDir: "asc",
columns: [
{ formatter: gotoLink, title: "Account Name", field: "AccountName" },
{ title: "Code", field: "AccountCode" },
{ title: "Type", field: "AccountType" },
{ title: "Phone", field: "Phone" },
{ title: "Email", field: "EmailAddress" },
{ title: "Status", field: "AccountStatus", align: "center" },
{ formatter: deleteIcon, align: "center", width: 50 }
],
});

//Set Data
oTabulator.tabulator("setData");

//Set initial page
oTabulator.tabulator("setPage", 1);

//Searching
$("#mySearch").on("keyup", function () {

    var term = $(this).val().toLowerCase();

    oTabulator.tabulator("setFilter", function (data) {
        return data.AccountName.toLowerCase().indexOf(term) > -1 || data.AccountCode.toLowerCase().indexOf(term) > -1;
    });

});

}

Here is my HTML Code ...

<div id="grid-table" class="table-dispatch"></div>

<div class="col-sm-2  btm-margin">
      <button class="btn btn-rl no-margin form-control" onclick="ReAll();">Search</button>
</div>

Please help me with any sample code that will be very helpful for me.
Thanks
Azizur

[olifolkerd]

Hey,

The code you have provided above wont update the ajax params when you change the values. the line{ sts: $('#AccStatus').val(), src: $('#mySearch').val() }, will set the values to those of the elements when create your Tabulator but will not change them after that,

Can i ask what you are trying to achieve here? you seem to want to trigger a local filter based on the search term but at the same time send it and the status back to the server. i would suggest you either filter your data locally or on the server but dont try and do it half one, on half the other.

If you could explain your plan i can give you some advice on the best way to achieve it.

Cheers

Oli

[azizur-rahman]

Actually, I want to pass current selected value as parameters with url to the server side for searching using ajaxurl post.
Previous values are passing but I need to pass current values as parameter with posting url using ajaxURL posting in Tabulator.

Please help me with sample code that is very helpful for me.

Thanks

[olifolkerd]

at that point you can use the setData function

$("#example-table").tabulator("setData", url, {sts: $('#AccStatus').val(), src: $('#mySearch').val()}, "POST");

Let me know if that helps.

Cheers

Oli

[azizur-rahman]

Thanks for your support

Cheers

[olifolkerd]

You are most welcome