【问题标题】:Load DataTable where select in Laravel 8 with yajra datatables在 Laravel 8 中使用 yajra 数据表加载 DataTable where select
【发布时间】: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-&gt;where('shp_no_for_it', $shp_no))-&gt;addIndexColumn().........
  • 或者,它也可以工作$data = Item::where('shp_no_for_it', $shp_no): 然后return Datatables::eloquent($data)....

标签: laravel laravel-8 yajra-datatable


【解决方案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(); ) ..谢谢你的帮助
猜你喜欢
  • 1970-01-01
  • 2020-12-26
  • 2018-04-26
  • 2021-11-24
  • 2021-11-28
  • 1970-01-01
  • 2018-03-03
  • 2021-08-02
  • 2019-02-15
相关资源
最近更新 更多