在 Laravel 8 中使用 yajra 数据表加载 DataTable where select

Posted 2023-05-09

【中文标题】在 Laravel 8 中使用 yajra 数据表加载 DataTable where select

【英文标题】：Load DataTable where select in Laravel 8 with yajra datatables

【发布时间】：2021-09-20 19:18:53

【问题描述】：

我需要加载一个 DataTable，其中输入值等于数据库中的值。我尝试使用此功能但无法正常工作。

控制器

public function getit(Request $request)

    $shp_no = $request->shp_no_for_it;
    $data = Item::select('*')->where('shp_no_for_it', $shp_no)->get();
    
    return Datatables::of($data)
        ->addIndexColumn()
        ->addColumn('action', function ($row) 
            $btn = '<a href="javascript:void(0)" 
                class="edit btn btn-primary btn-sm">View</a>';
            
            return $btn;
        )
        ->rawColumns(['action'])
        ->make(true);

脚本

$('#search_button').click(function()
    $(function () 
        var table = $('.data-table').DataTable(
            processing: true,
            serverSide: true,
            ajax: " route('getit') ",
            columns: [
                data: 'id', name: 'id',
                data: 'action', name: 'action', orderable: false, searchable: false,
            ]
        );
    );
);

输入

<input type="title" class="form-control" id="shp_no_for_it" name="shp_no_for_it">

路线

Route::get('getit', [ItemController::class, 'getit'])->name('getit');

【问题讨论】：

还显示输入按钮表单并提及上述代码中的错误

试试这个$data = Item::query(); 然后Datatables::eloquent($data->where('shp_no_for_it', $shp_no))->addIndexColumn().........

或者，它也可以工作$data = Item::where('shp_no_for_it', $shp_no): 然后return Datatables::eloquent($data)....

【参考方案1】：

看起来你还没有在 ajax 中传递数据。所以首先创建一个数据表的函数

function itemDataTable(param=)
     dataTable = $('#itemTable').DataTable(
        processing: true,
        serverSide: true,

         ajax: 
             url: " route('getit') ",
             type: 'get',
             headers:  'content-type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') ,
             data: param,


         ,
        columns: [
            data: 'id', name: 'id',
            data: 'action', name: 'action', orderable: false, searchable: false,
        ]
    );

    return dataTable;

然后在页面加载调用数据表

$(function () 
  itemDataTable();
);

点击搜索按钮

$('#search_button').click(function()
    var param=
        shp_no_for_it:$('#shp_no_for_it').val();
    
    itemDataTable(param)
);

如果您使用服务器端处理，则在控制器中无需调用 get() 。但是添加以下内容

processing: true,
serverSide: true,

在控制器中

public function getit(Request $request)

    $shp_no = $request->shp_no_for_it;
            $data = Item::select('*') ->where('shp_no_for_it', $shp_no);
            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('action', function($row)
                            $btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';
                            return $btn;
                    )
                    ->rawColumns(['action'])
                    ->make(true);

在html表格中

<table class="table table-bordered data-table col-md-12" id="itemTable">

【讨论】：

感谢您的帮助.. 但是当我使用它时，我收到此错误 Uncaught TypeError: dataTable is not a function at HTMLButtonElement. (view-items:718) at HTMLButtonElement.dispatch ( jquery.min.js:3) 在 HTMLButtonElement.q.handle (jquery.min.js:3).. 请告诉我如何解决这个问题.. 谢谢

@PolesAnwar 你可以显示完整的刀片代码

tbody>

ID	Action

@PolesAnwar 请添加到该页面的完整代码问题

它现在可以工作了.. 谢谢.. 我删除了这个函数 ($(function () itemDataTable(); );) 并在 search_button 添加这个 ( $('#itemTable' ).dataTable().fnClearTable(); $('#itemTable').dataTable().fnDraw(); $('#itemTable').dataTable().fnDestroy(); ) ..谢谢你的帮助