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>
$(document).on('keyup', '#bookSearch', function() { /* skipped */ }