Бутстрап кликабельный и сортируемый - не может щелкнуть после сортировки - PullRequest
Новая
       51

Бутстрап кликабельный и сортируемый - не может щелкнуть после сортировки

0 голосов
/ 04 февраля 2019

Я использую Bootstrap 4.2.1 с таблицей начальной загрузки 1.13.3 для создания таблицы, которую можно сортировать и щелкать по каждой строке.Каждая строка кликабельна, пока таблица не отсортирована.

После сортировки Google показывает, что обработчик события щелчка TR был удален.

Обработчик щелчка добавляется в обработчик события onload, как показано ниже.Что мне нужно сделать, чтобы предотвратить удаление события click или восстановить событие click после операции сортировки? 

function onLoaded(){
   $(function(){
      $('.table tr[data-href]').each(function(){
         $(this).click(function(){
         document.location = $(this).attr('data-href');
        });
      })
    });
}
tr.clickable-row {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.3/bootstrap-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.3/bootstrap-table.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<body onload="onLoaded()">
  <wrapper class="d-flex flex-column">
      <main class="container">
          <div class="table-responsive-sm">
              <table data-toggle="table" data-sortable="true" class="table table-sm table-striped table-bordered table-hover">
                  <thead class="thead-light">
                      <tr>
                          <th data-sortable="true" scope="col">
                              For
                          </th>
                          <th data-sortable="true" scope="col">
                              Name
                          </th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr class="clickable-row" data-href="ZZZZ.html?YYYY=32">
                          <td>Paul Read</td>
                          <td>23/05/2018 13:11</td>
                      </tr>
                      <tr class="clickable-row" data-href="ZZZZ.html?YYYY=31">
                          <td>Paul Read</td>
                          <td>23/05/2018 13:09</td>
                      </tr>
                  </tbody>
              </table>
          </div>
      </main>
  </wrapper>
</body>

Большое спасибо, Павел

1 Ответ

0 голосов
/ 05 февраля 2019

Я отредактировал ваш код в этой скрипке: http://jsfiddle.net/eitanmg/frmLy3q8/12/

Ключ в том, чтобы использовать встроенное событие onClickRow, чтобы функциональность оставалась после сортировки / поиска / фильтрации таблицы.

другие внесенные изменения:

Я удалил тег onload="onLoaded()" в теле и полностью удалил функцию onLoaded().Я добавил id="table" к табличному тегу, чтобы на него можно было ссылаться из кода javascript.и вместо функции onLoaded() я использовал событие onClickRow как: 

$('#table').on('click-row.bs.table', function (row, $element, field) {
    alert("you are about to navigate to the following url: " + $element._data.href)
    document.location = $element._data.href;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...