Вы звоните из другого источника
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
<script>
var minMaxFilterEditor = function(cell, onRendered, success, cancel, editorParams){
var end;
var container = document.createElement("span");
//create and style inputs
var start = document.createElement("input");
start.setAttribute("type", "number");
start.setAttribute("placeholder", "Min");
start.setAttribute("min", 0);
start.setAttribute("max", 100);
start.style.padding = "4px";
start.style.width = "50%";
start.style.boxSizing = "border-box";
start.value = cell.getValue();
function buildValues(){
success({
start:start.value,
end:end.value,
});
}
function keypress(e){
if(e.keyCode == 13){
buildValues();
}
if(e.keyCode == 27){
cancel();
}
}
end = start.cloneNode();
end.setAttribute("placeholder", "Max");
start.addEventListener("change", buildValues);
start.addEventListener("blur", buildValues);
start.addEventListener("keydown", keypress);
end.addEventListener("change", buildValues);
end.addEventListener("blur", buildValues);
end.addEventListener("keydown", keypress);
container.appendChild(start);
container.appendChild(end);
return container;
}
//custom max min filter function
function minMaxFilterFunction(headerValue, rowValue, rowData, filterParams){
//headerValue - the value of the header filter element
//rowValue - the value of the column in this row
//rowData - the data for the row being filtered
//filterParams - params object passed to the headerFilterFuncParams property
if(rowValue){
if(headerValue.start != ""){
if(headerValue.end != ""){
return rowValue >= headerValue.start && rowValue <= headerValue.end;
}else{
return rowValue >= headerValue.start;
}
}else{
if(headerValue.end != ""){
return rowValue <= headerValue.end;
}
}
}
return false; //must return a boolean, true if it passes the filter.
}
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
columns:[
{title:"Name", field:"name", width:150, headerFilter:"input"},
{title:"Progress", field:"progress", width:150, formatter:"progress", sorter:"number", headerFilter:minMaxFilterEditor, headerFilterFunc:minMaxFilterFunction},
{title:"Gender", field:"gender", editor:"select", editorParams:{values:{"male":"Male", "female":"Female"}}, headerFilter:true, headerFilterParams:{values:{"male":"Male", "female":"Female", "":""}}},
{title:"Rating", field:"rating", editor:"star", align:"center", width:100, headerFilter:"number", headerFilterPlaceholder:"at least...", headerFilterFunc:">="},
{title:"Favourite Color", field:"col", editor:"input", headerFilter:"select", headerFilterParams:{values:true}},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date", headerFilter:"input"},
{title:"Driver", field:"car", align:"center", formatter:"tickCross", headerFilter:"tickCross", headerFilterParams:{"tristate":true},headerFilterEmptyCheck:function(value){return value === null}},
],
});
</script>
</body>
</html>