Datatables - окно поиска вне таблицы данных (Laravel / Vue. js)

Question

Я использую Datatables в своем приложении (книжный магазин создан в laravel / vuejs), и я хотел бы, чтобы мое окно поиска находилось вне таблицы. проблема, с которой я сталкиваюсь, заключается в том, что окно поиска не выполняет поиск данных, пока я не обновлю / не обновлю страницу 1 или 2 раза.

любая помощь будет высоко оценена.

Javascript код ниже

$(document).ready(function() {
  var tables = $("#datatable-fixed-header30").DataTable({
    paging: false,
    dom: "t"
  });
  // $(".dataTables_filter").hide();
  $("#bookSearch").keyup(function() {
    tables.search($(this).val()).draw();
  });
});

Полный код на странице vue похож на ниже

<template>
  <div class="container">
    <div class="col-md-12 col-sm-12 col-xs-12" v-for="User1 in Users.data" v-bind:key="User1.id">
      <div class="x_panel" v-if="User1.type=='admin'">
        <div class="x_content">
          <div
            id="datatable-buttons_wrapper"
            class="dataTables_wrapper form-inline dt-bootstrap no-footer"
          >
            <div class="dt-buttons btn-group">
              <button
                class="btn btn-success buttons-copy buttons-html5 btn-sm"
                tabindex="0"
                aria-controls="datatable-buttons"
                @click="newModal"
              >ثبت کاربرد جدید</button>
            </div>

            <!-- /.row -->
            <div class="row">
              <div class="col-lg-6" style="margin-top:-31px;float:left;margin-left:-213px;">
                <div class="input-group">
                  <span class="input-group-btn">
                    <button class="btn btn-info btn-flat" type="button">
                      <i class="fa fa-search"></i>
                    </button>
                  </span>
                  <input type="text" class="form-control" id="bookSearch" placeholder="لټون..." />
                </div>
                <!-- /input-group -->
              </div>
              <div class="col-sm-12">
                <table
                  id="datatable-fixed-header30"
                  class="table table-striped table-bordered dataTable no-footer"
                  role="grid"
                  aria-describedby="datatable-fixed-header_info"
                >
                  <thead>
                    <tr role="row">
                      <th style="width:1%">
                        <input type="checkbox" @click="selectAll" v-model="allSelected" />
                      </th>
                      <th
                        class="sorting"
                        tabindex="0"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label="کود: activate to sort column ascending"
                      >کود</th>
                      <th
                        class="sorting_asc"
                        tabindex="0"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-sort="ascending"
                        aria-label="نام: activate to sort column descending"
                      >نام</th>

                      <th
                        class="sorting"
                        tabindex="0"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label=" آدرس الکترونکی: activate to sort column ascending"
                      >آدرس الکترونکی</th>
                      <th
                        class="sorting"
                        tabindex="0"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label=" : activate to sort column ascending"
                      >نوعیت کاربرد</th>
                      <th
                        class="sorting"
                        tabindex="0"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label=" : activate to sort column ascending"
                      >تاریخ ورود</th>
                      <th
                        class="sorting"
                        tabindex="0"
                        aria-controls="datatable-buttons"
                        rowspan="1"
                        colspan="1"
                        aria-label=" تنظیمات : activate to sort column ascending"
                      >تنظیمات</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr
                      role="row"
                      class="odd"
                      v-if="Users.data!=undefined && Users.data.length == 0 || Users.data!=undefined && Users.data.length=='' "
                    >
                      <td colspan="7" align="center" :v-show="hidebutton=false">
                        <p class="text-center alert alert-danger">هیڅ مورد نشته</p>
                      </td>
                    </tr>
                    <tr
                      role="row"
                      class="even"
                      v-else
                      v-show="hidebutton=true"
                      v-for="User in Users.data"
                      v-bind:key="User.id"
                    >
                      <td>
                        <div class="custom-control custom-checkbox">
                          <input
                            class="form-check-input"
                            type="checkbox"
                            :value="User.id"
                            v-model="checkedRows"
                            id="chekboxs"
                          />

                          <label class="form-check-label"></label>
                        </div>
                      </td>
                      <td>{{User.id}}</td>
                      <td>{{User.name}}</td>
                      <td>{{User.email}}</td>
                      <td>
                        <span class="tag tag-success">{{User.type}}</span>
                      </td>

                      <td>{{User.created_at|mydate}}</td>

                      <td>
                        <a href="#" class="btn btn-info btn-xs" @click="editModal(User)">
                          <i class="fa fa-pencil"></i> ویرایش
                        </a>
                        <a
                          v-if="User.type !='admin'"
                          href="#"
                          class="btn btn-danger btn-xs"
                          @click="deleteUser(User.id)"
                        >
                          <i class="fa fa-trash-o"></i> حذف
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer">
              <pagination :data="Users" @pagination-change-page="getResults"></pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  components: {
  },

  data() {
    return {
      color: "#59c7f9",
      isLoading: false,
      fullPage: true,
      hidebutton: true,
      color: "blue",
      editMode: false,
      Users: {},
      selected: [],
      allSelected: false,
      checkedRows: [],
      data: [],
      url: "api/getAllusers",
      // selectAll: false,
      form: new Form({
        id: "",
        name: "",
        email: "",
        password: "",
        type: "",
        bio: "",
        photo: ""
      })
    };
  },
  computed: {},
  methods: {
    selectAll: function() {
      this.checkedRows = [];

      if (!this.allSelected) {
        for (user in this.data) {
          this.checkedRows.push(this.data[user].id);
        }
      }
    },

    doAjax() {
      this.isLoading = true;
      this.color = "blue";
      // simulate AJAX
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    onCancel() {
      console.log("User cancelled the loader.");
    },
    refrash: function() {
      $("#addNew").modal("hide");
    },
    loadallUsers() {
      axios.get("api/user").then(({ data }) => (this.Users = data));
    },
    getResults(page = 1) {
      this.isLoading = true;
      this.color = "blue";
      // simulate AJAX
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
      axios
        .get("api/user?page=" + page)
        .then(response => {
          this.Users = response.data;
        })

        .then(
          function(response) {
            this.Users = response.data.data;
          }.bind(this)
        );
    },

    loadUsers() {
      if (this.$gate.isAdmin()) {
        this.$Progress.start();
        axios.get("api/user").then(({ data }) => (this.Users = data));

        axios.get("api/getAllusers").then(({ data }) => (this.data = data));
        this.$Progress.finish();
      }
    },

    createUser() {
      if (this.form.name == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>نام لازم است.</h5>"
        });
      } else if (this.form.email == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5> آدرس الکترونکی لازم است.</h5>"
        });
      } else if (this.form.password == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>  رمز لازم است.</h5>"
        });
      } else if (this.form.type == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>  نوعیت کاربردد لازم است.</h5>"
        });
      } else {
        this.form
          .post("api/user")
          .then(() => {
            //    the below function will be use to reload the page

            //   this.$emit("refreshPage");
            $("#addNew").modal("hide");
            toast.fire({
              icon: "success",
              type: "success",
              html: "<h5> کاربردد موافقانه اجاد گردید</h5>"
            });
            Fire.$emit("refreshPage");
            this.form.reset();
            //   this.$Progress.finish();
          })
          .catch(er => {
            console.log(er);
          });
      }
    }
  },

  created() {
    this.loadUsers();
    // load the page after 3 secound
    Fire.$on("refreshPage", () => {
      this.loadUsers();
    });
  }
};
$(document).ready(function() {
  var tables = $("#datatable-fixed-header30").DataTable({
    paging: false,
    dom: "t"
  });
  // $(".dataTables_filter").hide();
  $("#bookSearch").keyup(function() {
    tables.search($(this).val()).draw();
  });
});
</script>

