UsmanBasharmal
3 months ago

Datatables - Search Box outside datatable (Laravle/Vuejs)

Posted 3 months ago by UsmanBasharmal

I am using Datatables in my application (Bookstore created in laravel/vuejs) and I would like my search box to be outside of the table. the problem which I am facing is that the search box is not searching the data until I refresh/reload the page 1 or 2 times.

any kind of help will be highly appreciated.

Javascript code is below

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

Full Code in the vue page is like below

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

Please sign in or create an account to participate in this conversation.