CODEWITHSUNDEEP
javascriptjqueryhtmlajax
OFRBG
OFRBG

Reputation: 1778

Adding filtering to an HTML table

I'm trying to add a filtering feature to an HTML table. I've seen some HTML filter libraries out there, but since I load the table's content after an AJAX call, these libraries don't seem to update after the table loads the actual values.

I was wondering if you could direct me on either how to implement my own filter, (the list of values to be filtered of the table can be accessed over AJAX too) or how to "delay" a piece of code of HTML and JS so the table and the libraries load together after the data is appended.

Tell me what part of the code you would like to see. Below is the <script> that loads the table. The libraries I tried to use are this and this. I'm programming this as a favor for my father, so this is just about good-hearted questions. Thanks everyone!

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

Upvotes: 1

Views: 54

Answers (1)

Rey Libutan
Rey Libutan

Reputation: 5314

You could try DataTables. It's very feature-rich with a lot of examples.

Specifically you could search an example for AJAX sources.

Upvotes: 1

Related Questions