Multiple rows in the same line? multiple td in the same tr?

asyba

Hi
Having one image on one cell side by side, for example 5 cell each one with an image in one row, then in the below row the same an so on.

Is possible to do something like this and how?

check example image and html code:
Note: none thead is needed.

https://ibb.co/LzwJs8y

kthorngren

Yes, Datatables can display images or any valid HTML within the cells. For HTML generated tables make sure the HTML tables are built before initializing Datatables. If using Ajax or Javascript data source then you may nee to use columns.render, like this example.

Multiple rows in the same line?

Datatables doesn't support colspan or rowspan within the tbody if that is what you are asking. See the HTML requirements doc for details. But the screenshots same to show that each image and associated text are within one cell which is supported.

Here is a simple example:
https://live.datatables.net/kahojolo/1/edit

Kevin

asyba

Kevin
so basically I have to build my own html code with render?
how I could for example iterate the ajax data for example the first 5 elements put each in one td in the same tr, then do the same below for the next 5 and so on.

the example https://live.datatables.net/kahojolo/1/edit
helps but the data is hardcoded in my case it comes from Ajax in a json objects, each element represent one image information.

kthorngren

so basically I have to build my own html code with render?

No. You can fetch the data via Ajax.

how I could for example iterate the ajax data for example the first 5 elements put each in one td in the same tr, then do the same below for the next 5 and so on.

Your row data can be an array of cells or the cells can be objects. See the Data source types docs. Here is an example showing one row of data:
https://live.datatables.net/yireloba/1/edit

The data in the first two columns contains the img tag and URL. The last two column's data has only the URL and uses columns.render to render the img tag.

How you need to code this depends on your source data. If you want to provide a sample of your data we can help with the code to display.

You might also be interested in displaying the images in a card view. See this example from this thread. Click the button above the Photo column to change to card view. Each row contains one image with the text in different columns. The card view is similar to the screenshot in your above link.

Kevin