Используйте кнопку панели инструментов Bootstrap для фильтрации HTML-таблицы по столбцу - PullRequest
Новая
       8

Используйте кнопку панели инструментов Bootstrap для фильтрации HTML-таблицы по столбцу

0 голосов
/ 20 октября 2018

Я хотел бы создать панель инструментов Bootstrap, которая фильтрует таблицу значений (только Last Name столбец), когда выбирается буква:

enter image description here

Код: 

$(document).ready(function () {

        (function ($) {

      $('#lettersToolbar').on('click', function () {

        // displays all letters, not chosen one
        var letter = $(this).text();

        // tr's second td within body w/ class 'searchable'
        var rows = $('.searchable tr');

        // hide the rows
        rows.hide();

        // show rows that match
        rows.filter(function() {

          //locate Last Name td
          td = $(this).getElementsByTagName("td")[1];

          // match first character of text to letter
          return td.innerHTML.toUpperCase().indexOf(filter) == 0;

        });

      })

    }(jQuery));

});

У меня возникли сложности:

  • , идентифицирующий выбранную кнопку - letter содержит ВСЕ, D, M и S
  • определение столбца Last Name

Скрипка: https://jsfiddle.net/craibuc/q8b2ug5z/

Чего мне не хватает?

1 Ответ

0 голосов
/ 20 октября 2018

Попробуйте поиск по фрагменту кода ниже в second column of table, нажав button из группы кнопок. 

$(document).ready(function () {

    $(".btn-group > button.btn").on("click", function(){
       var letter =  $(this).text();        
	$(".searchable tr td:nth-child(2)").each(function () {
            $(this).parent().show();            
            if(!$(this).text().toUpperCase().indexOf(letter) == 0  && letter !== 'ALL'){
                $(this).parent().hide();
            }
       });      
   });
    
});
.btn-group > .btn:focus{
    background: #eee;
    outline: none!important;
    box-shadow:none;
    border: 1px solid #ddd;
  }
<html>
<head>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
</head>

<body>


<div class="btn-toolbar" role="toolbar" id="lettersToolbar">
    <div class="btn-group mr-2">
        <button class="btn btn-default" id="ALL">ALL</button>
        <button class="btn btn-default" id="D">D</button>
        <button class="btn btn-default" id="M">M</button>
        <button class="btn btn-default" id="S">S</button>
    </div>
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody class="searchable">
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Mickey</td>
        <td>Mouse</td>
      </tr>
      <tr>
        <td>Homer</td>
        <td>Simpson</td>
      </tr>
    </tbody>
</table>

</body>
</html>
...