Gentelella-RTL DataTable проблема отображения окна поиска

Question

Я использую Gentelella-RTL их в laravel / Vuejs, после входа в приложение, когда я нажимаю на кнопку навигации, чтобы получить доступ к странице, она отлично работает, а также данные загружаются в DataTable, но я столкновение с проблемой заключается в том, что окно поиска не отображается, пока я не обновлю sh страницу 1 или два раза, я не знаю, в чем проблема.

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

Код на странице vue указан ниже

   <template>
  <div class="container">
    <div class="vld-parent">
      <loading
        :active.sync="isLoading"
        :can-cancel="true"
        :on-cancel="onCancel"
        :is-full-page="fullPage"
        color="#3cb371"
      ></loading>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="x_panel">
        <div class="x_title">
          <h2>ژباړونکی / د لیکوال میز</h2>
          <ul class="nav navbar-right panel_toolbox">
            <li>
              <a class="collapse-link">
                <i class="fa fa-chevron-up"></i>
              </a>
            </li>

            <li>
              <a class="close-link">
                <i class="fa fa-close"></i>
              </a>
            </li>
          </ul>
          <div class="clearfix"></div>
        </div>
        <div class="x_content">
          <div
            id="datatable-buttons_wrapper"
            class="dataTables_wrapper form-inline dt-bootstrap no-footer"
          >
            <div class="dt-buttons btn-group" style="margin-bottom:5px;">
              <button
                class="btn btn-success buttons-copy buttons-html5 btn-sm"
                tabindex="0"
                aria-controls="datatable-buttons"
                @click="newModal"
              >نوی ژباړونکی / لیکوال راجسټر کړئ</button>
              <button
                class="btn btn-danger buttons-copy buttons-html5 btn-sm"
                tabindex="0"
                aria-controls="datatable-buttons"
                @click="delt"
              >د ګڼ ړنګول</button>
              <a
                href="Report/viewer.php"
                target="_blank"
                class="btn btn-info buttons-copy buttons-html5 btn-sm"
                tabindex="0"
                aria-controls="datatable-buttons"
              >
                <i class="fa fa-file-text"></i>
                راپورونه
              </a>
            </div>

            <div class="row">
              <div class="col-sm-12">
                <table
                  id="datatable-fixed-header2"
                  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="Authors.data!=undefined && Authors.data.length == 0 || Authors.data!=undefined && Authors.data.length=='' "
                    >
                      <td colspan="8" 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="Author in Authors.data"
                      v-bind:key="Author.id"
                    >
                      <td>
                        <div class="custom-control custom-checkbox">
                          <input
                            class="form-check-input"
                            type="checkbox"
                            :value="Author.id"
                            v-model="checkedRows"
                            id="chekboxs"
                          />

                          <label class="form-check-label"></label>
                        </div>
                      </td>
                      <td>{{Author.id}}</td>

                      <td>{{Author.name}}</td>
                      <td>{{Author.contact}}</td>
                      <td>{{Author.email}}</td>
                      <td v-if="Author.type == 0">ژباړن</td>
                      <td v-if="Author.type == 1">لیکوال</td>
                      <td>
                        <a href="#" class="btn btn-info btn-xs" @click="editModal(Author)">
                          <i class="fa fa-pencil"></i> سمول
                        </a>
                        <a href="#" class="btn btn-danger btn-xs" @click="deleteAuthor(Author.id)">
                          <i class="fa fa-trash-o"></i> ړنګول
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer">
              <pagination :data="Authors" @pagination-change-page="getResults"></pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- insert modal -->
    <div
      class="modal fade"
      id="addNew"
      tabindex="-1"
      role="dialog"
      aria-labelledby="addNewLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5
              class="modal-title"
              v-show="!editMode"
              id="addNewLabel"
            >د نوي ژباړن او لیکوال ثبتولول</h5>
            <h5 class="modal-title" v-show="editMode" id="addNewLabel">د ژباړن او لیکوال سمول</h5>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" style="margin-right: 317px;">&times;</span>
            </button>
          </div>
          <form @submit.prevent="editMode ? updateAuthor() : createAuthor()">
            <div class="modal-body">
              <div class="form-group">
                <input
                  v-model="form.name"
                  placeholder="نوم"
                  type="text"
                  name="name"
                  class="form-control"
                  :class="{ 'is-invalid': form.errors.has('name') }"
                />
                <has-error :form="form" field="name"></has-error>
              </div>
              <div class="form-group">
                <input
                  dir="rtl"
                  id="text1"
                  v-model="form.contact"
                  placeholder="د اړیکې شمیره"
                  type="number"
                  name="contact"
                  class="form-control"
                  :class="{ 'is-invalid': form.errors.has('contact') }"
                />
                <has-error :form="form" field="contact"></has-error>
              </div>
              <div class="form-group">
                <input
                  v-model="form.email"
                  placeholder=" بریښنالیک"
                  type="email"
                  name="email"
                  class="form-control"
                  :class="{ 'is-invalid': form.errors.has('email') }"
                />
                <has-error :form="form" field="email"></has-error>
              </div>
              <div class="form-group">
                <select
                  name="type"
                  v-model="form.type"
                  id="type"
                  class="form-control"
                  :class="{'is-invalid':form.errors.has('type')}"
                >
                  <option value>ژباړن او لیکوال</option>
                  <option value="0">ژباړن</option>
                  <option value="1">لیکوال</option>
                </select>
                <has-error :form="form" field="type"></has-error>
              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">لغوه کول</button>

                <button
                  v-show="editMode"
                  :disabled="form.busy"
                  type="submit"
                  class="btn btn-success"
                >سمول</button>
                <button
                  v-show="!editMode"
                  :disabled="form.busy"
                  type="submit"
                  class="btn btn-primary"
                >ثبتول</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- </div> -->
    <!-- end of Insert modal -->
  </div>
