tabulator: Custom headerFilter not loaded in 3.x
Hi, I was using this custom headerFilter in 2.x and it worked perfectly, now I upgraded to 3.x (from trunk) and the header filter is not displayed anymore:
// Global variable "ajaxFilter" to be used by Tabulator's
// to filter server-side.
ajaxFilter= function (cell, value, data){
//create and style input
var input = $("<input type='text' class='ajax-filter'/>");
input.css({
"padding-left":"2px",
"padding-right":"2px",
"font-weight": "normal",
"width":"100%",
"box-sizing":"border-box",
"border": "1px solid gray",
"border-radius": "1px"
})
//wait till element is added to dom before altering event bindings
setTimeout(function(){
//block existing filter event bindings
input.off("keyup change blur keydown");
//submit new value on change
input.on("change", function(e){
var tabulator = $('#' + cell.closest(".tabulator")[0].id);
var params = tabulator.tabulator("option").ajaxParams;
// generate parameter's list
$(tabulator.selector + " .tabulator-header-filter .ajax-filter").each(function(){
var element = $(this);
var key = element.closest(".tabulator-col").data("field");
if(element.val() !== ""){
params[key] = element.val();
} else {
delete params[key];
};
});
// get the original ajaxURL
var ajaxURL = tabulator.tabulator("option").ajaxURL;
// perform the ajax call
tabulator.tabulator("setData", ajaxURL, params);
});
}, 300);
return input;
}
This is the configuration:
$('#my-table').tabulator({
headerFilterPlaceholder: "",
selectable: 1,
pagination: "remote",
ajaxURL: "/cgi-bin/imtranscript.bf/reports",
height: "311px",
columns:[
{title:"Audio", field: "tieneaudio", sortable: true, sorter:"string", width: 100, editable: false},
{title:"Informe", field: "tieneinforme", sortable: true, sorter:"string", width: 100, editable: false},
{title:"Id", field: "idturno", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
{title:"Estado", field: "nombreestado", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
{title:"Ingreso", field: "turnosistemaexterno", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
{title:"Fecha", field: "fecha", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
{title:"Hora", field: "hora", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
{title:"Modalidad", field: "modalidad", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
{title:"Región", field: "region", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
{title:"Paciente", field: "paciente", sortable: true, sorter:"string", width: 150, editable: false, headerFilter: ajaxFilter},
{title:"Documento", field: "nrodocumento", sortable: true, sorter:"string", width: 100, editable: false, headerFilter: ajaxFilter},
{title:"Descripción", field: "especialidad", sortable: true, sorter:"string", width: 200, editable: false, headerFilter: ajaxFilter},
{title:"Institución", field: "institucion", sortable: true, sorter:"string", width: 150, editable: false, headerFilter: ajaxFilter}
]
});
BTW, I’m also getting: TypeError: t.widget(...) is not a function tabulator.min.js:4:23182 since upgrading to 3.x, but Tabulator is displayed and works ok (with no headerFilter).
Here’s what I’m getting:

About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 20 (9 by maintainers)
Yes, I’ll try that.