I have a DataTable on my website that uses server side processing which works as intended. However, I am adding additional search fields that draw from the DataTable and refine the search results for players. So for example, which hand they shoot with, their position, name, etc.
The filter search boxes work just fine for data that I did not alter via the columns settings. In this case, the player name was altered to create an anchor tag using both the first and last name. When I search that table column, the DataTable outputs the following error:
Error
datatables warning: table id=DataTables_Table_0 - exception message mb_strtolower() expects parameter 1 to be string, array given
I've researched the problem but there doesn't seem to be too much documentation on the error. If anyone has any suggestions on how to solve this, it would be greatly appreciated!
Search Box
<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>
DataTable Controller
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': ' ',
'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();
});