CODEWITHSUNDEEP
javascriptjqueryhtml
Mr. Jo
Mr. Jo

Reputation: 5261

Live search in table for specific column

I'm currently trying to create a live search for a specific column in a table. I've searched a bit but I can only find solutions to search over all columns. This is my code:

function searchInTable(table) {
    var value = this.value.toLowerCase().trim();

    jQuery(table).each(function (index) {
        if (!index) return;
        jQuery(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search-table-input" class="search-table-input" type="text"
           onkeyup="searchInTable('.table tr')" placeholder="Search Number...">
<table class="table">
  <thead>
    <tr>
		  <th class="table-number">
        <span class="nobr">Number</span>
      </th>
			<th class="table-date">
        <span class="nobr">Date</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a>264</a>
      </td>
      <td>
        <span>2019-01-02</span>
      </td>
    </tr>
    <tr>
      <td>
        <a>967</a>
      </td>
      <td>
        <span>2019-01-02</span>
      </td>
    </tr>
    <tr>
      <td>
        <a>385</a>
      </td>
      <td>
        <span>2019-01-02</span>
      </td>
    </tr>
    <tr>
      <td>
        <a>642</a>
      </td>
      <td>
        <span>2019-01-02</span>
      </td>
    </tr>
  </tbody>
</table>

My function has some errors and don't work like it should.

How can I change my function that way that when I start typing only the number gets filtered? I need to make the function dynamically so that I can pass the column which should be used for the search.

Upvotes: 0

Views: 256

Answers (1)

Duncan Thacker
Duncan Thacker

Reputation: 5188

The line that's causing it to search over all the columns is this one:

jQuery(this).find("td").each(function () {

...which takes each cell in the current row and looks to see if it contains value. If you only want to check as specific column, you should pass in the column index as something like columnIndex, and then you can select the correct column by doing jQuery(this).find("td").eq(columnIndex), using jQuery's .eq() function to select the correct one. The code should look something like this:

function searchInTableColumn(table, columnIndex) {

    //check this.value exists to avoid errors
    var value = this.value ? this.value.toLowerCase().trim() : "";

    jQuery(table).each(function (index) {
        if (!index) return;
        var tableCell = jQuery(this).find("td").eq(columnIndex);
        var id = tableCell.text().toLowerCase().trim();
        var not_found = (id.indexOf(value) == -1);
        $(this).closest('tr').toggle(!not_found);
    });
}

Then you can call searchInTableColumn(table, 0) and it will only look in the first column.

Upvotes: 2

Related Questions