javascript 函数不起作用（TableFilter 库）

Question

I'm trying to make a table in my web app filterable.我正在尝试在我的网络应用程序中制作一个可过滤的表格。 The TableFilter library seems to be really good but I'm not able to make it work (only in the web app since it works with a simple html page). TableFilter 库似乎非常好，但我无法使其工作（仅在网络应用程序中，因为它适用于简单的 html 页面）。

this is the code of my page:这是我页面的代码：

<html>
<head>
    <title>Show Elements In Table Page</title>

    <script src="~/tableFilter/tablefilter.js"></script>
    <script src="~/tableFilter/tablefilter_all.js"></script>
    <script src="~/tableFilter/tablefilter_all_min.js"></script>
    <script src="~/tableFilter/tablefilter_min.js"></script>
</head>
<body id="pageBody" onload="createTable(getLocalItem('selectedTable'), 'elementsTable');
    hideElement('loading'); 
    document.getElementById('tableName').innerHTML = getLocalItem('selectedTable');
    prova();">

    <h3 id="loading">loading...</h3>
    <div style="margin-left: 1em; margin-top: 1em;">
        <h3 id="tableName"></h3>
        <table align="left" border="1" cellpadding="5" cellspacing="0" id="elementsTable">
            <!--the table loads with the createTable() function-->
        </table>
    </div>

    <script language="javascript" type="text/javascript">
        setFilterGrid("elementsTable");
        <!--this is not working-->
    </script>
</body>
</html>

this is the createTable() js function:这是createTable() js 函数：

function createTable(tableName, tableId) {
    fetch(domain + urlParameters + tableName)
        .then(r => r.text())
        .then(j => JSON.parse(j))
        .then(o => {

            var cols = getVarNames(o);

            //header
            var tableHtml = "<thead><tr>";
            for (var i = 0; i < cols.length; i++) {
                tableHtml += "<th>" + cols[i] + "</th>";
            }
            tableHtml += "</tr></thead>";
            //body
            tableHtml += "<tbody><tr>";
            for (var i = 0; i < o.length; i++) {
                for (var j = 0; j < cols.length; j++) {
                    tableHtml += "<td>" + o[i][cols[j]] + "</td>";
                }
                tableHtml += "</tr>";
            }
            tableHtml += "</tbody>";

            //insertion in document
            document.getElementById(tableId).innerHTML = tableHtml;
        });
}

function getVarNames(list) {
    var columns = [];

    for (var i = 0; i < list.length; i++) {
        var row = list[i];

        for (var k in row) {
            if ($.inArray(k, columns) == -1) {
                columns.push(k);
            }
        }
    }
    return columns;
}

the table is loaded but it is not filterable.该表已加载，但不可过滤。 the script in the body seems to not recognize the table.正文中的脚本似乎无法识别该表。 how could i solve?我该如何解决？

Answer 1

i solved creating my own query methods in javascript.我解决了在 javascript 中创建自己的查询方法。 maybe this could be helpful for someone.也许这可能对某人有帮助。

var tableObject; //variable storing the json object form the api

    function createTable(tableName, tableId) {
    fetch(domain + urlParameters + tableName)
        .then(r => r.text())
        .then(j => JSON.parse(j))
        .then(o => {

            tableObject = o;
            //insert filtering variables

            var cols = getVarNames(tableObject);

            //header
            var tableHtml = "<thead><tr>";
            for (var i = 0; i < cols.length; i++) {
                tableHtml += "<th>" + cols[i] + "</th>";
            }

            //insert selection and filtering tools
            tableHtml += "<tr>";
            for (var i = 0; i < cols.length; i++) {
                tableHtml += "<td><textarea class=\"filter\" rows=\"1\" placeholder=\"input\" style=\"resize: none;\"></textarea></td>";
                //add some kind of tag matching the column -> maybe a class? or an id?
            }
            tableHtml += "</tr>";
            tableHtml += "</tr></thead>";

            //body
            tableHtml += "<tbody id=\"tableBody\"><tr>";
            for (var i = 0; i < tableObject.length; i++) {
                if (objectIncludesFilters(tableObject[i], cols, getValuesFilters())) {
                    for (var j = 0; j < cols.length; j++) {
                        tableHtml += "<td>" + tableObject[i][cols[j]] + "</td>";
                    }
                    tableHtml += "</tr>";
                }
            }
            tableHtml += "</tbody>";

            //insertion in document
            document.getElementById(tableId).innerHTML = tableHtml;
        });
}

function getVarNames(list) {
    var columns = [];

    for (var i = 0; i < list.length; i++) {
        var row = list[i];

        for (var k in row) {
            if ($.inArray(k, columns) == -1) {
                columns.push(k);
            }
        }
    }
    return columns;
}

function getValuesFilters() {
    const collection = document.getElementsByClassName("filter");
    var values = [];
    for (var i = 0; i < collection.length; i++) {
        var value = collection[i].value;
        values.push(value);
        if (value == null) {
            values.push("");
        }
    }
    return values;
}

function objectIncludesFilters(obj, cols, filters) {
    var result = true;
    for (var i = 0; i < filters.length; i++) {
        if (!obj[cols[i]].toLowerCase().includes(filters[i].toLowerCase())) {
            result = false;
        }
    }
    return result;
}

javascript 函数不起作用（TableFilter 库）

问题描述

1 个解决方案

解决方案1
0 2022-07-19 08:07:01

javascript 函数不起作用（TableFilter 库）

问题描述

1 个解决方案

解决方案1 0 2022-07-19 08:07:01

解决方案1
0 2022-07-19 08:07:01