Datatables - Search Box outside datatable
Datatables - Search Box outside datatable
UsmanBasharmal
Posts: 14Questions: 3Answers: 0
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.
Code in the vue page is like below
<template>
<div class="container">
<div
id="datatable-buttons_wrapper"
class="dataTables_wrapper form-inline dt-bootstrap no-footer"
> <!-- /.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 v-for="User2 in Users.data" v-bind:key="User2.id" v-if="User2.type !='admin'"> -->
<div v-if="!$gate.isAdmin()">
<not-found></not-found>
</div>
<!-- </div> -->
</div>
</template>
<script>
$(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>
This discussion has been closed.
Answers
Might sound a bit lame: but did you try a data tables event? Since you are saying the search only works after one or two page refreshs this sounds like the table isn't fully initialized on the first opening of the page when
is being executed. Since the browser caches the content this becomes better when refreshing the page a couple of times ?! (Mere speculation, I know ...)
But maybe this helps:
$(document).ready(function() {
var tables = $("#datatable-fixed-header30").DataTable({
paging: false,
dom: "t"
});
// $(".dataTables_filter").hide();
tables.on("init", function() {
$("#bookSearch").keyup(function() {
tables.search($(this).val()).draw();
});
});
});
Thanks for the quick replay, but the above code stoped searching even if I refresh the page more than 3 times
I found the solution but I declared** var tables** twice is there any other?$(document).ready(function() {
var tables = $("#datatable-fixed-header30").DataTable({
retrieve: true,
paging: false,
dom: "t"
});
});
$(document).on("keyup", "#bookSearch", function() {
var tables = $("#datatable-fixed-header30").DataTable({
retrieve: true,
paging: false,
dom: "t"
});
tables.search($(this).val()).draw();
});
I'm not sure how Vue works but it looks like it controls the table data in the DOM, for example:
<pagination :data="Users" @pagination-change-page="getResults"></pagination>. Guessing that when you page the data Vue is fetching and updating the table. If this is correct, then Datatables doesn't know about the table update since Datatables API's aren't used for the update. When Vue updates the table you can use one of theinvalidate()API's likerows().invalidate()to have Datatables updates its data cache after Vue has updated the table.Kevin