Filter results from a Bootgrid table

Asked

Viewed 48 times

1

The project uses the Bootgrid to create tables, and although it hasn’t been updated for a while, I can’t switch to another :/

Thus, I need to implement a filter based on the value of a range slider. Bootgrid already provides the string search, but not that filter. What I need is something similar to the image: when selecting 50%, the lines that have a match equal to or greater than 50% should appear (in the image appeared only 50% because it was the search).

Como deve funcionar

The table is implemented as follows:

 $(".company-table.with-header").bootgrid({
    columnSelection: false,
    selection: true,
    rowCount: 10,

    css: {
        icon: 'zmdi icon',
        iconColumns: 'zmdi-view-module',
        iconDown: 'zmdi-sort-amount-desc',
        iconRefresh: 'zmdi-refresh',
        iconUp: 'zmdi-sort-amount-asc'
    },
    labels: {
        noResults: "No se encontraron resultados",
        search: "Buscar",
        infos: "Mostrando {{ctx.start}} a {{ctx.end}} de {{ctx.total}} postulaciones"
    },
    caseSensitive: false,
    formatters: {
        "commands-best-match": function (column, row) {
            var actions;

            var id = row.job_id != "" ? row.job_id : row.candidate_id;
            var id2 = row.job_id != "" ? row.candidate_id : "";

            actions = "<a title='Ver Candidato' class='table-action edit-modal' action-url='/Candidato/ModalSeeCandidate' data-row-id='" + id + "' data-row-id2='" + id2 + "'><i class='far fa-eye'></i></a>";
            //actions += "<a href='#' title='Esconder de la lista' class='table-action'><i class='far fa-times-circle'></i></a>";
            actions += "<a href='mailto:" + row.candidate_email + "' title='Contactar' class='table-action'><i class='far fa-envelope'></i></a>";

            return actions;
        },
        "favorite": function (column, row) {
            var color = row.favorite == 1 ? "yellow" : "";
            var cand_id = row.candidate_id;

            return setFavoriteForm(row, cand_id, color);
        },
        "show-postulated": function (column, row) {
            return row.postulated == "True" ? "<i class='fas fa-check-circle checked'></i>" : "";
        }
    }
}).on("loaded.rs.jquery.bootgrid", function (e) {
    tableActions();
});

And the slider is implemented as:

var slider = document.getElementById("sliderMinMatch");
slider.oninput = function () {
    output.innerHTML = this.value;
}

In the documentation talks about the methods, but I’m unable to use chaining. It works:

 $(".company-table.with-header").bootgrid("search", "50%");

But I don’t know how to exchange the 50% for the value of the slider.

If anyone can shed some light it would help a lot, I’m pretty lost with it.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.