fnClearData not clearing the table

mstone42

We have a table using server-side processing, and filtering is turned off. There is also a search form on the page where the user can specify criteria for filtering the data - they select values from various drop-down fields, click the "Search" button, and the table is refreshed. Everything works as long as the criteria produces data (i.e. row count > 0). But if the criteria produces 0 rows, the table doesn't clear; the previous search results remain. A breakpoint at the line "if (oTab.fnGetData().length <= 0)" does show that there are 0 rows, and that the fnClearTable function is called but does nothing. I've tried removing the 'CheckForRows' function (under the assumption that since the table uses server-side processing, it would automatically handle things), but that doesn't work either. Debug code in the page called via AJAX ("search_product.php") verifies that everything is working correctly on that end.

FYI, the refresh (Search submit) uses fnReloadAjax because fnDraw causes the whole page to reload, which resets the search criteria back to the default.

And changing "oTab.fnClearTable(false);" to "oTab.fnClearTable(true);" causes the AJAX call to be repeated (infinitely?) when there are 0 rows even tho the page appears to have completed; but the fnClearTable still doesn't clear the table!

Any ideas why the fnClearTable isn't working when the AJAX call produces 0 rows?

Thanks!
--Mitch

[code]
// the fields from our search
var f_field1 = $('#field1'),
f_field2 = $('#field2'),
f_field3 = $('#field3'),
f_field4 = $('#field4'),
f_allSearch = $([]).add(f_field1).add(f_field2).add(f_field3).add(f_field4);

var oTable = $('#productTable').dataTable( {
"bPaginate": true
,"bFilter": false // Hide the search box.
,"bProcessing": true // Show the processing label.
,"bServerSide": true
,"iDisplayLength": 12
,"sPaginationType": "full_numbers"
,"sDom": 'T<"dttop"lf>rt<"dtbot"ip<"clear">'
,"fnDrawCallback": fnToggleDetails
,"sAjaxSource": "search_product.php"
,"fnServerData": function ( sSource, aoData, fnCallback ) {
if (aoData == null) aoData = oTable.fnSettings().aoData;
$.ajax({
"dataType": "json"
,"type": "POST"
,"url": sSource
,"data": aoData.concat(Form_Serialize(f_allSearch))
,"cache": false
,"success": fnCallback
,"error":function (xhr, ajaxOptions, thrownError){
if(typeof thrownError != 'undefined') alert(xhr.status + ': ' + thrownError);
}
,"complete": function (XMLHttpRequest, textStatus) {
checkForRows(oTable,'productTable');
}
});
}
,"bAutoWidth": false
,"aaSorting": [[ 2, "asc" ]]
,"aoColumns": [
/* 0 - detail button */ { "sWidth": "30px", "sClass": "center", "bSortable": false}
/* 1 - id */ ,{ "bVisible": false, "sName": "id" }
/* 2 - name */ ,{ "sWidth": "235px", "sName": "product", "sClass": "aLeft"}
/* 3 - status */ ,{ "sWidth": "97px", "sName": "status", "sClass": "aCenter" }
/* 4 - date */ ,{ "bVisible": false, "sName": "date" }
/* 5 - descr */ ,{ "bVisible": false, "sName": "description" }
]
});


function checkForRows(oTab, tabName) {
var tab = "#" + tabName;

// check if we need to show 'No Rows'
if(oTab.fnGetData().length <= 0) {
oTab.fnClearTable(false);
if ($(tab+"_wrapper .dt_norows").length == 0) $(tab+"_wrapper").append('No rows returned.<\/h3><\/div>');
} else {
if ($(tab+"_wrapper .dt_norows").length > 0) $(tab+"_wrapper .dt_norows").remove();
}

// remove the 'Processing' banner
$(tab + "_processing").remove();
}


// converts all field data to {name,value} pairs compatible with aoData
function Form_Serialize(fields) {
...
}


// handle the Search Submit button click
$("#fsSearch").button({label:'Search',icons:{primary:'ui-icon-search'}}).click(function(){
// grab the latest values from the search form
var postVars = oTable.fnSettings().aoData.concat(Form_Serialize(f_allSearch));
// and give it back to the table
oTable.fnSettings().aoData = postVars;
// reload the table
oTable.fnReloadAjax(oTable.fnSettings().sAjaxSource);
// do not refresh the page
return false;
});
[/code]

mstone42

Anyone? Help! I'm still pulling my hair out on this one, and I don't have that much left to pull out!

Here is some additional information that may help ...
1) the table Info ("Showing x to y of z records") and pagination buttons also are not getting updated when there are 0 rows returned (not surprising since the fnClearTable function isn't clearing the table).
2) Line 19: this is necessary because the aoData value getting passed into the fnServerData function in is always null when the Search button is click, and this is causing the entire page to refresh.
3) In the CheckForRows function, when the search has produced 0 rows, oTab.fnSettings().aoData is empty.

Here is the JSON object being returned from the AJAX call to the PHP page when the query results in 0 rows:
[code]
JSON [stdClass Object
(
[sEcho] => 0
[iTotalRecords] => 0
[iTotalDisplayRecords] => 0
[aaData] => Array
(
)
)
]
[/code]

Thanks,
--Mitch

allan

When using server-side processing, there should be no need to call fnClearTable - see the server-side example and search for 'zzzz': http://datatables.net/examples/server_side/server_side.html . The server sends back an empty array.

What I am slightly concerned about from your JSON info there, is the sEcho => 0. sEcho should never be 0 for server-side processing. Are you sure your echoing back what DataTables is sending (cast as an integer for security reasons!).

Regards,
Allan

mstone42

Why, oh why, is it always the most simplest of things that cause the greatest problems?!?

In the PHP script called by AJAX, when there are rows to be returned, the sEcho value is being correctly set
$json->sEcho = intval($_POST['sEcho']);
But when the query finds 0 rows... we were explicitly setting sEcho to 0 (not sure why).

That one little change has fixed the problem, and as you pointed out, fnClearTable is no longer necessary.

Thanks, Allan - you've saved my butt! Guess I couldn't see the forest for the trees!

--Mitch

XanderCage

hi, i am new user for this forum..

I'm having the same problem... i use data tables server side processing and fnClearTable(); not clear the table...

but i used checkbox for all TD... (like select all)

my clear code...

[code]
$('#deleteall').click(function()
{
$('#grid_table input[type=checkbox]').each(function()
{
oTable.fnDeleteRow( 0 );
});

});
[/code]
and cleared my table..

good jobs...