Enhance Your HTML Table with a Dynamic Multi-select Interactive Filter

Question

Enhance Your HTML Table with a Dynamic Multi-select Interactive Filter

I am currently working on generating an HTML table dynamically using JSON objects. My goal is to implement a filter for one of the table columns, which is functioning correctly. However, I'm facing challenges in integrating a multiselect feature.

I have attempted to include this line:

$('.One1').multiselect();

within my script at various locations, but unfortunately, it hasn't produced the desired outcome.

var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};

...

<div id="one"></div>

javascript jquery html css

Answer 1

Answer №1

If you want to specify your select as being multiple, declare it like this:

var One = '<div class = "filter"><select multiselect class="One1" data-col="0"><option value="a">' + "One" + '</option>';

Modify it to read as follows:

var One = '<div class = "filter"><select multiple class="One1" data-col="0"><option value="a">' + "One" + '</option>';

Outcome:

var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};


//////First table - Three1 for Views
var table1 = '<div class="filter_box"></div><div class="row"><div class="col-lg-6" style="background-color: #e90649; width: 117px;">&nbsp;</div><div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Table<br/><br/><span style="font-size: 1vw;">One1, Three1, Five1</span></div><div class="col-lg-6"><div class="container"><table><thead><tr></tr><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Number1</th><th>Number2</th></tr></thead><tbody>';
var One = '<div class="filter"><select multiple class="One1" data-col="0"><option value="a">' + "One" + '</option>';

for (i = 0; i < data.rows.length; i++) 
{

table1 +="<tr><td>" + data.rows[i][0] + "</td><td>" + data.rows[i][1] + "</td><td>" + data.rows[i][2] + "</td><td>" + data.rows[i][3] + "</td><td>" + data.rows[i][4] + "</td><td>" + data.rows[i][5] + "</td><td>" + data.rows[i][6] + "</td><td>" + data.rows[i][7].toLocaleString() + "</td><td>" + data.rows[i][8].toLocaleString() + "</td><td>" + "</td></tr>";
  // Interactive filters

       One +='<option value="' + i + '">' + data.rows[i][0] + '</option>';
}
...
//$('.One1').multiselect();

@import url('https://fonts.googleapis.com/css?family=Roboto');

body, * { 
    margin: 0;
    color:#fff;
    font-family: Roboto; 
    text-transform:capitalize;
    }
.row {
    display: table;
    width: 100%;
    height: 241px; 
    background-color:#454545;
}
...
/*
tr th:nth-child(5) {
    background: red;
    display:none;
} 

tr td:nth-child(5) {
    background: red;
    display:none;
} 
*/

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>


<div id="one"></div>

Answer 2

If you want to specify your select as being multiple, declare it like this:

var One = '<div class = "filter"><select multiselect class="One1" data-col="0"><option value="a">' + "One" + '</option>';

Modify it to read as follows:

var One = '<div class = "filter"><select multiple class="One1" data-col="0"><option value="a">' + "One" + '</option>';

Outcome:

var data = {"headers":["One","Two","Three","Four","Five","Six","Seven","Number1","Number2"],"rows":[["One1","Two1","Three1","Four1","Five1","Six1","Seven1",11,1000],["One1","Two1","Three2","Four1","Five1","Six1","Seven1", 22, 2000],["One2","Two1","Three1","Four2","Five1","Six1","Seven1", 77, 99]]};


//////First table - Three1 for Views
var table1 = '<div class="filter_box"></div><div class="row"><div class="col-lg-6" style="background-color: #e90649; width: 117px;">&nbsp;</div><div class="col-lg-6" style="max-width: 100px; padding-left: 10px; font-size: 2vw;">Table<br/><br/><span style="font-size: 1vw;">One1, Three1, Five1</span></div><div class="col-lg-6"><div class="container"><table><thead><tr></tr><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Number1</th><th>Number2</th></tr></thead><tbody>';
var One = '<div class="filter"><select multiple class="One1" data-col="0"><option value="a">' + "One" + '</option>';

