自定义搜索过滤器 - Yajra 数据表服务

Question

我正在处理 yajra 数据表。我们将其用作服务，我想知道是否可以对其进行自定义过滤器搜索？有什么链接或建议吗？

这是我的代码：

public function dataTable($query)
{
    $datatables = datatables()->eloquent($query);
    return $datatables;
}

public function query()
{
    $report= AdminReport::select();

    return $this->applyScopes($report);
}

public function html()
{
    return $this->builder()
                ->setTableId('admin-reports-table')
                ->columns($this->getColumns())
                ->minifiedAjax()
                ->dom('Bflrtip')
                ->orderBy(0);
}

protected function getColumns()
{
    return [
        'id' => ['title' => 'ID #'],
        'player_name' => ['title' => 'Player Name'],
        'balance' => ['title' => 'Current Balance'],
    ];
}

这是我的前端：index.blade.php

<div class="col-sm-12">
  <div class="card">
    <div class="card-body">
      <div class="panel-body">
        <form class="form-inline" method="post" autocomplete="off" action=" 
          {{url('admin_report/filter') }}">
          <div class="form-group mx-sm-3 mb-2">
            <input type="date" class="form-control" name="date_range" placeholder="Date Range">
          </div>
          <button type="submit" class="btn btn-primary mb-2">Query</button>
        </form>                  
      </div>                            
     </div>
    </div>
</div>
<!-- DATATABLE -->
<div class="content">
   <div class="container-fluid">
       {{$dataTable->table(['class'=>'table table-bordered table-hover'])}}
   </div>
</div>

@push('scripts')
    {{$dataTable->scripts()}}
@endpush

我只是想问一下如何为这种方法实现自定义搜索过滤器。

提前谢谢各位。

Answer 1

我目前正在处理一个类似的案例，这就是我的代码，它 100% 有效。在我的例子中，我正在根据日期范围输入过滤我的结果。我只强调了重要部分，请结合 Yajra 文档和 DataTable.net 文档使用。我也在使用Keentheme's metronic admin template，它维护得很好并且有据可查

app/DataTable NameXclass.php

public function dataTable($query, Request $request)
{
    return datatables()
        ->eloquent($query)
        ->filterColumn('created_at', function ($query, $keywords) use ($request) {
            if (!$request->has('joined_between')) {
                return; //ignore if there are no dates
            }
            switch (sizeof($request->joined_between)){
                case 1: //do this if only 1 date is provided
                    $start = new Carbon($request->joined_between[0]);
                    $query->whereDate('created_at','=', $start);
                    break;
                case 2: //do this if both dates are provided
                    if($request->joined_between[0] == $request->joined_between[1]){
                        $start = new Carbon($request->joined_between[0]);
                        $query->whereDate('created_at','=', $start);
                    }else{
                        $query->whereBetween('created_at', $request->joined_between);
                    }
                    break;
            }
        });
}

index.blade.php

这里需要注意几点：datatable-input 是我在 js 中用来引用输入的 css 类，在 php 中使用 name 属性从请求中获取值（参见上面的代码，我通过了 $request对象），并且 yajra 数据表需要 data-col-index 属性来将过滤器映射到正确的列。我犯了一个错误，没有正确地包括/映射它们，我挣扎了一周才弄清楚我做错了什么。所以记住，不要像我一样

<div class="input-daterange input-group" id="kt_datepicker">
   <input type="text" class="form-control datatable-input" name="start" placeholder="From" data-col-index="2" />
   <input type="text" class="form-control datatable-input" name="end" placeholder="To" data-col-index="2" />
</div>

.js

//columns .. data-col-index=2 maps to created_at
var columns = [
    {data: 'id', name: 'id'},
    {data: 'appointmentable_type', name: 'appointmentable_type'},
    {data: 'created_at', name: 'created_at'},
    {data: 'updated_at', name: 'updated_at'},
]
...
//The search button event listener
$('#search').on('click', function(e) {
    e.preventDefault();
    var params = {};
    $('.datatable-input').each(function() {
        var i = $(this).data('col-index');
        if (params[i]) {
            params[i] += '|' + $(this).val();
        }
        else {
            params[i] = $(this).val();
        }
    });
    $.each(params, function(i, val) {
        // apply search params to datatable
        table.column(i).search(val ? val : '', false, false);
    });
    table.table().draw();
});

Answer 2

根据official docs，可以使用filterColumn实现对特定列的自定义搜索。

或者您可以使用manual search 编写自己的手动过滤函数，从而禁用对包的全局搜索。

你也可以在github上查看类似的issue。