README

Vue DataTable For Laravel

一个简化 DataTable 服务器端处理的简单包

此包是为了通过使用 Eloquent ORM、查询构建器或集合来处理 DataTables 的服务器端渲染而创建的。如果您正在处理像 Vue 或 React 这样的 JavaScript 库，此包可以帮助您轻松管理 DataTables 的服务器端渲染。目前，此包完全支持 Element-UI。很快，其他一些流行的库也将得到支持。

使用辅助函数

    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 包含一个可选参数 $json，默认值为 true。如果您想使用特定数据库驱动程序的 DataTable 实例类，则将该参数设置为 false。例如，以下代码返回 YS\vueDataTable\Eloquent 类的实例

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

vue-datatables 还包括一些其他辅助函数，如果您想使用特定的数据库驱动程序，则可以使用这些函数

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

输入格式

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

为了使用此包，您必须通过查询参数发送上述查询对象。

page 代表分页中的页面编号
limt 单页上显示的记录数
keyword 您想在表中搜索的关键字
keyword 您想在表中搜索的字符串
order 处理表中列的排序。这里 key column 表示排序列的名称，key direction 表示方向。key direction 只能取 ascending 或 descending 的值。
filters 过滤表数据，例如，如果您只想查看特定角色的用户，则可以使用 role_id。

要求

快速安装

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

服务提供者 & Facade（Laravel 5.5 上可选）

在您的 config/app.php 文件中注册提供者和外观。

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

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

在上面的示例中，您还可以使用组件 "el-pagination"。keys total、query.limit 和 query.page 可以用来创建动态分页。

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅许可证文件。

iyogesharma / vue-datatable

维护者

详细信息