for (i = 0; i < data.rows.length; i++) 
{

table1 +="<tr><td>" + data.rows[i][0] + "</td><td>" + data.rows[i][1] + "</td><td>" + data.rows[i][2] + "</td><td>" + data.rows[i][3] + "</td><td>" + data.rows[i][4] + "</td><td>" + data.rows[i][5] + "</td><td>" + data.rows[i][6] + "</td><td>" + data.rows[i][7].toLocaleString() + "</td><td>" + data.rows[i][8].toLocaleString() + "</td><td>" + "</td></tr>";
  // Interactive filters

       One +='<option value="' + i + '">' + data.rows[i][0] + '</option>';
}
...
//$('.One1').multiselect();

@import url('https://fonts.googleapis.com/css?family=Roboto');

body, * { 
    margin: 0;
    color:#fff;
    font-family: Roboto; 
    text-transform:capitalize;
    }
.row {
    display: table;
    width: 100%;
    height: 241px; 
    background-color:#454545;
}
...
/*
tr th:nth-child(5) {
    background: red;
    display:none;
} 

tr td:nth-child(5) {
    background: red;
    display:none;
} 
*/

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>


<div id="one"></div>

Answer 3

Answer №2

To illustrate, if you wish to filter out "One1" in a table, you can easily achieve this using the following code:

$('td:contains("One1")').parent().hide();

and

$('td:contains("One1")').parent().show();

as a filtering method. If you intend to filter a specific column, you can combine the above method with your selector like so:

$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered), table tr > th:nth-child(yourColumnNumberShouldBeFiltered)')

. These expressions can be included in a function attached to the 'change' event of your multi-select dropdown.

UPDATE: The earlier approach, utilizing :contains(), filters for all instances of "One1", "One12", and similar patterns! For precise match filtration, consider using this code:

$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
    return $(this).text() == "yourExactTextToFilter";
}).parent().hide();

$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
    return $(this).text() == "yourExactTextToFilter";
}).parent().show();

For improved performance in finding exact matches, refer to this resource: Select element by exact match of its content

Answer 4

To illustrate, if you wish to filter out "One1" in a table, you can easily achieve this using the following code:

$('td:contains("One1")').parent().hide();

and

$('td:contains("One1")').parent().show();

as a filtering method. If you intend to filter a specific column, you can combine the above method with your selector like so:

$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered), table tr > th:nth-child(yourColumnNumberShouldBeFiltered)')

. These expressions can be included in a function attached to the 'change' event of your multi-select dropdown.

UPDATE: The earlier approach, utilizing :contains(), filters for all instances of "One1", "One12", and similar patterns! For precise match filtration, consider using this code:

$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
    return $(this).text() == "yourExactTextToFilter";
}).parent().hide();

$('table tr > td:nth-child(yourColumnNumberShouldBeFiltered)').filter(function() {
    return $(this).text() == "yourExactTextToFilter";
}).parent().show();

For improved performance in finding exact matches, refer to this resource: Select element by exact match of its content

Enhance Your HTML Table with a Dynamic Multi-select Interactive Filter

Answer №1

Answer №2

Similar questions

"Unlocking the potential of JSON: A guide to retrieving and displaying three specific fields in

Having trouble assigning a value to the datapicker through the onchange event and the name attribute in the code below

Tips for adjusting the color of a link in the Navbar after being clicked

Creating static pages with dynamic nested routes is a powerful feature that can enhance the structure

Express-Postgres encounters an issue with applying array filtering: error message indicates that the operator for comparing integer arrays and text arrays does not exist

Issue with jQuery animation opacity not functioning correctly while simulating toggling using .on() and .off() methods

Can you provide guidance on utilizing OneNote JavaScript APIs to interpret indented paragraphs within OneNote?

What are some strategies for optimizing React performance when managing controlled input from numerous components?

What is the best way to make sure the background color of a container stretches across the full width of the screen?

Is there a way to verify if the $compile process has finished?

How come sinon fails to identify my stub?

Create a div that is positioned absolutely on the page and spans the entire height of the

CSS for leaving white space at the end of one third of a container

Is it a common issue that sound.stop() doesn't seem to function properly, while sound.play() operates successfully within Howler

Three.js: Objects in the distance appear more subtle

Make sure to review for any duplicate entries prior to making updates to

What could be causing the carousel to be hidden in a Next.js project?

JavaScript CheckBox Color Change Not Functioning

I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

Footer flickers while changing routes