The rendered datatable data not searchable

fatih26

I am trying to render a column and I did it by;

"columnDefs" : [
{"targets": [1],
"render": function (data, type, row){
switch (data){
case 1 : return "X"; break;
case 2: return "Y"; break;
case 3 : return "Z"; break;
default : return "N/A";
}
}
}
]

But when I try to use search which is client side the function doesnt filter datas. It filters original data. How can I make it to work client-side data?

Thanks.

allan

Are you using server-side processing (serverSide)? if so, then yes, this would be expected since the rendering function is on the client-side. You would need to update whatever server-side processing script you are using to perform the search you need.

Without a test case and more information though, it is difficult to say that this is exactly the issue, or if it is something else.

Allan

fatih26

Hi @allan,

When I delete serverSide property the table not filling.

It throws error status 500.

My code is:

$(document).ready(function () {
$('#example').DataTable({
"serverSide": true,
"bSort": true,
"ajax": {
"url": "/service-process/data_for_datatable",
"type": "POST",
"dataType": "json",
"contentType": "application/json; charset=utf-8",
"data":
function (d) {
// this to see what is being sent to the server
console.log(d);
return JSON.stringify(d);
},
"dataFilter": function (response) {
// this to see what is being received from the server
console.log(response);
return response;
},
"error": function (xhr, error, code) {
alert(error + ' : ' + code);
}
},
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json"
},
"columns": [
{"data": "id"},
{"data": "serviceId"},
{"data": "fileNo"},
{"data": "applicationNo"},
{"data": "sentDate",
"render": function (value) {
if (value === null) return "";
return moment(value).format('DD/MM/YYYY');
}},
{"data": "serviceStartDate",
"render": function (value) {
if (value === null) return "";
return moment(value).format('DD/MM/YYYY');
}},
{"data": "serviceFinishDate",
"render": function (value) {
if (value === null) return "";
return moment(value).format('DD/MM/YYYY');
}},
{"data": "modifyDate",
"render": function (value) {
if (value === null) return "";
return moment(value).format('DD/MM/YYYY');
}},
{"data": "isSent"},
{"data": "isClosed"},
{"data": "message"},
{"data": "status"},
{"data": "isManuel"},
{"data": "type"},
{"data": "code"},
{"data": "ebaysFileNo"},
{"data": "dayOfCompletion"}
],
"columnDefs" : [
{"visible": false, "targets": [0, 9, 10, 11, 12, 13, 17] },
{"targets": [1],
"render": function (data, type, row){
switch (data){
case 1 : return "XYZ"; break;
case 2 : return "QWE"; break;
case 3 : return "ABC"; break;
default : return "N/A";
}
}
}
]
});
});

kthorngren

It throws error status 500.

The error is generated by the server. You will need to look at your web server log to start troubleshooting. The client side code won't help with troubleshooting.

Kevin

fatih26

Hi @kthorngren,

How about applying this filtering https://datatables.net/examples/api/multi_filter.html

But I dont want to filter column 0, 1, 2 and 3. The other colums would have that footer.

How can I manage to do that?

Thanks.

kthorngren

That example will work with server side processing. However it likely won't fix the issue with the column using columns.render. As Allan mentioned you will need a server based solution to handle searching rendered data.

But I dont want to filter column 0, 1, 2 and 3. The other colums would have that footer.

You can specify a number of different column-selector. One option is using the column indexes. For example:

        this.api()
            .columns( [4, 5, 6] )  // List all column indexes to apply the search to
            .every(function () {

Better might be to assign a class, maybe use columns.className, to the columns to apply the search to and use something like this:

        this.api()
            .columns( ".myClass" )  // List all column indexes to apply the search to
            .every(function () {

Kevin