Таблица начальной загрузки не разрешает клики (ссылку) при поиске или результате фильтрации

ProgramBox

Таблица начальной загрузки не разрешает клики (ссылку) при поиске или результате фильтрации

Post author:admin
Запись опубликована:7 марта, 2023
Post category:Вопросы по программированию

#javascript #html #jquery #django #twitter-bootstrap

#javascript #HTML #jquery #django #twitter-bootstrap

Вопрос:

Я новичок в таблице начальной загрузки и использую этот пример и добавил функцию щелчка, которая работает нормально, пока я не применю какие-либо функции начальной загрузки, такие как фильтрация, поиск, разбивка на страницы и другие, после применения каких-либо функций начальной загрузки, которые не могут щелкать, как раньше, моя функция строки таблицы не работает и не может получить идентификатор строки таблицыдля выбранного флажка его только show ( 'btSelectItem': ['on', 'on'] ) в консоли просмотра Django вместо идентификатора или имени таблицы один раз нажмите какую-либо кнопку.

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

1. что делает консоль. возврат журнала? Можете ли вы показать свой html, где вы подключаете скрипты?

2. console.log (таблица); просто верните мой полный HTML-файл со строками и столбцами, которые находятся в консоли. журнал, который мне нужно посмотреть?

3. Если вы посмотрите выше, функция щелчка кода работает и перенаправляется на URL, как и ожидалось, но когда я применяю любой фильтр, поиск или любые функции таблицы начальной загрузки, он перестает работать. щелчок должен работать даже с фильтром и поиском. Я даже пытался удалить все функции и сохранить только .table-row, но даже это то же самое.

4. У кого-нибудь есть какие-либо советы?? Пожалуйста, помогите

Ответ №1:

Простите меня за слепоту. Попробуйте это:

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

1. НЕТ, все то же самое, после применения фильтра herf не работает: (

2. Потрясающе, это сработало, спасибо. у вас есть какие-либо идеи, почему моя кнопка удаления и сохранения не дает идентификатор или имя строки таблицы? в нем отображается только ‘btSelectItem’: [‘вкл.’, ‘вкл.’] «вкл.» на основе выбранной строки.

3. Вы пробовали что-то подобное? examples.bootstrap-table.com/#methods/remove.html#view-source

4.Есть идеи, как управлять флажком с помощью функции Django my django view.py флажок «Заголовок request.POST.get("save"): print(request.POST.get) for item in items.all(): if request.POST.get("c" str(item.id)) == "clicked": print(item.id) моей HTML-таблицы <th data-field="state" data-checkbox="true"></th> » и флажок «тело таблицы» <td class="bs-checkbox "><input type="checkbox", value="clicked", name="c{{host.id}}"</td>

5. Даже когда я экспортирую в CSV с помощью bootstrap table export, столбец checkbox, замененный на on , не должен отображать этот столбец checkbox как on . Не уверен, как получить идентификатор элемента вместо «вкл.».