javascript - 向 HTML 表格添加过滤

Question

我正在尝试向 HTML 表格添加过滤功能。我见过一些 HTML 过滤器库，但由于我在 AJAX 调用后加载表的内容，因此这些库在表加载实际值后似乎不会更新。

我想知道您是否可以指导我如何实现我自己的过滤器(也可以通过 AJAX 访问表中要过滤的值列表)或如何“延迟”一段 HTML 代码和 JS，以便在附加数据后表和库一起加载。

告诉我您想查看代码的哪一部分。下面是<script>加载表。我尝试使用的库是 this和 this 。 我编写此程序是为了帮我父亲一个忙，所以这只是善意的问题。谢谢大家!

<小时/>

<script>
$(document).ready(function() {
        var populateContadorClienteTable = function(r) {
            var ClienteTable = $("#ClientesTable tbody");
            if(ClienteTable.length == 0) {
                return;
            } else {
                ClienteTable.children().remove();
                var r = JSON.parse(r);
                var ger, supe, con;

                if(r.length > 0) {
                    for(var i in r) {
                        if(r[i].Gerente != null) ger = r[i].Gerente; else ger = "";
                        if(r[i].Supervisor != null) supe = r[i].Supervisor; else supe = "";
                        if(r[i].Contador != null) con = r[i].Contador; else con = "";

                        ClienteTable.append(
                            $("<tr>")
                                .append($("<td>").text(r[i].ClaveCliente))
                                .append($("<a>").text(r[i].Nombre)
                                    .css("width", "100%")
                                    .addClass("pure-button")
                                    .attr("href","reasignar.php?ClaveCliente=" + r[i].ClaveCliente + "&Nombre=" + r[i].Nombre))
                                .append($("<td>").text(ger))
                                .append($("<td>").text(supe))
                                .append($("<td>").text(con))
                                //.append($("<td>").append($("<a>").attr("href","reasignar.php?ClaveCliente=" + r[i].ClaveCliente + "&Nombre=" + r[i].Nombre)
                                //  .text("Editar asignaciones")))
                        );
                    }

                } else {
                    alert("No Cliente data retrieved.");
                }
            }
        };


        $.ajax({
            type: "GET",
            url: "/query/ClienteContadoresFull.php",
            success: populateContadorClienteTable,
            error: function(jqXHR, textStatus, errorThrown) {
                alert("Error on retrieval of Cliente: " + textStatus);
            }
        });
});

</script>

Answer 1

你可以尝试DataTables 。它的功能非常丰富，有很多示例。

具体来说，您可以搜索 example for AJAX sources .