引导可点击和可排序 - 排序后无法点击 - Bootstrap clickable and sortable

我正在使用带有引导表1.13.3的Bootstrap 4.2.1创建一个每行可排序和可点击的表。在对表格进行排序之前，每一行都是可单击的。

对 Google 工具进行排序后，显示 TR 点击事件处理程序已被删除。

单击处理程序按如下方式添加到 onload 事件处理程序中。我应该怎么做才能防止点击事件被删除或在排序操作后恢复点击事件？

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>

非常感谢保罗

我已经将您的代码编辑成这个小提琴：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;
});

引导可点击和可排序 - 排序后无法点击

相关内容

最新更新

热门标签：