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

时间:2020-02-27 06:19:00

标签: php jquery laravel datatables yajra-datatable

我正在处理 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

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

预先感谢大家。

2 个答案:

答案 0 :(得分:0)

我目前正在处理类似的案例,这是我在代码上所做的工作,并且可以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();
});

答案 1 :(得分:0)

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

或者您可以使用 manual search 编写自己的手动过滤功能,从而禁用包的全局搜索。

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