Laravel跨页面传递首页搜索关键词至DataTable实现预搜索

现有代码问题点 #

• 首页GET表单多余添加了CSRF字段、method伪装字段，属于无效配置
• Cars页DataTable配置错误：请求地址未放在ajax节点下，未接收URL传递的搜索参数设置默认检索值
• 后端Controller未实现搜索过滤逻辑，且返回视图路径错误，服务端处理模式下直接取全量数据会造成性能问题

分步修正代码 #

1. 首页搜索表单修正 #

GET请求参数会直接拼接在URL Query中，不需要CSRF校验和请求方法伪装，精简后代码如下：

<form class="needs-validation" novalidate action="{{ route('cars') }}" method="get">
    <input id="input" name="search" placeholder="SEARCH" />
    <button type="submit" class="button" id="button">
        <i class="fa fa-arrow-right" style="font-size: 30px !important;"></i>
    </button>
</form>

表单提交后会直接跳转到带?search=用户输入关键词参数的Cars页面路由。

2. Cars页面DataTable初始化逻辑修正 #

通过原生URLSearchParams读取地址栏传递的search参数，传入DataTable的默认搜索配置项，同时修正ajax请求路径配置：

<div class="container">
    <h1>Cars <br/></h1>
    <table id="all-table" class="table table-bordered data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Car Name</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script>
$(function() {
    // 读取URL中携带的搜索参数
    const urlSearch = new URLSearchParams(window.location.search).get('search') || '';
    
    $('#all-table').DataTable({
        ordering: false,
        processing: true,
        serverSide: true,
        searching: true,
        // 设置初始化默认搜索值
        search: {
            search: urlSearch
        },
        // 修正请求地址配置位置
        ajax: "{{ route('cars-list') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name_en', name: 'name_en'},
            {data: 'phone', name: 'phone'},
        ],
    });
});
</script>

3. 后端Controller逻辑修正 #

补上搜索参数过滤逻辑，修正视图返回路径，服务端模式下通过查询构造器处理检索条件，避免一次性加载全量数据：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Cars;
use Illuminate\Support\Str;

class CarController extends Controller
{
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $carQuery = Cars::query();
            
            // 接收DataTable传递的搜索参数做模糊匹配
            if ($keyword = $request->input('search.value')) {
                $carQuery->where(function($q) use ($keyword) {
                    $q->where('name_en', 'like', "%{$keyword}%")
                      ->orWhere('phone', 'like', "%{$keyword}%");
                });
            }

            return Datatables::of($carQuery->latest())
                    ->addIndexColumn()
                    ->addColumn('action', function($row){
                        $btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';
                        return $btn;
                    })
                    ->rawColumns(['action'])
                    ->editColumn('name_en', function ($crew) {
                        return Str::limit($crew->name_en,20);
                    })
                    ->editColumn('phone', function ($crew) {
                        return Str::limit($crew->phone,20);
                    })
                    ->make(true);
        }
      
        // 修正视图路径，原返回users视图为错误配置
        return view('cars');
    }
}

效果验证 #

• 首页输入关键词提交后，自动跳转到带搜索参数的Cars页面
• DataTable初始化时自动带入关键词发起检索请求
• 页面加载完成后直接展示匹配的车辆数据，无需用户二次输入
• 页面内DataTable自带的搜索框仍可正常使用，支持二次检索

内容的提问来源于stack exchange，提问作者Full Stack Developer