Individual column filtering is working as "All Search"
Individual column filtering is working as "All Search"
Hi,
I am using server side processing but when i integrated individual column filtering its behaves differently, i have used the same data s shown in demo example.
I my Demo when i search "Misc" in Browser it gives me following result:
Rendering engine Browser Platform(s) Engine version CSS grade
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
In demo it shows "No matching records found ", even when i search data which is not available, Filter is not performed and "No matching records found" is also not displayed in any case.
My code:
$(document).ready( function () {
var oTable = $('#example').dataTable({
"sAjaxSource": "/ExampleDataTableJSON/FeedServlet",
"bAutoWidth": false,
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"fnStateSave": function (oSettings, oData) {
saveState(oSettings,oData);
},
"fnStateLoad": function (oSettings, oData) {
var o;
$.ajax({
type: "GET",
url: "/ExampleDataTableJSON/loadState",
async: false
}).done(function(data) {
o = $.parseJSON(data);
});
return o;
},
"bServerSide": true,
"sDom": 'RC<"clear">lrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"bSortCellsTop": true,
"bStateSave": true,
"aoColumns": [
{ "mData": "engine" },
{ "mData": "browser" },
{ "mData": "platform"},
{ "mData": "version"},
{ "mData": "grade"}
]
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this) ) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes
*/
$("thead input").each( function (i) {
this.initVal = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = this.initVal;
}
} );
} );
function saveState(oSettings,oData){
$("#saveLayout").click(function(){
$.ajax({
type : "GET",
url : "/ExampleDataTableJSON/SearchList",
data: "data=" + JSON.stringify(oData),
success : function(data) {
}
});
});
}
I can't figure out whats wrong :( please help me
Thanks,
Sam
I am using server side processing but when i integrated individual column filtering its behaves differently, i have used the same data s shown in demo example.
I my Demo when i search "Misc" in Browser it gives me following result:
Rendering engine Browser Platform(s) Engine version CSS grade
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
In demo it shows "No matching records found ", even when i search data which is not available, Filter is not performed and "No matching records found" is also not displayed in any case.
My code:
$(document).ready( function () {
var oTable = $('#example').dataTable({
"sAjaxSource": "/ExampleDataTableJSON/FeedServlet",
"bAutoWidth": false,
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"fnStateSave": function (oSettings, oData) {
saveState(oSettings,oData);
},
"fnStateLoad": function (oSettings, oData) {
var o;
$.ajax({
type: "GET",
url: "/ExampleDataTableJSON/loadState",
async: false
}).done(function(data) {
o = $.parseJSON(data);
});
return o;
},
"bServerSide": true,
"sDom": 'RC<"clear">lrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"bSortCellsTop": true,
"bStateSave": true,
"aoColumns": [
{ "mData": "engine" },
{ "mData": "browser" },
{ "mData": "platform"},
{ "mData": "version"},
{ "mData": "grade"}
]
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this) ) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes
*/
$("thead input").each( function (i) {
this.initVal = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = this.initVal;
}
} );
} );
function saveState(oSettings,oData){
$("#saveLayout").click(function(){
$.ajax({
type : "GET",
url : "/ExampleDataTableJSON/SearchList",
data: "data=" + JSON.stringify(oData),
success : function(data) {
}
});
});
}
I can't figure out whats wrong :( please help me
Thanks,
Sam
This discussion has been closed.
Replies
Sorry my explanation is not much clear. But when i integrated individual filtering it behaves as Global search.
I have used servlet for server side processing, do i need to change something in servlet for individual filtering?? i have used same code from http://datatables.net/development/server-side/jsp.
Please help me ASAP
Thanks,
Sam
I have figure out something, its having problem in _fnAjaxUpdateDraw it gives error aaData is undefined.
Following is my json format:
{"iTotalDisplayRecords":88,"iTotalRecords":88,"
aaData":[
{"platform":"Win 98+ \/ OSX.2+","engine":"Gecko","browser":"Firefox 1.0","grade":"A","version":1.7},
{"platform":"Win 98+ \/ OSX.2+","engine":"Gecko","browser":"Firefox 1.5","grade":"A","version":1.8},
{"platform":"test","engine":"Gecko","browser":"Firefox 2.0","grade":"A","version":1.8},
{"platform":"Win 2k+ \/ OSX.3+","engine":"Gecko","browser":"Firefox 3.0","grade":"A","version":1.9},
{"platform":"OSX.2+","engine":"Gecko","browser":"Camino 1.0","grade":"A","version":1.8},
{"platform":"OSX.3+","engine":"Gecko","browser":"Camino 1.5","grade":"A","version":1.8},
{"platform":"Win 95+ \/ Mac OS 8.6-9.2","engine":"Gecko","browser":"Netscape 7.2","grade":"A","version":1.7},
{"platform":"Win 98SE+","engine":"Gecko","browser":"Netscape Browser 8","grade":"A","version":1.7},
{"platform":"Win 98+ \/ OSX.2+","engine":"Gecko","browser":"Netscape Navigator 9","grade":"A","version":1.8},
{"platform":"Win 95+ \/ OSX.1+","engine":"Gecko","browser":"Mozilla 1.0","grade":"A","version":1.0},
{"platform":"Win 95+ \/ OSX.1+","engine":"Gecko","browser":"Mozilla 1.1","grade":"A","version":1.1},
{"platform":"Win 95+ \/ OSX.1+","engine":"Gecko","browser":"Mozilla 1.2","grade":"A","version":1.2},
{"platform":"Win 95+ \/ OSX.1+","engine":"Gecko","browser":"Mozilla 1.3","grade":"A","version":1.3},
{"platform":"Win 95+ \/ OSX.1+","engine":"Gecko","browser":"Mozilla 1.4","grade":"A","version":1.4},
{"platform":"Win 95+ \/ OSX.1+","engine":"Gecko","browser":"Mozilla 1.5","grade":"A","version":1.5},
{"platform":"Win 95+ \/ OSX.1+","engine":"Gecko","browser":"Mozilla 1.6","grade":"A","version":1.6},
{"platform":"Win 98+ \/ OSX.1+","engine":"Gecko","browser":"Mozilla 1.7","grade":"A","version":1.7},
{"platform":"Win 98+ \/ OSX.1+","engine":"Gecko","browser":"Mozilla 1.8","grade":"A","version":1.8},
{"platform":"Win 98+ \/ OSX.2+","engine":"Gecko","browser":"Seamonkey 1.1","grade":"A","version":1.8},
{"platform":"Gnome","engine":"Gecko","browser":"Epiphany 2.20","grade":"A","version":1.8},
{"platform":"Win 98+ \/ OSX.2+","engine":"Gecko","browser":"Firefox 1.0","grade":"A","version":1.7},
{"platform":"Win 98+ \/ OSX.2+","engine":"Gecko","browser":"Firefox 1.0","grade":"A","version":1.7},
{"platform":"Win 95+ \/ Mac OS 8.6-9.2","engine":"Gecko","browser":"Netscape 7.2","grade":"A","version":1.7},
{"platform":"Win 95+ \/ Mac OS 8.6-9.2","engine":"Gecko","browser":"Netscape 7.2","grade":"A","version":1.7},
{"platform":"Win 95+ \/ Mac OS 8.6-9.2","engine":"Gecko","browser":"Netscape 7.2","grade":"A","version":1.7}]}
I don't know what is wrong in this, i can't figure out.
I hope somebody can help me
Thanks,
Sam
I solved the issue :) If anyone is getting similar problem just do the following stuff in your server side code. I am using servlet and MySQL database
Check if Resultset is null or not and return empty array
JSONArray array = new JSONArray();
......
if(!rs.next()){
//System.out.println(" ======== no Data ========");
result.put("iTotalRecords", total);
result.put("iTotalDisplayRecords", totalAfterFilter);
result.put("aaData", array);
}
So now my individual column filtering is working as expected :)
Thanks,
Sam