laravel, vue js datatable using matfish vue-table-2

Question

im using matfish-vue-table2 and im using the server side

this is my controller in laravel which i successfully get the json response via the url 'api/articles'

public function index()
{
   $articles = Article::orderBy('created_at', 'desc')->paginate();
   return ArticleResource::collection($articles);
}

and this is where is used the vue-table2

<template>
  <div class="people">
    <b-card class="mb-3">
      <v-server-table :columns="columns" :options="options"></v-server-table>
    </b-card>
  </div>
</template>


<script>
  export default {
    data () {
      return{
        columns: ['id', 'title', 'body','created_at','updated_at'],
        options: {
        requestFunction: function (data) {
              let vm = this;
              return axios.get('api/article')
              .then((response) => {this.data = response.data.data; this.count = response.data.meta.total;})
              .catch(function (e) {
                  this.dispatch('error', e);
              }.bind(this));
          }
        }
      }
    },
  }
</script>

I successfully populated the table but i cant use the paginate etc, and I got the error TypeError: Cannot read property 'data' of undefined how to fix this?

You wouldn't be using Laravel's paginate() here. The perPage value default is 10 and will automatically display pagination under the table if more than 10 records has been reached. The GET should send data such as page/limit/query/orderBy/ascending which you would then process in your controller and return back a new json response. If you add a Request $request to your index or check your browsers dev tools it should have all those extra parameters for you to use. If this is the case I can provide an example of how I made mines work with server-side. — dmotors
– dmotors, Commented Jul 19, 2018 at 0:42
hi sir can i see your example on server side using this lib. Im just new to laravel and vue js, i will study your example for me to learn it more thanks sir appreciate it. — Beginner
– Beginner, Commented Jul 19, 2018 at 3:27

dmotors · Accepted Answer · 2018-07-19 17:18:18Z

1

In your controller you should have something like this:

public function index(Request $request)
{
    $paging = $request->input('page');
    $limit = $request->input('limit');
    $querysearch = $request->input('query');
    $sorting = $request->input('orderBy');
    $sortorder = $request->input('ascending');

    $articles = Article::
        select(
            'id',
            'title',
            'body',
            'created_at',
            'updated_at'
        );

    $count = $articles->count();

    if ($querysearch) {
        $articles->where(function ($query) use ($querysearch) {
            $query->orWhere('title', 'like', '%' . $querysearch . '%');
            $query->orWhere('body', 'like', '%' . $querysearch . '%');
        });
    }

    if ($sorting) {
        $asc = $sortorder == 1 ? 'asc' : 'desc';
        $articles->orderBy($sorting, $asc);
    } else {
        $articles->orderBy('created_at', 'desc');
    }

    if ($paging == 1) {
        $articles = $articles->take($limit)->get();
    } else {
        $articles = $articles->skip($limit * ($paging - 1))->take($limit)->get();
    }        

    $data = [
        'data' => $articles,
        'count' => $count
    ];

    return json_encode($data);
}

You might want to modify your requestFunction to be something as so:

requestFunction: function (data) {
      let vm = this;
      return axios.get('api/article')
      .then((response) => {this.data = response.data; this.count = response.count;})
      .catch(function (e) {
          this.dispatch('error', e);
      }.bind(this));
  }
}

If you do not require the usage of requestFunction then you can remove it and modify your v-server-table like this:

<v-server-table url="api/article" :columns="columns" :options="options"></v-server-table>

edited Jul 19, 2018 at 17:18

answered Jul 19, 2018 at 16:36

dmotors

6312 gold badges7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Beginner Over a year ago

sir it has an error SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'offset 0' at line 1 (SQL: select id, title, body, created_at, updated_at from articles order by created_at desc offset 0)

dmotors Over a year ago

@Beginner Does this happen when you try to go to page 2? Does initial page load of page 1 work fine?

Beginner Over a year ago

this line is causing the error $articles = $articles->skip($limit * ($paging - 1))->take($limit)->get();

dmotors Over a year ago

@Beginner I think I see the issue. I purposely made my $paging and $limit to null and I got same error as you. That means somewhere isn't properly getting the values from the matfish. Can you open up your chrome or firefox devtools and tell me what the api/article full path is showing? You can see under network tab.

Beginner Over a year ago

but when i tried to edit the line to $articles = $articles->skip(5)->take(10)->get(); it successfully show the data but the pagination, filter , etc is not working

|

Collectives™ on Stack Overflow

laravel, vue js datatable using matfish vue-table-2

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related