I am completely new to Datatables, but think its use may solve my problem.

baz · July 7

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

baz · July 7

I have an html table with 4 rows and 4 columns, as shown below.

At present, selecting "1000" in the length searchbox correctly returns the 2 rows matching that search term.

However, I wish to find values in the length field greater than or less than an entered value, so that "1500" returns "2000" when I click something or the 2 rows containing "1000" if I click something else.

I thought of adding either two checkboxes that return "y" or "n" if checked, or a dropdown menu. The questions are: which is better, and how do I change the existing code to get the desired result?

Being relatively new to JS/JQuery, I cannot develop the code for greater or less, and I cannot think how to link this to the checkboxes or dropdown. This is where Datatables should help. The code below will need modifying to include:

new DataTable.Editor( {
table: '#data_table'
} );

and

$editor->where( 'length', 1000, '>' );

This is the current working html and JQery code:

<!DOCTYPE html>
<html>
<head>

<script src="scripts/datatables.js"></script>
<link rel="stylesheet" href="css/datatables.css">

import DataTable from 'datatables.net-dt';
import 'datatables.net-responsive-dt';
 
let table = new DataTable('#myTable', {
    responsive: true
});

</head>
<body bgcolor="AED6F1">
<div class="sticky">
<center>

Search Strain Data

Please see the help for further details.

taxon name (genus/species)	strain	accession	length (bp)
Jack	PC	AY	1000
Mike	OP	BZ	1000
Fred	UT9	AY	1500
Mike	PC	CP	2000

$(document).ready( function () {
    $('#datatable').DataTable();
} );

```
function searchTable() {
// Get the search input values
var name = document.getElementById("name").value.toLowerCase();
var strain = document.getElementById("strain").value.toLowerCase();
var accession = document.getElementById("accession").value.toLowerCase();
var length =
document.getElementById("length").value.toLowerCase();
// Get the table and rows
var table = document.getElementById("data_table");
var rows = table.getElementsByTagName("tr");

            // Loop through the rows and hide those that don't match the search criteria 
            for (var i = 1; i < rows.length; i++) { // Skip the header row 
                var cells = rows[i].getElementsByTagName("td"); 
                var match1 = cells[0].innerText.toLowerCase().includes(name); 
                var match2 = cells[1].innerText.toLowerCase().includes(strain); 
                var match3 = cells[2].innerText.toLowerCase().includes(accession); 
                var match4 = cells[3].innerText.toLowerCase().includes(length);  

                if (match1 && match2 && match3 && match4) { 
                    rows[i].style.display = ""; 
                } else { 
                    rows[i].style.display = "none"; 
                } 
            }
        } 
    ``` 
</body>

</html>

tangerine · July 7

I think that what you need is DT's Searchbuilder, which easily enables "range" searches.
https://datatables.net/extensions/searchbuilder/

baz · July 18

Thanks for this - I'll try.

I am completely new to Datatables, but think its use may solve my problem.

I am completely new to Datatables, but think its use may solve my problem.

Answers

Howdy, Stranger!

Categories

DataTables

I am completely new to Datatables, but think its use may solve my problem.

I am completely new to Datatables, but think its use may solve my problem.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables