Using jQuery DataTables plug-in in MVC3 with jQuery Ajax - asp.net-mvc

Question

I'm trying to use the DataTables jQuery plug-in in MVC3 using an ajax request as the data source for the table.
I have a View called "Search" which contains a search form...under the form, I have the following html...
<table id="caseTable" class="clear full-width dataTable">
<thead>
<tr>
<th>Case Name</th>
<th>Court</th>
<th>Case Number</th>
<th>Case Filed Date</th>
<th>Chapter</th>
<th>Last Researched</th>
<th>Disposition</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
When the search form is submitted, an ajax call is sent off the get the tr elements for each record to be displayed in the table.
$.ajax({
url: "/Home/SearchForCases",
type: "POST",
data: {
CaseNumber: caseNumber,
DebtorLastName: lastName,
Last4SSN: last4SSN,
FullSSN: fullSSN,
StartDate: $("#StartDate").val(),
EndDate: $("#EndDate").val(),
SelectedCourtDistrictId: $("#SelectedCourtDistrictId").val(),
SelectedChapterId: $("#SelectedChapterId").val()
},
success: function (result) {
$("#caseTable > tbody").html(result);
$("#caseTable").dataTable({
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"],
"bAutoWidth": false
});
$("#caseTable > tbody > tr").dblclick(function () {
$(this).removeClass("white-highlight").addClass("yellow-highlight");
});
},
complete: function () {
$("#ajaxProgress").dialog('close');
$("#searchResults").show();
}
});
Everything loads up fine on the first call, but on subsequent calls, the data returned from the ajax call is being appended vs replaced. I have checked the html being returned from the ajax call and it's always returning one row of data, <tr><td></td></tr> only.

Answer 1

Add the bDestroy option to remove the old datatable formatting first. You could also try removing the bRetrieve option.
success: function (result) {
$("#caseTable > tbody").html(result);
$("#caseTable").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"],
"bDestroy": true
});
Edit
If possible, it might be better to change your code so you can use the built in datatable ajax functionality by passing in the sAjaxSource option when creating the datatable. This would require you to change your server side code to return json of data instead of html.
If that isn't possible, then you should use fnClearTable to clear the existing data before adding the new data.
var dataTable;
$.ajax({
...
success: function (result) {
// If it has been created, clear the existing data in the datatable
if(dataTable != null) {
dataTable.fnClearTable();
}
// Add your new data
$("#caseTable > tbody").html(result);
// Create / recreate the datatable
dataTable = $("#caseTable").dataTable({
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"],
"bAutoWidth": false
});
$("#caseTable > tbody > tr").dblclick(function () {
$(this).removeClass("white-highlight").addClass("yellow-highlight");
});
},
...
});

Answer 2

try initializing your datatable outside of the success callback and then just call the fnDraw() function to redraw the table after you have updated the html of the table.
EDIT
var dataTable = $("#caseTable").dataTable({
"bJQueryUI": true,
"bRetrieve": true,
"bServerSide": true,
"sAjaxSource": //Url to hit to query your database and return table data
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"]
});
$("#caseTable tbody tr").dblclick(function () {
$(this).removeClass("white-highlight").addClass("yellow-highlight");
});
$.ajax({
url: "/Home/SearchForCases",
type: "POST",
data: {
CaseNumber: caseNumber,
DebtorLastName: lastName,
Last4SSN: last4SSN,
FullSSN: fullSSN,
StartDate: $("#StartDate").val(),
EndDate: $("#EndDate").val(),
SelectedCourtDistrictId: $("#SelectedCourtDistrictId").val(),
SelectedChapterId: $("#SelectedChapterId").val()
},
success: function () {
dataTable.fnDraw();
},
complete: function () {
$("#ajaxProgress").dialog('close');
$("#searchResults").show();
}
});

Answer 3

Hey sorry for the poor formatting but just add this condition in your code. This will ensure that of your table already exists and you are just going from one page to another then your data will be replaced and not appended. Hope this helps
if(typeof datataTable !="undefined" && datatable != null)
{
$.ajax({
success: function (result) {
// If it has been created, clear the existing data in the datatable
if(dataTable != null) {
dataTable.fnClearTable();
}
// Add your new data
$("#caseTable > tbody").html(result);
// Create / recreate the datatable
dataTable = $("#caseTable").dataTable({
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"asStripClasses": ["white-highlight"],
"bAutoWidth": false
});
$("#caseTable > tbody > tr").dblclick(function () {
$(this).removeClass("white-highlight").addClass("yellow-highlight");
});
},
});} else{dataTable.fnClearTable(0);dataTable.fnDraw();}