columnFilter( ) not working when use ajax server side.

seanyboy

Hi Experts,
i am a dataTable beginner , i was trying to use columnFilter when data is come from 'Serverside' ,but is not work and no error shown, but when a delete the ajax serverside code the columnFilter will work great .i have no idea what's going on, can someBody to help me ? thank you very much !
this is my code under below:
js :
``` var table = $('#dataTables-example').dataTable({
"ajax":"../image/getAjaxPage",
"dataSrc": "",
"bFilter": false,
"bServerSide" : true,
"columns": [
{ "data": "id" },
{ "data": "importedDateTime","bSortable": false, },
{ "data": "updateDateTime" },
{ "data": "imageCategoryID" },
{ "data": "userID" },
{ "data": null,
"bSortable": false,
"mRender" : function(data,type,full){
var string;
if(data.valid == "0"){
string = "<button type='button' class='btn btn-danger btn-circle edit_Image' data-id="+data.id+" data-toggle='modal' data-target='#editReceipt'><i class='fa fa-list'></i></button>";
}else{
string = "<button type='button' class='btn btn-primary btn-circle edit_Image' data-id="+data.id+" data-toggle='modal' data-target='#editReceipt'><i class='fa fa-list'></i></button>";
}
return string;
}
}
]
});
$('#dataTables-example').dataTable().columnFilter({
"sPlaceHolder": "head:after",
aoColumns: [
null,
null,
null,
{
type: "select",
values: ["valid","validtated"]
},
{
type: "select",
values: ["admin","user1"]
},
{
type: "select",
values: ["a","b","c"]
},
]
});
HTML

System ID	Imported Date	Validated Date	Category	Validated By	Action
System ID	Imported Date	Validated Date	Category	Validated By	Action

my return data:
{draw: "1", recordsTotal: 35, recordsFiltered: 35,…}
data:
[{id: "1", importedDateTime: "2017-07-20 00:00:00", updateDateTime: "2017-08-15 11:44:09",…},…]
0:{id: "1", importedDateTime: "2017-07-20 00:00:00", updateDateTime: "2017-08-15 11:44:09",…}
1:{id: "2", importedDateTime: "2017-07-20 00:00:00", updateDateTime: "2017-08-11 18:11:01",…}
2:{id: "3", importedDateTime: "0000-00-00 00:00:00", updateDateTime: "2017-08-15 11:44:37",…}
3:{id: "4", importedDateTime: "2017-07-20 00:00:00", updateDateTime: "2017-08-11 18:11:37",…}
4:{id: "5", importedDateTime: "2017-07-20 00:00:00", updateDateTime: "2017-08-11 17:15:52",…}
5:{id: "6", importedDateTime: "2017-07-20 00:00:00", updateDateTime: "2017-08-11 18:11:01",…}
6:{id: "7", importedDateTime: "2017-07-20 00:00:00", updateDateTime: "2017-08-03 15:37:31",…}
7:{id: "8", importedDateTime: "2017-07-20 00:00:00", updateDateTime: "2017-08-11 18:11:45",…}
8:{id: "9", importedDateTime: "2017-07-20 00:00:00", updateDateTime: "2017-08-11 18:13:36",…}
9:{id: "10", importedDateTime: "0000-00-00 00:00:00", updateDateTime: "2017-08-11 18:11:01",…}
draw:"1"
recordsFiltered:35
recordsTotal:35
//----
I said :if i don't use serverside the columnFilter will work great , so maybe the problem is 'serveriside', or is the version problem?

seanyboy

i tried the lasted version and still not woking...

kthorngren

Your server side scripts are responsible for performing the search and returning the data. What are you using for the server side script?

Kevin