Datatables colspan header

Question

I have table like this

<table id="tbl_orderstatus" class="dataTable table table-bordered table-hover table-full-width nowrap" width="150%" data-table="tblorderstatus">
    <thead>
        <tr>
            <th>Buyer</th>
            <th>Season</th>
            <th>Style#</th>
            <th>KP#</th>
            <th>Item Description</th>
            <th>Buyer PO</th>
            <th colspan="2">Qty</th>
            <th>Material</th>
            <th>Destination</th>
            <th>Delivery Date</th>
        </tr>
    </thead>
</table>

But my problem is, i just put <th colspan="2">Qty</th> thats make error, it said uncaught style undifined. How do i make clospan like that? Cause i need put 2 data column on Qty.

tq for answer, i bet i must use two row on header. tQ guys :)

Try following **[this example](https://datatables.net/examples/basic_init/complex_header.html)** — Guruprasad J Rao, Nov 15 '16 at 07:33
@GuruprasadRao : Sorry for my bad languange, i use that code from example u gave. But my problem is i dont need mor 2 row on header, i just need 1 row on header. Thats my problem — Wolfzmus, Nov 15 '16 at 07:50
jQuery DataTables **requires** at least one column in the header for each column in the body, this is why all answers contain two rows if you want to display two data columns for Qty. — Gyrocode.com, Nov 15 '16 at 15:25
@Gyrocode.com Oww.. okay so i cant do it on one row. Okay tq then :D — Wolfzmus, Nov 16 '16 at 03:52

Mārtiņš Radiņš · Answer 1 · 2017-05-19T06:51:09.537

This is an old thread but still - I 'd like to share what I came up with at my own project. I needed basically the same thing - I wanted to span a header over 3 columns without beefing it up, keeping it in one row.

You saw the error because jQuery DataTables wants a single column for every field to assign handlers or whatever. We can get rid of the error by adding another header row with as many header columns as you wanted to span over. In my case, I added 3 header columns.

Now, the error is gone but the header looks horrendous. Looks unnecessary but set all the other top row header columns to span over 2 rows (rowspan). And now, the "magic" - as our 2nd row header columns don't contain any information whatsoever, just hide them!

$(document).ready(function() {
    $('#example').DataTable();
});

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display" cellspacing="0" width="100%" style="text-align: center;">
    <thead>
        <tr>
            <th rowspan="2">One</th>
            <th colspan="2">Two and Three</th>
            <th rowspan="2">Four</th>
            <th rowspan="2">Five</th>
        </tr>
        <tr style="display:none">
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> First data </td>
            <td> Second data </td>
            <td> Third data </td>
            <td> Fourth data </td>
            <td> Fifth data </td>
        </tr>
    </tbody>
</table>

Voila. This was the cleanest workaround I could produce, but it'll do.

This works but the only issue is you will not get the column sorting capabilities for any of those hidden columns. — Jason Roman, Nov 13 '18 at 18:08

score 1 · Answer 2 · edited Jan 30 '23 at 21:02

I tested, it is running. Maybe you forget add one <td></td>.

<table id="tbl_orderstatus" class="dataTable table table-bordered table-hover table-full-width nowrap" width="150%" data-table="tblorderstatus">
    <thead>
        <tr>
            <th>Buyer</th>
            <th>Season</th>
            <th>Style#</th>
            <th>KP#</th>
            <th>Item Description</th>
            <th>Buyer PO</th>
            <th colspan="2">Qty</th>
            <th>Material</th>
            <th>Destination</th>
            <th>Delivery Date</th>
        </tr>
    </thead>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test 1</td>
        <td>Test 2</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
</table>

score 1 · Answer 3 · answered Nov 15 '16 at 07:40

You need to put a title for each row, so your header should be like that:

               <thead>
                    <tr>
                        <th rowspan="2">Buyer</th>
                        <th rowspan="2">Season</th>
                        <th rowspan="2">Style#</th>
                        <th rowspan="2">KP#</th>
                        <th rowspan="2">Item Description</th>
                        <th rowspan="2">Buyer PO</th>
                        <th colspan="2">Qty</th>
                        <th rowspan="2">Material</th>
                        <th rowspan="2">Destination</th>
                        <th rowspan="2">Delivery Date</th>
                    </tr>
                    <tr>
                        <th>Qty 1</th>
                        <th>Qty 2</th>
                    </tr>
                </thead>

            </table>

My problem is i dont need more row on header. How do i did that?? :/ — Wolfzmus, Nov 15 '16 at 07:52

Datatables colspan header

3 Answers3