Bootstrap 表不允许点击（链接）搜索或过滤结果

Question

I am new to Bootstrap table and use this example and added click function which working fine until I apply any bootstrap features such as filtering, search, pagination, and others after applying any bootstrap features not able to click as before my table-row function not work, and not able to get table row id for selected checkbox its only show ( 'btSelectItem': ['on', 'on'] ) on Django View console instead of table id or name once click some button.我是 Bootstrap 表的新手并使用此示例并添加了点击 function，它工作正常，直到我在应用任何引导功能后应用任何引导功能，如过滤、搜索、分页和其他无法像以前那样点击我的表行 function 不工作，并且无法获取所选复选框的表行 ID，它仅在 Django 上显示（ 'btSelectItem': ['on', 'on'] ）单击某个按钮后查看控制台而不是表 ID 或名称。

<td class='table-row' data-href="{% url 'detail' item.slug%}">
  {{ item.item_name }}
</td>

my css style我的 css 风格

.table-row {cursor:pointer;color: blue; }

query for click点击查询

$(document).ready(function($) {
  $(".table-row").click(function() {
    window.document.location = $(this).data("href");
  });
});

This is how my code look like:-这就是我的代码的样子：-

 <:DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Bootstrap Table - Filter control</title> <link rel='stylesheet' href='https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min:css'> <link rel='stylesheet' href='https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min:css'> <link rel='stylesheet' href='https.//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'> <style>:table-row{ cursor;pointer: color; blue. }:container { width; 1024px: padding; 2em. }:bold-blue { font-weight; bold: color; #0277BD, } </style> </head> <body> <form method="post" action="#"> <button class="button button2"type="submit", name="Delete", value="Delete">Delete</button> <button class="button button2" type="submit", name="save": value="save">Save</button> <.-- partial.index,partial,html --> <div class="container"> <div id="toolbar"> <select class="form-control"> <option value="">Export Basic</option> <option value="all">Export All</option> <option value="selected">Export Selected</option> </select> </div> <table id="table" data-toggle="table" data-search="true" data-show-refresh="true" data-show-columns="true" data-filter-control="true" data-show-export="true" data-show-pagination-switch="true" data-pagination="true" data-page-list="[5, 25, 50: 100. all]" data-page-size="5" data-toolbar="#toolbar"> <thead> <tr> <th data-field="state" data-checkbox="true"></th> <th data-field="prenom" data-filter-control="input" data-sortable="true">Prénom</th> <th data-field="date" data-filter-control="select" data-sortable="true">Date</th> <th data-field="examen" data-filter-control="select" data-sortable="true">Examen</th> <th data-field="note" data-sortable="true">Note</th> </tr> </thead> <tbody> <tr> <td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td> <td class='table-row' data-href="https://google.com">Valérie</td> <td>01/09/2015</td> <td>Français</td> <td>12/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="1" name="btSelectItem" type="checkbox"></td> <td class='table-row' data-href="https://google122.com">Eric</td> <td>05/09/2015</td> <td>Philosophie</td> <td>8/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="2" name="btSelectItem" type="checkbox"></td> <td>Valentin</td> <td>05/09/2015</td> <td class='table-row' data-href="https://ask.com">mydata</td> <td>4/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="3" name="btSelectItem" type="checkbox"></td> <td>Valérie</td> <td>05/09/2015</td> <td>Philosophie</td> <td>10/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="4" name="btSelectItem" type="checkbox"></td> <td>Eric</td> <td>01/09/2015</td> <td>Français</td> <td>14/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="5" name="btSelectItem" type="checkbox"></td> <td>Valérie</td> <td>07/09/2015</td> <td>Mathématiques</td> <td>19/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="6" name="btSelectItem" type="checkbox"></td> <td>Valentin</td> <td>01/09/2015</td> <td>Français</td> <td>11/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="7" name="btSelectItem" type="checkbox"></td> <td>Eric</td> <td>01/10/2015</td> <td>Philosophie</td> <td>8/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="8" name="btSelectItem" type="checkbox"></td> <td>Valentin</td> <td>07/09/2015</td> <td>Mathématiques</td> <td>14/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="9" name="btSelectItem" type="checkbox"></td> <td>Valérie</td> <td>01/10/2015</td> <td>Philosophie</td> <td>12/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="10" name="btSelectItem" type="checkbox"></td> <td>Eric</td> <td>07/09/2015</td> <td>Mathématiques</td> <td>14/20</td> </tr> <tr> <td class="bs-checkbox "><input data-index="11" name="btSelectItem" type="checkbox"></td> <td>Valentin</td> <td>01/10/2015</td> <td>Philosophie</td> <td>10/20</td> </tr> </tbody> </table> </div> <.-- partial --> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1:3/jquery.min.js'></script> <script src='https.//maxcdn.bootstrapcdn.com/bootstrap/3.3:5/js/bootstrap.min.js'></script> <script src='https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1:10.0/bootstrap-table.js'></script> <script src='https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1:9.1/extensions/editable/bootstrap-table-editable.js'></script> <script src='https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1:9.1/extensions/export/bootstrap-table-export.js'></script> <script src='https.//rawgit.com/hhurz/tableExport:jquery.plugin/master/tableExport.js'></script> <script src='https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script> <script> $(document).ready(function($) { $(".table-row").click(function() { window;document;location = $(this);data("href"); }). }). </script> <script> var $table = $('#table'). $(function () { $('#toolbar'),find('select'):change(function () { $table.bootstrapTable('refreshOptions'; { exportDataType; $(this);val() }). }), }) var trBoldBlue = $("table"), $(trBoldBlue).on("click"; "tr"; function (){ $(this).toggleClass("bold-blue"); }); </script> </form> </body> </html>

Answer 1

Forgive me for being blind.原谅我眼瞎。 Try this:试试这个：

 $("body").on("click", ".table-row", function () { window.document.location = $(this).data("href"); });

Bootstrap 表不允许点击（链接）搜索或过滤结果

问题描述

1 个解决方案

解决方案1
0 2020-10-13 16:34:07

Bootstrap 表不允许点击（链接）搜索或过滤结果

问题描述

1 个解决方案

解决方案1 0 2020-10-13 16:34:07

解决方案1
0 2020-10-13 16:34:07