Filtering html table (JS)

Question

I have an html table in my view that I want to filter with multiple filters. In this case, I have 3 filters, but I can have much more.

Here is a little part of the code, to show the problem

$(document).ready(function () {
   
   

    $('#datefilterfrom').on("change", filterRows);
    $('#datefilterto').on("change", filterRows);
    $('#projectfilter').on("change", filterProject);
});

function filterRows() {
    var from = $('#datefilterfrom').val();
    var to = $('#datefilterto').val();

    if (!from && !to) { // no value for from and to
        return;
    }

    from = from || '1970-01-01'; // default from to a old date if it is not set
    to = to || '2999-12-31';

    var dateFrom = moment(from);
    var dateTo = moment(to);

    $('#testTable tr').each(function (i, tr) {
        var val = $(tr).find("td:nth-child(2)").text();
        var dateVal = moment(val, "DD/MM/YYYY");
        var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none"; // [] for inclusive
        $(tr).css('display', visible);
    });
}
function filterProject() {
    var contentToColor = {
        "Заявка отменена": "#9900ff",
        "Подтверждено менеджером Vchasno": "green",
        "Отменено менеджером Vchasno": "#9900ff",
        "Отклонено региональным менеджером": "#9900ff",
        "Подтверждено региональным менеджером": "red"
    };
    var project = this.value;
    var filter, table, tr, td, i;
    filter = project.toUpperCase();
    table = document.getElementById("testTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[2];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }

    }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<div class="row">
        <div class="col-md-3">
            <h4>Дата з</h4>
            <input type="date" class="form-control" id="datefilterfrom" data-date-split-input="true">
        </div>
        <div class="col-md-3">
            <h4>Дата до</h4>
            <input type="date"  class="form-control" id="datefilterto" data-date-split-input="true">
        </div>
        <div class="col-md-2">
            <h4>Проект</h4>
           <select id="projectfilter" name="projectfilter" class="form-control"><option value="1">Тестовый проект</option><option value="2">Тест2</option></select>
        </div>
    </div>
<table id="testTable" class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Дата</th>
                    <th scope="col">Проект</th>
                   
               
                </tr>
            </thead>
            <tbody id="report">
              <tr>
                <td class="proposalId">9</td><td> 17/07/2018</td> <td> Тестовый проект</td>
              </tr>
              <tr><td class="proposalId">8</td><td> 18/07/2018</td><td> Тестовый проект</td></tr>
              <tr><td class="proposalId">7</td><td> 17/07/2018</td><td> Тест2</td></tr>
              <tr style=""><td class="proposalId">3</td><td> 19/07/2018</td><td> Тест2</td></tr>
    </tbody>
        </table>

Here is the full working snippet

https://codepen.io/suhomlineugene/pen/JBBGXa

When I set date filter it filters table great, but when I set the second filter it gets data from the table that I have unfiltered. Where is my problem?

Thank's for help!

The problem is filter = project.toUpperCase(); is returning 1 or 2 — Aravind S
– Aravind S, Commented Aug 5, 2018 at 6:48

Aravind S · Accepted Answer · 2018-08-05 07:01:06Z

2

the problem was filter = project.toUpperCase() is returning 1 or 2. I updated the logic to get the innerHTML and the do compare. Here is the modified code

function filterProject() {
    var contentToColor = {
        "Заявка отменена": "#9900ff",
        "Подтверждено менеджером Vchasno": "green",
        "Отменено менеджером Vchasno": "#9900ff",
        "Отклонено региональным менеджером": "#9900ff",
        "Подтверждено региональным менеджером": "red"
    };
    let dumb = this.options.selectedIndex;
    dumb = this.options[dumb].innerHTML;
    console.log(dumb);
    var filter, table, tr, td, i;
    filter = dumb.toUpperCase();
    table = document.getElementById("testTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[2];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "table-row";
            } else {
                tr[i].style.display = "none";
            }
        }

    }
}

Code pen link here

answered Aug 5, 2018 at 7:01

Aravind S

2,3952 gold badges15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Eugene Sukh Over a year ago

Dude . Thank's But if I will had one more filter. I will have problem. I will Update code

Aravind S Over a year ago

@EugeneSukh could you please elaborate, so that I can have a look

Aravind S Over a year ago

@EugeneSukh it looks like working from my end. Could you tell a case where it failed

Eugene Sukh Over a year ago

If you set filters like this 07/16/2018 - 07/19/2018 - Тест2 - Тест2 услуга You will see that in Проект column you will have Тестовый проект value. That's not right, it need to be only Тест2 value

Aravind S Over a year ago

that is beacuse you are doing the filtering seperately,filterProject and filterService. so its not a combined one. You have to make it as a combined one

|

dev8080 · Accepted Answer · 2018-08-05 06:55:45Z

1

When you do filterProject(), check if you have already filtered out the rows you are iterating over:

....
for (i = 0; i < tr.length; i++) {
  if(tr[i].style.display !== 'none'){
...

Here's a working codepen:

 https://codepen.io/anon/pen/NBBxad

edited Aug 5, 2018 at 6:55

answered Aug 5, 2018 at 6:33

dev8080

4,0051 gold badge15 silver badges18 bronze badges

2 Comments

dev8080 Over a year ago

@EugeneSukh check now.

Eugene Sukh Over a year ago

Yeah. Thank's it helps

Franz Schwerdtmann · Accepted Answer · 2018-10-08 19:51:51Z

0

HTML

<input type="text" id="input_id" onkeyup="tableSearch('id', 'table', 0)">

Javascript

function tableSearch(input_id, table_id, col) {
  var input, filter, table, tr, td, i;
  input = document.getElementById(input_id);
  filter = input.value.toUpperCase();
  table = document.getElementById(table_id);
  tr = table.getElementsByTagName('tr');

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName('td')[col];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

answered Oct 8, 2018 at 19:51

Franz Schwerdtmann

871 silver badge7 bronze badges

Collectives™ on Stack Overflow

Filtering html table (JS)

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related