Colspan with ajax data source

Colspan with ajax data source

dataforcedataforce Posts: 2Questions: 1Answers: 0

Im looking for an example on how to implement a colspan with an ajax data source.

For example, if I want one of the header columns to span 2 of the data columns how would I do this?

I assume column definition would look like this?

columns:[
{name:"Column 1", data:"col1data"},
{name:"Column 2", data:"??what goes here??", colspan:2},
]

And i assume data definition would look like this?

data:[
{col1data:"A1", col2data:"B1", col3data:"C1"},
{col1data:"A2", col2data:"B2", col3data:"C2"},
]

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @dataforce ,

    You can't use colspan in the table body I'm afraid, it's not supported - see here.

    Cheers,

    Colin

  • dataforcedataforce Posts: 2Questions: 1Answers: 0

    Hi Colin thanks for the response
    I actually want to have the colspan in the header not the table body.
    I need to do something similar to the link you posted however that only shows the HTML version and not the Ajax data source version. how would you create a table the same as in that example but using an Ajax data source

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    You will need to build the columns array before initializing Datatables. This example show how to use jQuery Ajax() to retrieve the table data and build the columns. The example uses the data objects returned to build the column names although your returned ajax can have a specific object with the column names. The key is to use columns.title to build the headers.

    After all that I realized that you want complex headers. Datatables isn't going to do that. It will build the header row it needs but you are responsible for building the header with the colspan and rowspan. So columns.title won't be useful. You will be interested in this example` but you will be responsible for building the complex header. Maybe my above example will give you some ideas.

    Kevin

This discussion has been closed.