Answer 1

Следующий подход позволит вам использовать окно поиска вне таблицы. Вы должны быть в состоянии приспособить это к вашему указанному c коду.

Мои данные находятся в таблице под названием "животные":

<table id="animals" class="display dataTable cell-border" style="width:100%">
...
</table>

1) Настройте поле поиска:

<div id="external_filter" class="dataTables_filter" style="margin: 20px 0;">
  <label>External Search:
    <input id="external_search" type="search" class="" placeholder="" aria-controls="animals">
  </label>
</div>

В этом примере я использую тот же класс (dataTables_filter), что и в исходной коробке фильтра - вы можете использовать все, что захотите.

2) Определить базовую c DataTable :

Это минимальное определение, необходимое для демонстрации техники - вы можете добавлять все дополнительные элементы управления по мере необходимости:

$(document).ready(function() {

  var table = $('#animals').DataTable({
    "initComplete": function(settings, json) {
      $('#animals_filter').remove();
    }
  });

  $('#external_filter input').off().keyup(function () {
      table.search(this.value).draw();
  });

});

Функция initComplete используется для скрытия оригинала. поисковая строка. Мы хотим, чтобы поиск все еще был включен, поэтому мы не можем использовать "searching": false.

Код $('#external_filter input') обрабатывает поиск для вас. Данные, вводимые вами в поле поиска, фиксируются this.value и передаются в функцию поиска в таблице.

Веб-страница выглядит следующим образом:

Общий код выглядит следующим образом:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External Search Box</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

  <div style="margin: 20px;">

  <div id="external_filter" class="dataTables_filter" style="margin: 20px 0;">
    <label>External Search:
      <input id="external_search" type="search" class="" placeholder="" aria-controls="animals">
    </label>
  </div>

  <table id="animals" class="display dataTable cell-border" style="width:100%">
    <thead>
      <tr><th>Animal</th><th>Collective Noun</th><th>Language</th></tr>
    </thead>
    <tbody>
      <tr><td>antelopes</td><td>herd</td><td>English</td></tr>
      <tr><td>elephants</td><td>herd</td><td>English</td></tr>
      <tr><td>éléphants</td><td>troupeau</td><td>French</td></tr>
      <tr><td>Hounds</td><td>pack</td><td>English</td></tr>
      <tr><td>kittens</td><td>kindle</td><td>English</td></tr>
      <tr><td>lions</td><td>pride</td><td>English</td></tr>
      <tr><td>pingouins</td><td>colonie</td><td>French</td></tr>
      <tr><td>ravens</td><td>unkindness</td><td>English</td></tr>
      <tr><td>whales</td><td>pod</td><td>English</td></tr>
      <tr><td>zebras</td><td>herd</td><td>English</td></tr>
    </tbody>
  </table>

  </div>

  <script type="text/javascript">

    $(document).ready(function() {

      var table = $('#animals').DataTable({
        "initComplete": function(settings, json) {
          $('#animals_filter').remove();
        }
      });

      $('#external_filter input').off().keyup(function () {
          table.search(this.value).draw();
      });

    });
  </script>

</body>
</html>