Table Search JS or jQuery

Asked

Viewed 490 times

1

I want to do a search code using a Regex for strings, and normal numbers, and that I use the columns and rows of the table.

I’ve tried several hypotheses, but none of them make that "refresh" of going back to the beginning when I delete the word or number you’re looking for.

I leave a small print / code:

Tabela com o seu respectivo search The Code is this:

 <div class="row">
      <div class="containerSearch">
          <input type="text" id="searchTabela" placeholder="Search" data-table="resultsTable" />
           <button class="iconSearch"><i class="fa fa-search"></i></button>
      </div>
      <table id="tabelaProgramas" class="table table-hover text-center resultsTable" style="width: 100%">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Top</th>
                                            <th class="text-center"></th>
                                            <th class="text-center">Program</th>
                                            <th class="text-center">Start</th>
                                            <th class="text-center">Length</th>
                                            <th class="text-center">Rat%</th>
                                            <th class="text-center">Shr%</th>
                                            <th class="text-center">Rch%</th>
                                        </tr>
                                        <tr class="warning no-result text-center">
                                            <td colspan="8"><i class="fa fa-warning"></i>Sem resultados obtidos!</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>
                                                <img src="img/logo_tvi.png" class="img-responsive" style="margin: 0 auto;" /></td>
                                            <td>Jornal das 8</td>
                                            <td><i class="fa fa-clock-o icontabelaProgramas" style="color: #8EC127;"></i>19:56:02</td>
                                            <td><i class="fa fa-arrows-h icontabelaProgramas"></i>01:47:57</td>
                                            <td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>13.4</td>
                                            <td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>28.8</td>
                                            <td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>29.4</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>
                                                <img src="img/logo_rtp1.png" class="img-responsive" style="margin: 0 auto;" /></td>
                                            <td>Jornal das 8</td>
                                            <td><i class="fa fa-clock-o icontabelaProgramas" style="color: #8EC127;"></i>19:56:02</td>
                                            <td><i class="fa fa-arrows-h icontabelaProgramas"></i>01:47:57</td>
                                            <td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>13.4</td>
                                            <td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>28.8</td>
                                            <td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>29.4</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>
                                                <img src="img/logo_rtp2.png" class="img-responsive" style="margin: 0 auto;" /></td>
                                            <td>Jornal das 8</td>
                                            <td><i class="fa fa-clock-o icontabelaProgramas" style="color: #8EC127;"></i>19:56:02</td>
                                            <td><i class="fa fa-arrows-h icontabelaProgramas"></i>01:47:57</td>
                                            <td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>13.4</td>
                                            <td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>28.8</td>
                                            <td><i class="fa fa-line-chart icontabelaProgramas" style="color: #8EC127;"></i>29.4</td>
                                        </tr>

                                        //Os outros tr's são iguas, são um exemplo

                                    </tbody>
                                </table>
                            </div>

I know there are jQuery plug-ins, but I would like to practice the logic and for that I ask for your help. I’ve seen some code, some made sense to me, only they don’t apply well and that’s where I get even more confused. Someone can help?

javascript quest table

  • What do you want to happen when there’s a match? Hide the others?

  • @Sergio exactly, who hides those who have no match.

1 answer

1


Create an object with the data from this table to speed up processing later. At my suggestion I created an array of objects. Each object has the element tr and the contents of that line.

var $linhas = $('#tabelaProgramas tr');
var tabela = $('#tabelaProgramas tr').map(function (i, tr) {
    return {
        el: tr,
        conteudo: $(tr).text()
    }
}).get();

Then in the keyup you can go through this array and show only the elements that have text and are common to what was requested in the input:

$('#searchTabela').on('keyup', function (e) {
    var searchString = this.value;
    var linhas = tabela.filter(function (tr) {
        return tr.conteudo.indexOf(searchString) != -1;
    }).map(function (l) {
        return l.el;
    });
    $linhas.hide();
    $(linhas).show();
});

Example: https://jsfiddle.net/h6onh7gm/

  • Does this also have spaces? In this case if you put "journaliss8" supposedly you should not find, because there is "Jornal das 8". And it can be uppercase or lowercase which is the same. I mean, searching for "8:00" is like searching for "8:00" you know? Thank you for your help! :)

  • @n1c0t0p my suggestion implies that the text has to be exactly the same as what you have in the table. If you want to be more permissive by ignoring spaces or large letters, etc then you have to give examples of the behavior you want for the code to be adjusted.

  • It’s just ignoring the letters being big or small and always with spaces basically. For example, if you have in the table "Pedro Cruz", I will search "peter" find in the table, if you search "Peter" also find. That is, it is not case sensitive. There is another case. In my thead I have a div "no-result" that can only be called (that is, changing the display/visibility, in this case display) when it does not find the word. Thanks again @Sergio

  • 1

    @n1c0t0p -> https://jsfiddle.net/h6onh7gm/1/

  • That’s right. Thank you @Sergio , I said cntg on fb, as soon as I have more time I speak cntg. Thank you very much! ;)

Browser other questions tagged javascript quest table

You are not signed in. Login or sign up in order to post.