1

How can I format my table header on jQuery Bootgrid?

When I initialize the table with Bootgrid function, the multiple header is formated wrong. The following example shows you what I want:

<div class="table-responsive">
    <table id="grid-table" class="table table-condensed table-hover table-striped table-bordered">
        <thead>
            <tr>
                <th data-column-id="col1"   rowspan="2" > Col1  </th>
                <th data-column-id="col2"   rowspan="2" > Col2  </th>
                <th data-column-id="col3"   rowspan="2" > Col3  </th>
                <th data-column-id="col4"   rowspan="2" > Col4  </th>
                <th data-column-id="span1"  colspan="2" > Span1 </th>
                <th data-column-id="span2"  colspan="2" > Span2 </th>
            </tr>
            <tr>
                <th data-column-id="col5"   > Col5  </th>
                <th data-column-id="col6"   > Col6  </th>
                <th data-column-id="col7"   > Col7  </th>
                <th data-column-id="col8"   > Col8  </th>
            </tr>                             
        </thead>

        <tbody>
        </tbody>
    </table>
</div>

And this is the result when I don't initialize Bootgrid.

enter image description here

But when I do, I get this:

enter image description here

So how is it possible to handle multiple tr in a thead with setting rowspan or colspan?

Alex
  • 230
  • 1
  • 2
  • 19

1 Answers1

0

for the addition of colspan maybe it can be added after the bootgrid is initialized

$('#grid-table').on("initialized.rs.jquery.bootgrid", function () {
  $('#grid-table thead').prepend(`<tr> <th colspan="2">col1</th></tr>`);
});
gerbang impian
  • 11
  • 1