Data tables Templating

asifnoor

We have a requirement where we are using data tables. In my tables list, i need to show the data like this

Row1 with 4 columns.
in the same row, in the next line, i have few action links liek view more, compare, etc.

Row2 with 4 columns.
in the same row, in the next line, i have few action links liek view more, compare, etc.

On click of view more, i am using the functionality "Child rows (show extra / detailed information)". But i am not able to find how to add content in the next line within the same row and visible on page load.

Is there a way i can customize the templating of data table?

allan

It sounds like you are describing this example: http://datatables.net/examples/api/row_details.html .

Could you clarify what customisation of that example you want to make as i don't quite understand this part:

But i am not able to find how to add content in the next line within the same row and visible on page load.

Allan

asifnoor

Yes, the example is correct. In this example http://datatables.net/examples/api/row_details.html, there is + icon that is visible in the 1st column.

Here is my sample design
http://picpaste.com/pics/screen1_001-Sxr7QQHA.1429278131.png

In my design, instead of + icon, a link View more" will be present, but it will be in the next line. Also, some other info will be shown like compare checkbox and text with different background color and a click to action button.

I need to know how to get that additional info in the next line within the same row? If i add another TR, then my sorting will break.

allan

I see, so you just want the child row to always be shown, rather than having the user click to show it?

In which case you can use the row().child().show() method.

Allan

asifnoor

Thanks Allan for the quick response.

If you notice in my design, the child row contains "view more" link along with other info. So it is actually not a child row, but it is still part of my first row itself.

On click of View more, there will be more info that gets displayed similar to your example http://datatables.net/examples/api/row_details.html

So if we take your example, i want to know how to get that + icon in the next line and add some more info to that, without affecting the functionality.

Or can i have multiple child rows displayed? With 1st visible on page load, and remaining child rows visible on click of view more?

allan

Rows in DataTables are 100% independent of each other. You cannot have one row followed by another guaranteed. That is not something DataTables offers.

Allan