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