Show the number of selected filters on each column
Posted: Tue Jun 20, 2023 4:46 am
This Jquery script dynamically adds a count badge in the table header next to each filter based on the number of selected options in that corresponding dropdown filter menu.
So now you will be able to see at a glance how many filters are selected!
I added the following script into "Client Scripts > Table-Specific > List Page > Startup Script" for my table.
I just needed this on one table, however if you wanted on all pages this would likely work in global code, but I have not tested.
//Show filtered count
$(".ew-filter-dropdown-btn").each(function() {
var comboid = $(this).data("field")
if ($("#"+comboid+" :selected").length >= 1) {
$(this).find(".ew-table-header-filter").append("<span class='badge rounded-pill'>"+$("#"+comboid+" :selected").length+"</span>");
};
});Add the following CSS to "styles > user"
You may have to adjust to work with your theme, but the idea was to give it a small count bubble in the top right corner of the column header next to the column name.
div.ew-table-header-filter > span.badge {
position: relative;
right: 4px;
top: -8px;
padding: 0 0 0 5px;
color: #f8f9fa;
}