在Laravel 8中使用搜索和排序的Datatables AJAX分页功能（详细教程）

DebugUsery
317 阅读2分钟

有了分页功能，在页面上显示巨大的数据列表就更容易了。

你可以用或不用AJAX创建分页。

有许多jQuery插件可用于添加分页。其中一个是DataTables。

在本教程中，我展示了如何在Laravel 8中不使用Laravel包的情况下添加DatatablesAJAX分页功能。

DataTables AJAX pagination with Search and Sort in Laravel 8

演示

内容

  1. 数据库配置
  2. 创建表格
  3. 下载
  4. 模型
  5. 路线
  6. 控制器
  7. 查看
  8. 演示
  9. 结语

1.数 据库配置

打开.env 文件。

指定主机、数据库名称、用户名和密码。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

2.创 建表

  • 使用迁移创建一个新的表Employees ，并添加一些记录：
php artisan make:migration create_employees_table
  • 现在，从项目根目录导航到database/migration/ 文件夹
  • 找到一个以create_employees_table 结尾的PHP文件并打开它
  • 在up() 方法中定义表的结构：
public function up()
{
    Schema::create('employees', function (Blueprint $table) {
        $table->id();
        $table->string('username');
        $table->string('name');
        $table->string('email');
        $table->timestamps();
    });
}
  • 运行迁移
php artisan migrate
  • 表已经被创建，并在其中添加一些记录。

3.下 载

  • 从这里下载DataTables库，同时下载jQuery库。
  • 将下载的文件解压到public/ 文件夹中。
  • 同时，将jQuery库复制到public/ 文件夹中。
  • 你也可以使用CDN。
<!-- Datatable CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Datatable JS -->
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

4.模 型

  • 创建Employees 模型：
php artisan make:model Employees
  • 打开app/Models/Employees.php 文件。
  • 使用$filliable 属性指定大量可分配的模型属性 - 用户名、姓名和电子邮件。

完成的代码

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model
{
    use HasFactory;

    protected $fillable = [
       'username','name','email'
    ];
}

5.路 线

  • 打开routes/web.php 文件。
  • 定义2个路由 -
    • / -加载索引视图。
    • /getEmployees -这是用来发送AJAX POST请求，以获取数据库数据。
<?php
use Illuminate\Support\Facades\Route; 
use App\Http\Controllers\EmployeesController; 

Route::get('/', [EmployeesController::class, 'index']); 
Route::get('/getEmployees', [EmployeesController::class, 'getEmployees'])->name('getEmployees');

6.控 制器

  • 创建EmployeesController 控制器。
php artisan make:controller EmployeesController
  • 打开app/Http/Controllers/EmployeesController.php 文件。
  • 导入Employees 模型。

创建2个方法 -

  • index() -加载index 视图。
  • getEmployees()- 这个方法是为了处理DataTables的AJAX请求。

读取DataTables的值并将其分配给变量。

从'employees' 表计算有和没有搜索过滤器的总记录，并将其分配给$totalRecords 和$totalRecordswithFilter 变量。

从'employees' 表中获取记录，并将其分配给$records 变量。

在获取的数据上循环，用初始化DataTables时在'columns' 选项中指定的键初始化$data 数组。

用所需的值初始化$response 数组。

以JSON格式返回$response 数组。

完成的代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employees;

class EmployeesController extends Controller
{
     public function index(){

         // Load index view
         return view('index');
     }

     // Fetch records
     public function getEmployees(Request $request){

        ## Read value
        $draw = $request->get('draw');
        $start = $request->get("start");
        $rowperpage = $request->get("length"); // Rows display per page

        $columnIndex_arr = $request->get('order');
        $columnName_arr = $request->get('columns');
        $order_arr = $request->get('order');
        $search_arr = $request->get('search');

        $columnIndex = $columnIndex_arr[0]['column']; // Column index
        $columnName = $columnName_arr[$columnIndex]['data']; // Column name
        $columnSortOrder = $order_arr[0]['dir']; // asc or desc
        $searchValue = $search_arr['value']; // Search value

        // Total records
        $totalRecords = Employees::select('count(*) as allcount')->count();
        $totalRecordswithFilter = Employees::select('count(*) as allcount')->where('name', 'like', '%' .$searchValue . '%')->count();

        // Fetch records
        $records = Employees::orderBy($columnName,$columnSortOrder)
               ->where('employees.name', 'like', '%' .$searchValue . '%')
              ->select('employees.*')
              ->skip($start)
              ->take($rowperpage)
              ->get();

        $data_arr = array();

        foreach($records as $record){
           $id = $record->id;
           $username = $record->username;
           $name = $record->name;
           $email = $record->email;

           $data_arr[] = array(
               "id" => $id,
               "username" => $username,
               "name" => $name,
               "email" => $email
           );
        }

        $response = array(
           "draw" => intval($draw),
           "iTotalRecords" => $totalRecords,
           "iTotalDisplayRecords" => $totalRecordswithFilter,
           "aaData" => $data_arr
        );

        return response()->json($response); 
     }
}

7.查 看

在resources/views/ 文件夹中创建index.blade.php 文件。

包括DataTables和jQuery库。

创建<table id='empTable' > 。

jQuery脚本-

  • 在#empTable 上初始化DataTables。
  • 设置处理：true，serverSide：true。
  • 设置AJAX URL为{{route('getEmployees')}} 。
  • 用'columns' 选项指定需要从AJAX响应中读取的键名。

完成的代码

<!DOCTYPE html>
<html>
<head>
     <title>Datatables AJAX pagination with Search and Sort in Laravel 8</title>

     <!-- Meta -->
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta charset="utf-8">

     <!-- Datatable CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>

     <!-- jQuery Library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

     <!-- Datatable JS -->
     <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

</head>
<body>

    <table id='empTable' width='100%' border="1" style='border-collapse: collapse;'>
        <thead>
            <tr>
                 <td>S.no</td>
                 <td>Username</td>
                 <td>Name</td>
                 <td>Email</td>
            </tr>
         </thead>
     </table>

     <!-- Script -->
     <script type="text/javascript"> 
     $(document).ready(function(){

         // DataTable
        $('#empTable').DataTable({
             processing: true,
             serverSide: true,
             ajax: "{{route('getEmployees')}}",
             columns: [
                 { data: 'id' },
                 { data: 'username' },
                 { data: 'name' },
                 { data: 'email' },
             ]
         });

      });
      </script>
</body>
</html>

8.演 示

查看演示

9.总 结

请确保以定义的格式返回DataTables响应，否则，数据将无法加载。

如果你在添加DataTables时发现任何错误，那么请使用浏览器的网络标签，通过查看AJAX请求响应来进行调试。

avatar
文章
阅读
粉丝