</template>

<script>
import Datepicker from "vuejs-datepicker";
// import GridLoader from "vue-spinner/src/GridLoader.vue";
import Loading from "vue-loading-overlay";
// // // Import stylesheet
import "vue-loading-overlay/dist/vue-loading.css";
export default {
  components: {
    Datepicker,

    Loading
  },

  data() {
    return {
      isLoading: false,
      fullPage: true,
      hidebutton: true,
      color: "blue",
      editMode: false,
      Nationalities2: [],
      Nationalities3: [],
      Authors: {},
      Authors2: [],
      selected: [],
      allSelected: false,
      checkedRows: [],
      CheckAuthor: [],
      data: [],
      data2: [],
      url: "api/getAllAuthor",
      form: new Form({
        id: "",
        name: "",
        contact: "",
        email: "",
        type: ""
      })
    };
  },
  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.");
    },
    loadallAuthors() {
      axios.get("api/Author").then(({ data }) => (this.Authors = data));
    },
    getAuthor: function() {
      if (this.form.type == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>مهرباني وکړئ ژباړن او لیکوال غوره کړئ.</h5>"
        });
        this.loadallAuthors();
      } else {
        this.seen = true;
        $(".hideme").show();
        axios
          .get("api/SearchByType", {
            params: { type: this.form.type }
          })
          .then(
            function(response) {
              this.Authors = response.data.data;
            }.bind(this)
          );
        this.seen = false;
      }
    },
    getResults(page = 1) {
      this.isLoading = true;
      this.color = "blue";
      // simulate AJAX
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
      axios
        .get("api/Author?page=" + page)
        .then(response => {
          this.Authors = response.data;
        })

        .then(
          function(response) {
            this.Authors = response.data.data;
          }.bind(this)
        );
    },
    updateAuthor() {
      if (this.form.name == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>نوم اړین دی.</h5>"
        });
      } else if (this.form.contact == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>د اړیکې شمیره اړین دی.</h5>"
        });
      } else if (this.form.contact.length >= 12) {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>د اړیکې شمیره باید له  12 شمیرو څخه کم وي .</h5>"
        });
      } else if (this.form.contact.length <= 9) {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>د اړیکې شمیره باید له 9 شمیرو  څخه کم نوی.</h5>"
        });
      } else if (this.form.type == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5> مهرباني وکړئ ژباړن او لیکوال  غوره  کړئ.</h5>"
        });
      } else if (this.form.email == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>بریښنالیک  اړین دی.</h5>"
        });
      } else {
        this.form
          .put("api/Author/" + this.form.id)
          .then(() => {
            $("#addNew").modal("hide");

            toast.fire({
              icon: "success",
              type: "warning",

              html: "<h5 > معلومات په بریالیتوب سره تازه شو.</h5> "
            });
            Fire.$emit("refreshPage");
          })
          .catch(e => {
            console.log(e);
          });
      }
    },
    detailModal(emp1) {
      this.form.reset();
      $("#addNew3").modal("show");
      this.form.fill(emp1);
    },
    editModal(Author) {
      this.editMode = true;
      this.form.reset();
      $("#addNew").modal("show");
      this.form.fill(Author);
    },
    newModal() {
      this.editMode = false;
      this.form.reset();
      $("#addNew").modal("show");
    },
    delt() {
      var chekboxs = document.getElementById("chekboxs");
      if (chekboxs.checked || this.allSelected) {
        swal
          .fire({
            title:
              "آيا تاسو په ډاډمنه توګه غواړئ چې د اټاکل شوی معلومات ړنګ کړئ؟",
            text: "تاسو دا معلومات بیا راګرځولی نشی!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "هو،دا معلومات ړنګ کړئ!",
            cancelButtonText: "لغوه کول"
          })
          .then(result => {
            //Send request to the server
            if (result.value) {
              axios
                .delete("api/multipledeleteAuthor", {
                  params: { id: this.checkedRows }
                })
                .then(() => {
                  toast.fire({
                    type: "success",
                    icon: "success",
                    html: "<h5> معلومات په بریالیتوب سره ړنګ شو!</h5>"
                  });
                  Fire.$emit("refreshPage");
                })
                .catch(e => {
                  console.log(e);
                });
            }
          });
      } else {
        toast.fire({
          type: "warning",
          icon: "warning",
          html:
            "<h5>د ړنګولو لپاره تاسو  کوم معلومات نه دی ټاکلی ،مهرباني وکړئ  معلومات  وټاکئ!</h5>"
        });
      }
    },

    deleteAuthor(id) {
      swal
        .fire({
          title: "آیا تاسو ډاډه یاست؟",
          text: "تاسو دا معلومات بیا راګرځولی نشی!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "هو ، دا معلومات ړنګ کړئ!",
          // buttons: ["Select Patient?", "Speed Case?"],
          cancelButtonText: "لغوه کول"
        })
        .then(result => {
          //Send request to the server
          if (result.value) {
            this.form
              .delete("api/Author/" + id)
              .then(() => {
                toast.fire({
                  type: "success",
                  html: "<h5> معلومات په بریالیتوب سره ړنګ شو!</h5>"
                });
                Fire.$emit("refreshPage");
              })
              .catch(e => {
                console.log(e);
              });
          }
        });
    },

    loadAuthors() {
      this.$Progress.start();
      axios.get("api/Author").then(({ data }) => (this.Authors = data));

      axios.get("api/getAllAuthor").then(({ data }) => (this.data = data));
      axios.get("api/getAllPurchase").then(({ data }) => (this.data2 = data));

      this.$Progress.finish();
    },

    getvalidateion() {
      axios.get("api/getAllAuthor").then(response => {
        let data = response.data;

        if (data) {
          data.forEach(element => {
            this.Nationalities2.push(element.contact);
            if (this.form.contact == element.contact) {
              toast.fire({
                icon: "warning",
                type: "warning",
                html:
                  "<h5> دا شمیره دمخه ثبت شوې ، او په مهربانۍ سره نوی شمیره وليکئ .</h5>"
              });
            }
          });
        } else {
          toast.fire({
            icon: "warning",
            type: "warning",
            title: " مشکل."
          });
        }
      });
    },
    getvalidateion2() {
      axios.get("api/getAllAuthor").then(response => {
        let data = response.data;

        if (data) {
          data.forEach(element => {
            this.Nationalities3.push(element.email);
            if (this.form.email == element.email) {
              toast.fire({
                icon: "warning",
                type: "warning",
                html:
                  "<h5>دا بریښنالیک دمخه ثبت شوې ، او په مهربانۍ سره نوی بریښنالیک وليکئ.</h5>"
              });
            }
          });
        } else {
          toast.fire({
            icon: "warning",
            type: "warning",
            title: " مشکل."
          });
        }
      });
    },
    createAuthor() {
      if (this.form.name == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>نوم اړین دی.</h5>"
        });
      } else if (this.form.contact == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>د اړیکې شمیره اړین دی.</h5>"
        });
      } else if (this.form.contact.length >= 12) {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>د اړیکې شمیره باید له  12 شمیرو څخه کم وي .</h5>"
        });
      } else if (this.form.contact.length <= 9) {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>د اړیکې شمیره باید له 9 شمیرو  څخه کم نوی.</h5>"
        });
      } else if (this.form.type == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5> مهرباني وکړئ ژباړن او لیکوال  غوره  کړئ.</h5>"
        });
      } else if (this.form.email == "") {
        toast.fire({
          type: "warning",
          icon: "warning",
          html: "<h5>بریښنالیک  اړین دی.</h5>"
        });
      } else {
        this.getvalidateion();
        this.getvalidateion2();
        this.form
          .post("api/Author")
          .then(() => {
            $("#addNew").modal("hide");
            toast.fire({
              icon: "success",
              type: "success",
              html: "<h5>  معلومات په برياليتوب سره ثبت شو </h5>"
            });
            Fire.$emit("refreshPage");
            this.form.reset();
          })
          .catch(er => {
            console.log(er);
          });
      }
    }
  },

  created() {
    this.loadAuthors();
    // load the page after 3 secound
    Fire.$on("refreshPage", () => {
      this.loadAuthors();
    });
  }
};
$(document).ready(function() {
  $("#datatable-fixed-header2").DataTable({
    paging: false,
    bFilter: true,
    // searching: true,
    // ordering: false,
    info: false,


  });
});
</script>