таблица фильтра с jquery дает плохой результат - PullRequest
Новая
       0

таблица фильтра с jquery дает плохой результат

0 голосов
/ 14 апреля 2020

Мне нужно отфильтровать таблицу по заголовку, при написании заголовка в textBox таблица списка фильтруется и приводит к беспорядку и неправильному формату.

Вот мой код:

шаблон . html

{% load static %}
<html lang="en">
<head>
         ... all src
</head>
<body>
        <script src="{% static 'videoclub/js/search.js' %}"></script>


<h1 id="searchTitle">Search a movie</h1>

    <div class="table-wrapper">

        <div class="container">

                <td>
                    <label for="title">Search by title</label>
                    <input  type="text" id="title" placeholder="Title" >

                </td>

                <td>
                    <label for="director">Search by Director</label>
                    <input type="text" id="director" placeholder="Director" >
                </td>
                <td>
                    <label for="years">Choose a year</label>
                      <select class="form-control-sm ml-1 w-40" id="years"></select>
                </td>
                <td>
                    <input type="submit" id="searchButton" value="Search Movie">
                </td>
        </div>

        <table   class="table table-striped table-hover" id="list-movie" >

            <thead>
               <td> LIST OF MOVIES</td>
            </thead>
            <tbody id="tableBody">
                <!--película description-->
                {% for movie in allMovies %}

                    <tr>
                        <td align="center" ROWSPAN="4">
                          <img width="100" height="" src="{% static movie.movie_url_cover %}" alt="Pulp Fiction ">
                        </td>

                        <td abbr="red" ><font color="#B40431" size="3"> {{movie.movie_title}} ({{movie.movie_year}})</font></td>
                    </tr>


                    <tr>
                        <td>{{movie.movie_rating}}</td>
                    </tr>
                    <tr>
                     <td><font color="#084B8A" size="2">{{movie.movie_director}}</font></td>
                    </tr>
                    <tr>
                        <td><font color="#585858" size="1">{{movie.movie_actors}}</font></td>
                    </tr>

                {% endfor %}
                <!--   ******    -->

            </tbody>
        </table>
    </div>

</body>
</html>

search. js

$(document).ready(function() {
    $("#title").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#tableBody  tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

Сначала список таблиц содержит все фильмы в правильном формате, но при фильтрации формат не точный Есть идеи??? Ваша помощь будет высоко ценится.

Ответы [ 3 ]

0 голосов
/ 19 апреля 2020

Вы можете использовать этот поиск по названию и поиск по режиссерским работам, см. Живой пример

https://codepen.io/vkv88/pen/eYpzxPp?editors=1010

я сделал tbody внутри для l oop шаблона Twig также дал директору TD & title TD имя класса 

                {% for movie in allMovies %}
            <tbody>

                    <tr>
                        <td align="center" ROWSPAN="4">
                          <img width="100" height="" src="{{movie.movie_url_cover}}" alt="Description ">
                        </td>

                        <td abbr="red" class="title"><font color="#B40431" size="3"> {{movie.movie_title}} ({{movie.movie_year}})</font></td>
                    </tr>


                    <tr>
                        <td>{{movie.movie_rating}}</td>
                    </tr>
                    <tr>
                     <td class="dircetor"><font color="#084B8A" size="2">{{movie.movie_director}}</font></td>
                    </tr>
                    <tr>
                        <td><font color="#585858" size="1">{{movie.movie_actors}}</font></td>
                    </tr>
            </tbody>

                {% endfor %}

js

$(document).ready(function () {
  $("input#title,input#director").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    input = $(this).attr("id");
    $("#list-movie tbody").hide();
    $("#list-movie tbody")
      .filter(function () {
        return (
          $(this)
            .find("." + input)
            .text()
            .toLowerCase()
            .indexOf(value) > -1
        );
      })
      .show();
  });
});
0 голосов
/ 19 апреля 2020

Ваш код выполняет только фильтрацию строк изображения и имени mov ie. Другие строки, такие как MOV ie рейтинг, MOV ie режиссер, MOV ie актеры полностью игнорируются. Поэтому вам нужно изменить шаблон правильно и целесообразно.

Прежде всего,

Ваши детали в одном мове ie должны быть в одном ряду, а не в нескольких, поэтому попробуйте преобразовать его в одну строку

и добавить класс в mov ie -name td, для простоты фильтрации

Like 

<tr>
   <td align="center" ROWSPAN="4">
      <img width="100" height="" src="{% static movie.movie_url_cover %}" alt="Pulp Fiction ">
   </td>

    <td abbr="red" class="movie-name"><font color="#B40431" size="3"> {{movie.movie_title}} ({{movie.movie_year}})</font></td>

    <td>{{movie.movie_rating}}</td>

    <td><font color="#084B8A" size="2">{{movie.movie_director}}</font></td>

    <td><font color="#585858" size="1">{{movie.movie_actors}}</font></td>
</tr>

Теперь во время фильтрации просто измените лог c примерно так 

$(document).ready(function() {
    $("#title").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#tableBody  tr").filter(function() {
            $(this).toggle($(this.find('.movie-name')).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

Этот код будет искать класс mov ie -name и сравнивать его текст, а затем фильтровать строку

0 голосов
/ 19 апреля 2020

Проблема в вашем коде состоит в том, что вы пытаетесь переключать только строку внутри таблицы, которая отображает заголовок mov ie, а не весь блок для mov ie details

Лучший способ справиться с этим - реструктурировать html для создания структуры типа вложенной таблицы и присвоения идентификатора элемента вложенной таблицы в качестве заголовка mov ie, как показано ниже 

<tbody id="tableBody">
    <!--película description-->
    {% for movie in allMovies %}
      <tr>
        <table id="{{ movie.movie_title }}">
          <tr>
              <td align="center" ROWSPAN="4">
                <img width="100" height="" src="{% static movie.movie_url_cover %}" alt="Pulp Fiction ">
              </td>

              <td abbr="red" ><font color="#B40431" size="3"> {{movie.movie_title}} ({{movie.movie_year}})</font></td>
          </tr>


          <tr>
              <td>{{movie.movie_rating}}</td>
          </tr>
          <tr>
           <td><font color="#084B8A" size="2">{{movie.movie_director}}</font></td>
          </tr>
          <tr>
              <td><font color="#585858" size="1">{{movie.movie_actors}}</font></td>
          </tr>
        </table>
      </tr>
    {% endfor %}
    <!--   ******    -->

, как только вы сделаете вышеуказанное изменить макет и настроить стиль, вы можете применить фильтр к таблице на основе атрибута id и переключать отображение, как показано ниже 

$(document).ready(function(){
    $("#title").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#tableBody  tr > table").filter(function() {
          $(this).toggle($(this).attr("id").toLowerCase().indexOf(value) > -1)
        });
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...