Row Not Covering All Columns

zgoforth

So I have a DataTable I am using to pull information across a SharePoint site. It is doing a great job of fetching and populating the data, except in the collapsible rows, the row itself does not spread all the way across the column headers. Here is the JSFiddle I have created as a test case to show the issue, there is currently no data being appended to the table which is fine because it is still showing the issue.

https://jsfiddle.net/8mjhcopk/

Here is what it looks like on my site:

Even though this data isn't technically tabular. Is there a way to adjust the DataTable for it. I am only really using it for the print/pdf function because that is what this data is for is to be printed. The print function works fine, and shows all of the data on one page, the PDF function on the other hand cuts off the last column. Is there a way to fix it?

Last question, this is going to sound ridiculous because it is obviously a table, but is it possible to have the data displayed like so:

No column headers

Row 1 = Date (what it is ordered by)
SubRow 2 = Team (ordered by team(there are about 10 different teams))
SubRow 3 = Major Tasks
Child row of Subrow 3 = Major task data
SubRow 4 = Deliverables
Child of subrow 4 = deliverables data

So on and so forth?

zgoforth

UPDATE the Fiddle wasn't covering the whole column headers because I messed up a </th> tag and had <th> instead. However that was not an issue on my webpage, it is still not covering all of the column headers.

https://jsfiddle.net/sqv8pmgw/

kthorngren

There is no data in your fiddle for us to look at.

however it looks like you have 12 columns in your table and you are using this in rowGroups:

.append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')

Try changing colspan to match the number of columns in your table.

Kevin

zgoforth

@kthorngren Ok. I will make an example with JSON data to demonstrate. The colspan was the issue for one of those though. Thanks

kthorngren

Yes, the idea of the test case is to see the problem so we can more easily help debug

Kevin

zgoforth

@kthorngren I cannot find the reference to populate a JSON variable to the DataTable without ajax. Do you know of any where I can make my own fake repo of JSON data to use as an example?

kthorngren

Do you mean like this example from your other thread?

If you don't ant to use row.add() you can add the data using data.

Kevin

zgoforth

@kthorngren facepalm exactly. Thank you...

zgoforth

@kthorngren https://jsfiddle.net/msbgh0yu/

Here is updated working Fiddle. Is it possible to organize like I mentioned at the bottom of my OP