README

Vue DataTable For Laravel

A simple package to ease DataTable server side handling

This package is created to handle server-side rendring of DataTables by using Eloquent ORM, Query Builder or Collection.This package helps you to easily manage server side rendring of datatables if you are dealing with js libraries like Vue or React. Currently Element-UI is completely supported by this package. Soon some other populer libraries will also get supported.

Using Helper Function

    return datatables(User::query());
    return datatables(DB::table('users')->join1()->join2()->select(column1,column2,...columnK));
    return datatables(DB::table('users')->get());
    return datatables(User::all());

function datatable also contain optional parameter $json with default value to true, set this param to false if you want to use instance of DataTable particular database driver class. eg, below code return instance of YS\vueDataTable\Eloquent class

    return datatables(User::query(),false);

vue-datatables also includes some other helper funcions that you can use if you want to use a particular database driver

    return eloquent(User::query());
    return query_bulder(DB::table('users')->join1()->join2()->select(column1,column2,...columnK));
    return collection(DB::table('users')->get());
    return collection(User::all());

Input Format

  let query = {
          page: 1,
          limit: 10,
          keyword: '',
          order: {
            column: '',
            direction: '',
          },
          filters: {"users.role_id":2},
        };

You must send query object given above in the query parameter in order to use this package.

page represent page number in pagination
limt number of records be displayed on a single page
keyword key you want to search in table
keyword string you want to search in table
order handle ordering of columns in table. here key column represents name of ordering column and key direction represents direction. key direction can only have values ascending or descending.
filters filters table data eg, role_id if you want to see users of a particular role only.

Requirements

Quick Installation

$ composer require iyogesharma/vue-datatable:"1.*"

Service Provider & Facade (Optional on Laravel 5.5)

'providers' => [
    ...,
   YS\VueDatatable\DataTableServiceProvider::class,
]

Example(Element-UI)

  <template>
    <div class="app">
      <div class="filter-container">
        <el-input
          v-model="query.keyword"
          style="width: 200px;"
          class="filter-item"
          clearable
          @clear="resetKeyword"
          @keyup.enter.native="handleFilter"
        />
        <el-select
          v-model="query.filters[`users.role_id`]"
          clearable
          style="width: 90px"
          class="filter-item "
          @clear="resetFilters"
          @change="handleFilter"
        >
          <el-option
            v-for="role in roles"
            :key="role.id"
            :label="role.name"
            :value="role.id"
          />
        </el-select>
        <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
           search
          </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="data"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortList"
        >
          <el-table-column
            sortable="custom"
            prop="name"
            align="center"
            label="name"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            align="center"
            prop="email"
           label="eamil"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.email }}</span>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            align="center"
            prop="role"
           label="role"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.role }}</span>
            </template>
          </el-table-column>
        </el-table>
     </div>
  </template>
  <script>
      export default {
        name: 'vue-datatable-test',
        data() {
          return {
            data: null,
            total: 0,
            roles: [
                {
                  id:1,
                  name: 'admin',
                },
                {
                  id:2,
                  name:'sub-admin'
                }
            ],
            query: {
             page: 1,
             limit: 10,
             keyword: '',
             order: {
               column: '',
               direction: '',
             },
             filters: {},
           }
          }
        },
        created () {
          this.getDataFromStorage();
        },
        methods: {
          async getDataFromStorage(){
            let self = this;
            await axios.get('/testUrl', {
              params: self.query
            })
            .then( res => {
              const { data, total } = res.data;
              self.data = data;
              self.total = total;
            })
          },
          /**
           * Handle tabel filter action
           * @param data value of current filter
           *
           * @return void
           */
          handleFilter(data) {
            if (data === '') {
              this.resetFilters();
            }
            this.query.page = 1;
            this.getDataFromStorage();
          },
        
          /**
           * Reset query filters to initial values
           * @return {void}
           */
          resetFilters() {
            this.query.filters = {};
          },
        
          /**
           * Reset query search keyword to initial value
           * @return {void}
           */
          resetKeyword() {
            this.query.keyword = '';
            this.getDataFromStorage();
          },
        
          /**
           * Handle sort action of table
           * @param {object} data sort details
           *
           * @return {void}
           */
          sortList(data) {
            const { prop, order } = data;
            if (order){
              if (prop === 'index') {
                this.$refs['table'].data.sort(() => -1);
              } else {
                this.query.order['column'] = prop;
                this.query.order['direction'] = order;
                this.handleFilter();
              }
            }
          }
        }
        
      }

  </script>

On server side use vueDataTable as

function testData()
{
    return datatable(
    User::join('roles','roles.id','=','users.role_id')
        ->select('users.name','users.email','users.id','users.role_id','roles.name as role')
    );
}

In the example given above you can also use component "el-pagination". keys total, query.limit and query.page can be used to create dynamic pagination.

License

The MIT License (MIT). Please see License File for more information.

iyogesharma / vue-datatable

Maintainers

Details