Problem with DataTable wrapper and dynamic number of columns

Richard12511

I have an asp.net site that I've built using the MVC 3 framework. I'm using DataTables to transform all of the tables on my site(and there are a lot of them) into a more user friendly experience. Unfortunately, a couple of the tables I have don't have a set number of columns. There is no way around this either. The number of columns is dependent on a stored procedure I'm using to query a database. I've searched and searched but I can't seem to find a solution to this problem.

Basically, when the table get's transformed on the $('document').ready( function() {}) call, the table does in fact become sortable, and the table head seems to get its theme properly applied(using a custom theme created with jquery themeroller), the problem is that the wrapper that contains the filter and paginate elements ends up being to small.

Here's a picture you can picture what I'm talking about
http://s8.postimage.org/8qqhn0sl1/Dynamic_Colum_Data_Table_Problem.png

It's a decent size site and almost all of the visual data is dependent on a secure database, so it's kind of hard to post any meaningful code. I'm using Twitter Bootstrap's fluid layout for the part of the site in question.

Just to give a basic idea though, the dynamic table structure in the view (coming from the controller) looks like this

[code]




ID


First Name


Last Name


Company Name


Date

@*Variable number of td elements here*@
@for (int i = 8; i < ViewBag.AttendeesHeaderRow.Cells.Count; i++)
{

@ViewBag.Attendees.HeaderRow.Cells[i].Text

}

Event






Total

@if (ViewBag.Attendees.Rows.Count > 0)
{
@*Variable number of td elements here*@
@for (int i = 8; i < ViewBag.Attendees.HeaderRow.Cells.Count; i++)
{

@ViewBag.Attendees.Rows[ViewBag.Attendees.Rows.Count - 1].Cells[i].Text

}

@(ViewBag.Attendees.Rows.Count - 1)

}
else
{

0

}



@for (int i = 0; i < ViewBag.Attendees.Rows.Count - 1; i++)
{


@ViewBag.Attendees.Rows[i].Cells[1].Text


@ViewBag.Attendees.Rows[i].Cells[2].Text


@ViewBag.Attendees.Rows[i].Cells[4].Text


@ViewBag.Attendees.Rows[i].Cells[5].Text


@ViewBag.Attendees.Rows[i].Cells[0].Text


@*Variable number of td elements here*@
@for (int j = 8; j < ViewBag.Attendees.Rows[0].Cells.Count; j++)
{

@if (ViewBag.Attendees.Rows[i].Cells[j].Text == "1")
{
@ViewBag.Attendees.Rows[i].Cells[j].Text

}

}

1


}


[/code]

Also the table is wrapped within a "span9" class element that has a width of 610px, but the table itself can stretch well beyond that (over 1000 px) for large datasets.

I'm calling the .dataTable function in the document.ready

[code]


$(document).ready(function () {


$('#attendeeTable').dataTable({
//"bPaginate": false,
//"bFilter": false,
//"bInfo": false
//"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bAutoWidth": false

});

});


[/code]

Finally, I'd like to add that I've also made sure that "width" is set to 100% in the class css. What's going on here?