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

• PHP >= 7.0
• Laravel 5.|6.|7.*

Quick Installation

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

Service Provider & Facade (Optional on Laravel 5.5)

Register provider and facade on your config/app.php file.

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