Default DataTable does not work

joeller

I am using dataTables in my MVC app. I used the default table on one table. It worked fine. Then I used it on a different table it it breaks each time with "FundDocsView is undefined.
[code]

[/code]

later on the same view
[code]
@Scripts.Render("~/Scripts/jquery.dataTables.js")

$(document).ready(function () {
$('#FundDocsView').dataTable();

});


[/code]

Jquery and JQueryUI are included on _Layout.cshtml


I don't see what I am doing wrong.

allan

Please link to a test case, as noted in the forum rules. Your code above looks fine.

Allan

joeller

I don't see how that is possible. The problem is that the project is still a Visual Studio Project on a development machine. On running it, it never even gets to the point where the browser opens because it breaks and throws the exception while still loading the page.

And even if I were to deploy it as is, you would have to have DoD clearance, be issued a CAC card, and access the site from the .mil domain to see any of the servers to which I have access.

How about if I provide you with screen shots with the errors.

Failing that how about providing the project with the databases?

Update on the error. Turns out there was another incomplete set of JavaScript tags at the top of the page which had only the word "FundDocsView" in them.

After removing that I get the following error:

[code]DataTables warning (table id='FundDocsView'): Requested unknown parameter '1' from the data source for row 1
[/code]

This occurs at line 669 in the jquery.dataTables.js file
[code]
/* Classes */
if ( bClass )
{
nCell.className += ' '+oCol.sClass;
}
[/code]

joeller

Error is occurring due to use of colspan in td element.
Tried using code from here
http://datatables.net/forums/discussion/13163/is-it-possible-to-set-a-cell-class-and-colspan-in-aadata#Item_3
but that still delivered the same error.

at https://www.datatables.net/forums/discussion/comment/43012#Comment_43012
Roy Ling provided code to manually use fnRowCallback to manually add a colspan attribute and remove the place holder cells. However it appears you need to know the row that requires this treatment to call the function, and the attribute colspan, can not be in the cell. I am going to try to combine the two sets of code to use one to locate which row needs to be altered and the the other to do the altering.

Should be interesting

joeller

I set the id for each Row that needed to have colspan to '@item.FundingDoc.FundDocNum.ToString()Sub'

Then I set the document.Ready() function as below:

[code]
$(document).ready(function () {
$('#FundDocsView').dataTable({
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
alert("got here first");
if($(nRow).attr("id*=Sub")) {
alert("got here");
var iCol = $(nRow).children('td').length;
$(nRow).children('td:gt(0)').remove(); // remove empty placeholder cells
$(nRow).children('td:first').attr('colspan', iCol);
}

}
});
});
[/code]

Unfortunately this did not work. I don't know whether the if clause failed to find the id attribute of tr or if the if clause never got called. I put a breakpoint on that line but no break ever occurred. But when I put a break point on the document.ready function no break occurred there either, but I know it is running because the HTML table is being rendered as a dataTable. So as you can see I put in a couple of alerts. "Got here first" fired twice one for each row. "Got here" never fired.

joeller

Changed line 5 to read
[code]
if ($(nRow).attr("id").toString().indexOf("Sub") != -1) {
[/code]

Now all is working as designed.

joeller

After doing all of this to get this working, instead turned to Jquery Ui plugin DataTree in combination with the dataTables to get the desired rendering.
See code too accomplish this below:
[code]

$(document).ready(function () {
$('#FundDocsView').dataTable({
"aaSorting" : []
});
$('#PRView').dataTable({
"aaSorting": []
});
$('#ContractsView').dataTable({
"aaSorting": []
});
$("#FundDocsView").treetable({ expandable: true });
$("#PRView").treetable({ expandable: true });
$("#ContractsView").treetable({ expandable: true });
});

[/code]

Looks really good.