【发布时间】：2021-01-23 10:51:38
【问题描述】：
我是 Bootstrap 表的新手，使用 this example 并添加了单击功能，该功能可以正常工作，直到我在应用任何无法像以前一样单击的引导功能后应用任何引导功能，例如过滤、搜索、分页和其他功能-row 函数不起作用，并且无法获取选定复选框的表行 ID，一旦单击某个按钮，它只会在 Django View 控制台上显示 ('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>【问题讨论】：
-
console.log 返回什么？你能在你插入脚本的地方显示你的 html 吗？
-
console.log(table);只需返回包含行和列的 Html 完整文件，我需要查看哪个 console.log？
-
如果您查看上面的代码，单击功能可以正常工作并按预期重定向到 url，但是当我应用任何过滤器、搜索或任何 Bootstrap 表功能时，它就会停止工作。即使使用过滤器和搜索，点击也应该有效。我什至试图删除所有功能并只保留 .table-row 但它还是一样的。
-
有人有什么建议吗？？请帮忙
标签： javascript html jquery django twitter-bootstrap