How can I split rows to form a list divs?

katut

I am using using Datatables to create a list of <divs> with a particular structure (already done). As expected the rows are tightly coupled I would like to have them seperated to have something like the following image. The rectangles will the individual rows of the table. So how can I split the rows?

allan

Can you show me the markup you are creating please? I'm afraid I don't fully understand the question at the moment since DataTables is a table plug-in. Are your divs inside a table cell?

Allan

katut

Yes. Here is the semplified code (I am using Twig as the templating engine):

<table id="games-table" class="cell-border hover stripe">
                <thead>
                <tr>
                    <td><h3>Game Name</h3></td>
                </tr>
                </thead>
                
                <tbody>
                {% for game in gamess %}
                    <div class="container">
                        <tr>
                            <td>
                                <div class="row">
                                   <div class="col-xs-8">
                                        <div class="row">
                                            <h3>{{ game.place.name }}</h3>
                                        </div>
                                        <br>
                                        <div class="row">
                                            <span class="text-muted">{{ game.description|length > 200 ?
                                                     game.description|slice(0, 200) ~ '...' : game.description  }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </div>
                {% endfor %}
                </tbody>
            </table>

I then call Datatables on top of the table, here is JS code:

$('#games-table').DataTable({
        bInfo: false,
        language: {
            paginate: {
                next: '<i class="glyphicon glyphicon-triangle-right"></i>',
                previous: '<i class="glyphicon glyphicon-triangle-left"></i>'
            }
        },
        bLengthChange: false,
        searching: false
    });

With the above code I get a one column table with individual cells containing my modified div. Something like this

What I would like to get is this:

allan

What you've shown above is not valid HTML and is not something DataTables would accept. It expects only valid HTML.

Try moving the <div class="container"> inside the td.

Beyond that, I would suggest you try getting it working in a plain HTML table without DataTables and then enable DataTables on it.

Allan