Filter is "Processing" but not Filtering
Filter is "Processing" but not Filtering
I'm trying to apply individual column filtering example to my table but it doesn't work. Also i've found out that global filter doesn't work either. When I write smth. in any search field (global or column) the table shows a popup "Processing..." but nothing happens.
Here is my initialization code:
[code]
oTable= $('table#oTable').dataTable({
fnInitComplete: function(){
//Set some timeout for filtering
var timeout = undefined;
$('tfoot input').unbind('keyup').bind('keyup',function(){
if (timeout != undefined) {
clearTimeout(timeout);
}
var $this = this;
timeout = setTimeout(function() {
timeout = undefined;
oTable.fnFilter($($this).val(), $("tfoot input").index($($this)));
}, 500);
})
},
sPaginationType: "full_numbers",
bFilter : true,
bJQueryUI : true,
bProcessing : true,
bServerSide : true,
sDom : '<"H"lfr>t<"F"ip> ',
sAjaxSource : "configurator/tableSource.cfm",
"aoColumns" : [
{"sName": "name1", "sTitle": "Name 1", "sWidth": "10%", "bSortable": false, "sClass": "center", "bSearchable" : false},
{"sName": "name2", "sTitle": "Name 2", "sWidth": "20%", "bSortable": true, "sClass": "center", "bSearchable" : true},
{"sName": "name3", "sTitle": "Name 3", "sWidth": "10%", "bSortable": true, "sClass": "center", "bSearchable" : true},
{"sName": "name4", "sTitle": "Name 4", "sWidth": "50%", "bSortable": true, "bSearchable" : true},
{"sName": "name5", "sTitle": "Name 5", "sWidth": "10%", "bSortable": true, "sClass": "center", "bSearchable" : false}
],
fnServerData : getData,
fnDrawCallback: function(){
oTable.find('a.OLink').fancybox({
'width' : 950,
'height' : 590,
'scrolling' : 'no',
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'type' : 'iframe',
'onClosed' : function(){
if(isSaved){
oTable.fnStandingRedraw();
isSaved = false;
}
}
});
}
});
[/code]
And here is my table code:
[code]
Name 1
Name 2
Name 3
Name 4
Name 5
[/code]
Please Help! I've already spent 2 days trying to resolve this issue.
P.S.
bFilter, bJQueryUI, bProcessing, bServerSide etc. are not links! Just code parser error
Here is my initialization code:
[code]
oTable= $('table#oTable').dataTable({
fnInitComplete: function(){
//Set some timeout for filtering
var timeout = undefined;
$('tfoot input').unbind('keyup').bind('keyup',function(){
if (timeout != undefined) {
clearTimeout(timeout);
}
var $this = this;
timeout = setTimeout(function() {
timeout = undefined;
oTable.fnFilter($($this).val(), $("tfoot input").index($($this)));
}, 500);
})
},
sPaginationType: "full_numbers",
bFilter : true,
bJQueryUI : true,
bProcessing : true,
bServerSide : true,
sDom : '<"H"lfr>t<"F"ip> ',
sAjaxSource : "configurator/tableSource.cfm",
"aoColumns" : [
{"sName": "name1", "sTitle": "Name 1", "sWidth": "10%", "bSortable": false, "sClass": "center", "bSearchable" : false},
{"sName": "name2", "sTitle": "Name 2", "sWidth": "20%", "bSortable": true, "sClass": "center", "bSearchable" : true},
{"sName": "name3", "sTitle": "Name 3", "sWidth": "10%", "bSortable": true, "sClass": "center", "bSearchable" : true},
{"sName": "name4", "sTitle": "Name 4", "sWidth": "50%", "bSortable": true, "bSearchable" : true},
{"sName": "name5", "sTitle": "Name 5", "sWidth": "10%", "bSortable": true, "sClass": "center", "bSearchable" : false}
],
fnServerData : getData,
fnDrawCallback: function(){
oTable.find('a.OLink').fancybox({
'width' : 950,
'height' : 590,
'scrolling' : 'no',
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'type' : 'iframe',
'onClosed' : function(){
if(isSaved){
oTable.fnStandingRedraw();
isSaved = false;
}
}
});
}
});
[/code]
And here is my table code:
[code]
Name 1
Name 2
Name 3
Name 4
Name 5
[/code]
Please Help! I've already spent 2 days trying to resolve this issue.
P.S.
bFilter, bJQueryUI, bProcessing, bServerSide etc. are not links! Just code parser error
This discussion has been closed.
Replies
You can just call fnStandingRedraw when needed instead of fnFilter (fbFilter can be set to false)
[code]
$('tfoot input').unbind('keyup').bind('keyup',function(){
oTable.fnStandingRedraw();
})
[/code]
The next step is prepearing and sending data to the server where you should filter data using this parameters.
[code]
function getData(sSource, aoData, fnCallback){
var param1 = $('#foo1').val();
var param2 = $('#foo2').val();
aoData.push(
{ "name": "param1", "value": param1},
{ "name": "param2", "value": param2 }
);
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
[/code]
Thats all you need. And you can place your search fields wherever you want.
[code]
$(document).ready(function() {
var oTable;
oTable = $('#displayData').dataTable({
"sDom": 'RCT<"toolbar"><"clear">lfrtip', /* R: ReOrderCol, C:ColVis, T:TableTools */
/*"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true, */
"bFilter":true,
"bProcessing": true,
"bStateSave": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "cf/cf_db_adapter_due_list.cfm",
/* "bAutoWidth": false, */
"aoColumns": [
{
"sType" : "string",
"bSearchable": "true",
"sName": "RESPONS",
"sTitle": "Assigned Technician",
"sWidth": "40%",
"bSortable": "true"
},{
"sType" : "number",
"bSearchable": "false",
"sName": "DUE_DAYS",
"sTitle": "Due Days",
"sWidth": "15%",
"bSortable": "true"
},{
"sType" : "string",
"bSearchable": "false",
"sName": "OVERDUE_FLAG",
"sTitle": "Overdue",
"sWidth": "10%",
"bSortable": "true"
}
],
"aaSorting": [[1,'desc']],
"bServerSide": true,
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push(
{
"name": "table",
"value": "ibs.dbo.TASKS"
},
{
"name": "sql",
"value": "SELECT RESPONS, DateDiff(\"d\", WO_DATE2, ExpComplOverdueAlarmDate) AS DUE_DAYS, CAST(CASE WHEN (WO_DATE2 IS NULL AND ExpComplOverdueAlarmDate IS NOT NULL) OR (DateDiff(\"d\", WO_DATE2, ExpComplOverdueAlarmDate) < 0) THEN 'YES' ELSE 'NO' END AS VARCHAR) AS OVERDUE_FLAG"
}
);
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"oLanguage": {
"sLengthMenu": "Page length: _MENU_",
"sZeroRecords": "No matching records found",
"sSearch": "Search all columns:"
},
"oColVis": {
/*"activate": "mouseover", */
"aiExclude": [0],
"bRestore": true,
"sAlign": "center",
"buttonText": "Hide/Show Columns"
},
"oTableTools": {
"sSwfPath": "swf/copy_cvs_xls_pdf.swf",
"buttons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf" ]
}
]
},
"aoColumnDefs": [ {
"sClass": "center",
"aTargets": [ -1 ]
} ]
});
/* Add events */
$('#displayData tbody tr').live('click', function () {
var nTds = $('td', this);
var sEmployee = $(nTds[0]).text();
$("#employee").attr("value", sEmployee);
$("#frm").submit();
});
$("div.toolbar").html('Due List');
oTable.fnStandingRedraw();
});
[/code]