title: Vue js: Vuetify server side Datatable search filter not working
body: <p>I'm using vuetify for my datatable. Pagination and sort are working except the search filter. The response data from search filter is correct but the problem is its not rendering the response to my template. In <a href="https://vuetifyjs.com/components/data-tables" rel="noreferrer">vuetify</a> docs theres only have for pagination and sort. I'm trying to implement the search function via server-side.</p>
  
  <p>My User.vue</p>
  
  <pre><code>export default{
      data () {
      return {
        max25chars: (v) =&gt; v.length &lt;= 25 || 'Input too long!',
        tmp: '',
        search: '',
        totalItems: 0,
        pagination: {
          rowsPerPage: 1,
          search: ''
        },
        headers: [
          {
            text: 'Name',
            sortable: true,
            value: 'name',
            align: 'left'
          },
          {
            text: 'Email Add',
            sortable: true,
            value:'email',
            align: 'left'
          },
          {
            text: 'Roles',
            sortable: true,
            value:'roles_permissions',
            align: 'left'
          },
          {
            text: 'Date joined',
            sortable: true,
            value:'created_at',
            align: 'left'
          }
        ],
        items: [],
        loading: false,
        timer: null
      }
    },
    watch:{
      pagination:{
              handler(){
                  this.getDataFromApi()
            .then(data =&gt; {
              const self = this;
              self.items = data.items;
              self.totalItems = data.total;
            })
              },
        deep: true
      }
    },
    mounted(){
      this.getDataFromApi()
          .then(data =&gt; {
              this.items = data.items;
          this.totalItems = data.total;
          });
    },
    methods:{
      getDataFromApi(search_val){
          this.loading = true;
        return new Promise((resolve, reject) =&gt; {
          const { sortBy, descending, page, rowsPerPage } = this.pagination
                  const search = this.search;
          //console.log(search);
          clearTimeout(this.timer);
          this.timer = setTimeout(function(){
  
            axios({
              url: '/prod/api/user_table',
              method:'post',
              data:{
                sortBy : sortBy,
                descending: descending,
                page : page,
                rowsPerPage : rowsPerPage,
                search_val : search
              }
            })
            .then(response=&gt;{
              if(response.status == 200){
  
                let items = response.data.data;
                const total = response.data.totalRecords;
                this.loading = false;
                resolve({
                  items,
                  total
                });
              }
            })
            .catch(error=&gt;{
              if(error.response){
                console.log(error.response);
              }
            })
          },1000);
        })
      },
      fetchDataFromApi(value){
          //console.log(value);
      }
    },
    created(){
  
    }
  }
  </code></pre>
  
  <p>Here is my back end side using laravel</p>
  
  <pre><code>public function dataTable(Request $request){
      //return Datatable::eloquent(User::query())-&gt;make(true);
      $sortBy = $request-&gt;sortBy;
      $descending = $request-&gt;descending;
      $page = $request-&gt;page;
      $rowsPerPage = $request-&gt;rowsPerPage;
      $search_val = $request-&gt;search_val;
  
      //echo $rowsPerPage;
      if($descending){
          $orderedBy = 'desc';
      }else{
          $orderedBy = 'asc';
      }
      $start = ($page - 1) * $rowsPerPage;
  
  
      /*$totalRec = User::all();
      if(empty(trim($search_val))){
          $user = User::orderBy($sortBy,$orderedBy)-&gt;skip($start)-&gt;take($rowsPerPage)-&gt;get();
      }else{
          $user = User::where([
  
          ]);
      }*/
  
      $query = User::query();
      $column = ['name', 'email'];
      foreach ($column as $col) {
         $query-&gt;orWhere($col, 'LIKE','%'.$search_val.'%');
      }
      $query-&gt;orderBy($sortBy,$orderedBy)-&gt;skip($start)-&gt;take($rowsPerPage);
      $arr_items = [];
      foreach ($query-&gt;get()-&gt;toArray() as $shit =&gt; $v) {
          $arr_items['data'][] = array(
              'value' =&gt; $v['id'],
              'name' =&gt; $v['name'],
              'email' =&gt; $v['email'],
              'roles_permissions' =&gt; '',
              'created_at' =&gt; $v['created_at']
          );
      }
      $arr_items['totalRecords'] = User::count();
      return response()-&gt;json($arr_items);
  }
  </code></pre>