CODEWITHSUNDEEP
javascripthtml
Custard
Custard

Reputation: 49

Select Statement on HTML Table rows

So lets say I have A Table in HTML

|VENDOR|ITEM|TOTAL|
|BNB|ITEM1|1000|
|BNB|ITEM2|250|
|XZY|ITEM2|600|
|BNB|ITEM3|1000|
|XZY|ITEM1|300|

what I need to do is a select statement something like in sql

SELECT * WHERE VENDOR = 'BNB';

it should return

|VENDOR|ITEM|TOTAL|
|BNB|ITEM1|1000|
|BNB|ITEM2|250|
|BNB|ITEM3|1000|

I dont want to run through a for loop as when we have 50000+ rows it will take to long, I have to run through a for loop already with the list of vendors. so 100 vendors and running through 50000 rows each time. You can see the issues.

Upvotes: 0

Views: 74

Answers (3)

Custard
Custard

Reputation: 49

so @epascarello helped come up with an idea so I need to give him credit. It wasn't exactly what i needed but got me on the right track.

so what i did in the background was.

 proddb.each("SELECT * FROM table_a", function (DBRow) {

        var row = document.createElement("tr");
        /////////////////////////////////////////
        cell = document.createElement("td");
        cell.innerHTML = DBRow.col1;
        row.appendChild(cell);
        /////////////////////////////////////////
        cell = document.createElement("td");
        cell.innerHTML = DBRow.col2;
        row.appendChild(cell);


        //add queries
        row.dataset.table_a_col1= DBRow.col1;
        row.dataset.table_a_col2= DBRow.col2;

        //end queries

        html_table_name.appendChild(row);
    });

now in the back end I can access the row like this

    var tablerow= document.querySelectorAll('tr[data-table_a_col1="' + searchvalue + '"]');
    for (var ii = 0; ii < tablerow.length; ii++) {

        if (tablerow[ii].cells[21].innerHTML == "1") {
            //do the stuff here.
        }
    }

this has now reduced the row count from 50000 to 361 which has sped up alot thanks for all the help.

@epascarello if you could copy this as your answer and give me some credit as well ill accept the answer regards thanks for everything bud.

Upvotes: 0

epascarello
epascarello

Reputation: 207501

In the end you need to loop in some way. Using a data attribute on the row can let you use CSS selector with querySeectorAll to get the items you want. 

var table = document.getElementById("details");
document.getElementById("sel").addEventListener("change", function () {
   var val = this.value;
   table.classList.toggle("filter", val.length>0);
   Array.from(document.querySelectorAll('#details tbody tr.active')).forEach( function (elem) {
     elem.classList.remove("active");
   });
   if (val.length) {
       var rows = document.querySelectorAll('#details tbody tr[data-vendor="' + val + '"]');
       Array.from(rows).forEach( function (row){
         row.classList.add("active");
       });
   }
});
#details.filter tbody tr {
   display:none;
}

#details.filter tbody tr.active {
   display: table-row;
}
<select id="sel">
  <option value=""></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<table id="details">
  <thead>
    <tr><th>Vend</th></tr>    
  </thead>
  <tbody>
    <tr data-vendor="A"><td>A-1</td></tr>
    <tr data-vendor="A"><td>A-2</td></tr>
    <tr data-vendor="A"><td>A-3</td></tr>
    <tr data-vendor="A"><td>A-4</td></tr>
    <tr data-vendor="B"><td>B-1</td></tr>
    <tr data-vendor="B"><td>B-2</td></tr>
    <tr data-vendor="B"><td>B-3</td></tr>
    <tr data-vendor="C"><td>C-1</td></tr>
  </tbody>
</table>

Upvotes: 1

Dimitris K
Dimitris K

Reputation: 552

You must not display the full 50k results on load. It must be set to display none. That way it will load in a reasonable time.

The solution to this is pretty easy, you just have to add a class for each vendor on the rows. Then you can select this class with jquery to show.

$('tr').hide();
$('.specific-vendor').show();

Upvotes: 0

Related Questions