README

本包创建用于通过AJAX选项使用Eloquent ORM/查询构建器处理DataTables jQuery插件的服务器端工作。

快速安装

composer require bitstudio-id/bitdatatable

要求

• PHP >= 5.6.4
• Laravel >= 5.4
• jQuery DataTables v1.10.x

JavaScript 和 CSS

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

Blade 视图

<table id="table" class="table table-bordered table-striped">
  <thead>
  <tr>
      <th>#ID</th>
      <th>Name</th>
      <th>Role</th>
      <th>Email</th>
      <th>...</th>
  </tr>
  </thead>
  <tbody></tbody>
  </table>

JavaScript

<script>
  $(document).ready(function () {
    //hide error/warning on datatable
    $.fn.dataTable.ext.errMode = 'none';
    
    var table = $('#table').DataTable({
      //enable filter
      
      bFilter: true,
      processing: true,
      serverSide: true,
      ajax: {
        url: "/dummy/dtb-v2/get",
        type: 'get',
      },
      columns: [
        {data: "id", name: "id", searchable: false, orderable: false},
        {data: "employee.code"},
        {data: "name", name: "user_name"},
        {data: "employee.role.name"},
        {data: "email"},
        {data: "action", searchable: false, orderable: false}, // use searchable: false, orderable: false for custom column
      ],
    });
  });
</script>

如何与eloquent一起使用

use BITStudio\BITDataTable\BITDataTable;
...
...
public function dtbGetV2(Request $request)
{
  $dtb = new BITDataTable();

  // Set request
  $dtb->setRequest($request);

  $user = User::query()->with('employee', 'employee.role');

  $dtb->from($user);
  
  $state = "admin";

  $dtb->addCol(function ($user){
    $user->action = "<a target='_blank' href='//lorem.com/{$user->id}' class='btn btn-danger'>action-{$item->id}</a>";
    return $user;
  });

  return $dtb->generate();
}

如何在addCol上使用逻辑

$state = "admin";

$dtb->addCol(function ($user) use ($state){
  //use logic on addCol
      
  //set as empty default
  $user->admin_col = "";
  
  if($state == $user->role->name) {
      $user->admin_col .= "admin-col";
  }
   return $user;
});

如何与查询构建器一起使用

use BITStudio\BITDataTable\BITDataTable;
...
...
public function dtbGetV2(Request $request)
  $dtb = new BITDataTable();
  
  $dtb->setRequest($request);
  
  $q = DB::table("orders as o");
  $q->select("o.*", "o.no_cs as customer_number", "e.employee_name as emp_name");
  $q->leftJoin("employee as e", "e.id", "=", "o.employee_id");
  
  $dtb->from($q);
  
  
  //add custom column
  $dtb->addCol(function ($user){
    $user->action = "<a target='_blank' href='//google.com/{$item->id}' class='btn btn-danger'>action-{$item->id}</a>";
  
    return $user;
  });
  
  return $dtb->generate();
}

如何在视图中显示索引编号进行编号

$dtb->setRowIndex(true);

这将附加属性 DT_RowIndex 到json响应

columns: [
        {data: "DT_RowIndex", name: "id" searchable: false, orderable: false},
        ...
        ]

别忘了设置 searchable = false

添加 value 类属性

$dtb->addClass("text-danger"); //insert before genereate

添加 value id 属性

//create custom from collection property
$dtb->setRowId("id");

//create custom from addCol or setRowId for custom id attribute
$dtb->setRowId(function($item) {
    $item->DT_RowId = "id-".$item->id;
    return $item;
});

许可证

MIT 许可证 (MIT)。请参阅许可证文件获取更多信息。