Laravel DataTable自定义搜索

时间:2019-11-14 00:59:22

标签: javascript laravel datatables

我的网站上有一个DataTable,它使用服务器端处理程序,可以正常工作。但是,我要添加其他从DataTable中提取的搜索字段,并针对球员优化搜索结果。例如,他们用哪只手射击,他们的位置,名字等等。

对于我没有通过列设置更改的数据,过滤器搜索框可以很好地工作。在这种情况下,将玩家名称更改为使用名字和姓氏创建锚标记。当我搜索该表列时,DataTable输出以下错误:

错误

datatables warning: table id=DataTables_Table_0 - exception message mb_strtolower() expects parameter 1 to be string, array given

我已经研究了这个问题,但是关于该错误的文档似乎并不多。如果有人对如何解决此问题有任何建议,将不胜感激!

搜索框

<div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Player</label>
    <div class="col-sm-10">
        {{ Form::text('name', null, array('id' => 'name', 'class' => 'form-control form-control-alternative', 'id' => 'name')) }}
     </div>
</div>

数据表控制器

  public function playersFilter()
  {
    $cards = DB::table('cards')->leftJoin('players', 'cards.player_id', '=', 'players.id')->leftJoin('teams', 'cards.team_id', '=', 'teams.id')->select('cards.*', 'teams.league', 'teams.abbrv', 'players.first', 'players.last', 'players.handness', 'players.nationality')->where('cards.position', '!=', 'G')->orderBy('cards.overall', 'desc')->get();

    return Datatables::of($cards)->make(true);
  }

JQuery

  <script type="text/javascript">
    $(document).ready(function(){
      var table = $('.players-adv-search').DataTable({
        'processing'  : true,
        'language'    : {
          'loadingRecords': '&nbsp;',
          'processing': '<i class="fa fa-spinner fa-medium fa-fw"></i><span class="loading-text">Loading...</span>'
        },
        'serverSide'  : true,
        'info'        : false,
        'ajax'        : "{{ route('players.filter') }}",
        'columns'     : [
            { "data": null, render: function ( data, type, row ) {
                var type = data.card_type;
                var type_final = type.replace('-', ' ').replace('-', ' ').toLowerCase();

                return type_final.replace(/(^([a-zA-Z\p{M}]))|([ -][a-zA-Z\p{M}])/g,
                function($1){
                    return $1.toUpperCase();
                });
            }},
            { "data": "league", className: 'text-center' },
            { "data": "abbrv", className: 'text-center' },
            { "data": null, render: function ( data, type, row ) {
                // This is the column that corresponds with the search box
                if (type === 'display') {
                  data = '<a href="card/' + data.id + '" target="_blank">' + data.first + ' ' + data.last + '</a>';
                }
                return data;
            }},
            { "data": "position", className: 'text-center' },
            { "data": "player_type", className: 'text-center' },
            { "data": "handness", className: 'text-center' },
            { "data": null, className: 'search-syn text-center', render: function ( data, type, row ) {
                  var synergies = ['NP', 'BL', 'X', 'BM', 'TN', 'DK', 'AD', 'WK', 'WM', 'RS', 'M', '1T', 'TK', 'WC', 'SP', 'FB', '', 'HH'];
                  var syn_ids = data.synergy_ids.split(',');
                  var syn_pts = data.synergy_pts.split(',');
                  var data = '';

                  $.each(syn_ids,function(i){
                    data += synergies[syn_ids[i]-1] + '<span class="search-syn-pts"> [' + syn_pts[i] + ']</span> ';
                  });

                return data;
            }},
            { "data": "overall", className: 'text-center' },
            { "data": "deking", className: 'text-center' },
            { "data": "handeye", className: 'text-center' },
            // .. Additional statistics
        ],
        'lengthChange': false,
        'paging'      : true,
        'pageLength'  : 50,
        'ordering'    : false,
      });

      // Name Search
      // Giving an error
      $('#name').change(function() {
        table.columns(0).search(this.value).draw();
      });

      // League Search
      $('#league').change(function() {
        table.columns(1).search(this.value).draw();
      });

      // Handness Search
      $('#handness').change(function() {
        table.columns(6).search(this.value).draw();
      });

1 个答案:

答案 0 :(得分:1)

由于未指定列名而出现错误。

更改此

$(document).ready(function(){
        ...
        'columns'     : [
            { "data": null, render: function ( data, type, row ) {

在此列中添加名称。

$(document).ready(function(){
            ...
            'columns'     : [
                { "data": null, name:"players.first", render: function ( data, type, row ) {