I would like to know how to get the current filters and the clicked page when I click on the pagination area, so that they can be sent as “params” via AJAX?
When I filter my options, it correctly generates an AJAX fetch with the data (but the current page is missing).
However, when I click on the pagination, no fetch is triggered, and I can’t figure out where the issue comes from.
Thank you for your valuable help.
Doc: https://tabulator.info/examples/4.1#pagination
I would like to get the filters + the clicked page via fetch when I click on either the pagination or the filters.
This is my code:
let table = new Tabulator("#example-table", {
height:"100%",
placeholder:"No Datas",
layout:"fitColumns",
sortMode:"remote",
filterMode:"remote",
headerFilterLiveFilterDelay:600,
pagination:"remote",
ajaxURL:"http://127.0.0.1:5500/file.json",
ajaxParams:{token:"ABC123"},
ajaxConfig:"GET",
ajaxContentType:"json",
persistence:false,
columnDefaults:{
tooltip:true,
},
paginationSize:5,
paginationButtonCount:4,
paginationSizeSelector:[5,10,20,50,100,200],
rowHeader:{headerSort:false, resizable: false, frozen:true, headerHozAlign:"center", hozAlign:"center", formatter:"rowSelection", titleFormatter:"rowSelection", cellClick:function(e, cell){
cell.getRow().toggleSelect();
}},
paginationCounter:function(pageSize, currentRow, currentPage, totalRows, totalPages){
//console.log(pageSize, currentRow, currentPage, totalRows, totalPages)
},
ajaxURLGenerator:function(url, config, params){
return url + "?params=" + encodeURI(JSON.stringify(params));
},
movableColumns:false,
movableRows: false,
columns:[
{title:"id", field:"id", width:150, headerFilter:"input"},
{title:"Name", field:"name", width:150, headerFilter:"input"},
{title:"Progress", field:"progress", sorter:"number", hozAlign:"left", formatter:"progress", editable:true, headerSort:true, headerFilter:"input"},
{title:"Couleurs", field:"col", headerFilter:"input"},
{title:"Dates", field:"dob", headerFilter:"input"}
],
printAsHtml:true,
printHeader:"<h1>Example Table Header<h1>",
printFooter:"<h2>Example Table Footer<h2>",
langs:{
"fr":{
"pagination":{
"first":"Premier",
"first_title":"Première Page",
"last":"Dernier",
"last_title":"Dernière Page",
"prev":"Précédent",
"prev_title":"Page Précédente",
"next":"Suivant",
"next_title":"Page Suivante",
"all":"Toute",
"page_size":"Affichage",
},
}
}
});
/**
* Trigger Actions Table
*/
document.getElementById("print-table").addEventListener("click", function(){
table.print(false, true);
});
/**
* Initialize table after is fully loaded
*/
table.on("tableBuilt", () => {
table.setLocale("fr");
// console.log(table.getPage());
});
Use ajax generator for send pagination.. or detect click + filters nothing see