文章/答案/技术大牛

发布

社区首页 >问答首页 >javascript函数不工作(TableFilter库)

问javascript函数不工作(TableFilter库)
EN

Stack Overflow用户

提问于 2022-07-18 08:35:54

回答 1查看 40关注 0票数 0

我正试着在我的网络应用程序中做一个可过滤的表格。TableFilter库看起来真的很好，但我无法让它工作(只在web应用程序中，因为它只适用于一个简单的html页面)。

这是我页面的代码：

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

这是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;
}

加载了表，但它是不可过滤的。正文中的脚本似乎不认识该表。我怎么解决呢？

javascript

html

visual-studio

web-applications

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-19 08:07:01

我解决了在javascript中创建自己的查询方法的问题。也许这对某人有帮助。

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;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73019470

复制

相似问题

问javascript函数不工作(TableFilter库)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript函数不工作(TableFilter库)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript函数不工作(TableFilter库)
EN