Datatables - Search Box outside datatable

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

rf1234

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

tables.search($(this).val()).draw();

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:

tables
    .on ('init', function () {
        $("#bookSearch").keyup(function() {
            tables.search($(this).val()).draw();
        });           
     } )

UsmanBasharmal

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

UsmanBasharmal

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();
});

kthorngren

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 the invalidate() API's like rows().invalidate() to have Datatables updates its data cache after Vue has updated the table.

Kevin