下面的制表过滤器代码不起作用答案

【问题标题】：Code below for Tabulator filter does not work下面的制表过滤器代码不起作用
【发布时间】：2020-02-05 02:37:24
【问题描述】：

我正在使用名为 Tabulator 的 jquery 插件，并尝试在所有列标题下方放置一个简单的文本框以过滤数据。似乎可以通过查看文档轻松完成，但这对我不起作用链接：http://tabulator.info/examples/4.5?#filter-header

没有错误，但我根本看不到可以开始输入文本进行过滤的文本框

 <!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 tabledata = [
    {id:1, name:"Billy Bob", age:12, gender:"male", height:95, col:"red", dob:"14/05/2010"},
    {id:2, name:"Jenny Jane", age:42, gender:"female", height:142, col:"blue", dob:"30/07/1954"},
    {id:3, name:"Steve McAlistaire", age:35, gender:"male", height:176, col:"green", dob:"04/11/1982"},
];

//define table
var table = new Tabulator("#example-table", {
    data:tabledata,
    autoColumns:true,
    layout:"fitColumns",
    pagination:"local", //enable local pagination.
    paginationSize:2, // this option can take any positive integer value (default = 10)
    columns:[
    {title:"id", field:"id", headerFilter:"input"}, //never hide this column
    {title:"name", field:"name",headerFilter:"input"},
    {title:"age", field:"age",headerFilter:"input"}, //hide this column first
    {title:"gender", field:"gender",headerFilter:"input"},
    {title:"height", field:"height",headerFilter:"input"},
    {title:"col", field:"col",headerFilter:"input"},
    {title:"dob", field:"dob",headerFilter:"input"},
    ],
});
</script>

</body>
</html>

任何我可能做错的建议。

【问题讨论】：

标签： javascript jquery tabulator

【解决方案1】：

您正在调用不同的来源

 <!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>

【讨论】：

代码 sn-p 不显示任何行/表。只是列标题。我注意到没有一个 codepen 示例也不起作用