Adding filtering to an HTML table

Question

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>

Rey Libutan · Accepted Answer · 2015-06-20 18:45:49Z

1

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

Specifically you could search an example for AJAX sources.

answered Jun 20, 2015 at 18:45

Rey Libutan

5,32210 gold badges44 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding filtering to an HTML table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related