簡體   English   中英

Bootstrap 表不允許點擊(鏈接)搜索或過濾結果

[英]Bootstrap table not allow clicks (link) on search or filter result

我是 Bootstrap 表的新手並使用此示例並添加了點擊 function,它工作正常,直到我在應用任何引導功能后應用任何引導功能,如過濾、搜索、分頁和其他無法像以前那樣點擊我的表行 function 不工作,並且無法獲取所選復選框的表行 ID,它僅在 Django 上顯示( 'btSelectItem': ['on', 'on'] )單擊某個按鈕后查看控制台而不是表 ID 或名稱。

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

我的 css 風格

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

點擊查詢

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

這就是我的代碼的樣子:-

 <: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>

原諒我眼瞎。 試試這個:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM