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。

将过滤添加到HTML表

1 个答案: