I Want to make Complex headers like this...

kwakjeongsu

I Want to make Complex headers like this...

I want to change picture1 to picture2.

I'm looking for this example, but don't look that.

https://datatables.net/examples/basic_init/complex_header.html

it's similar example. but diffrent.

I want to change in a row header to 2 row headers.

anyone know that example or hint.
plz help.
thanks.

my CODE is this

$('#dataTables1').DataTable({
pageLength: 10,
bPaginate: true,
bLengthChange: true,
lengthMenu : [ [ 10, 30, 50, -1 ], [ 10, 30, 50, "All" ] ],
bAutoWidth: false,
processing: true,
ordering: true,
serverSide: false,
searching: true,
fixedColumns:true,
"order" : [[0, "desc"]],
dom: 'Bfrtip',
buttons: [
'excelHtml5',
'colvis'
],
ajax : {
"url":"URL",
"type":"POST",

                 }columns : [
                     {data: "picture"},    //0
                     {data: "value1"},    //1
                     {data: "value2"},    //2
                     {data: "value3"},    //3
                     {data: "value4"},    //4
                     {data: "value5"},    //5
                     {data: "value6"},    //6

                 ]


             });

kwakjeongsu

sorry. I upload wrong picture. picture2 is this

allan

The example shows how to do that. Click the "HTML" tab below the table and you will see the table is made up like this:

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th rowspan="2">Name</th>
                <th colspan="2">HR Information</th>
                <th colspan="3">Contact</th>
            </tr>
            <tr>
                <th>Position</th>
                <th>Salary</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>

Allan

kwakjeongsu

How can I? this example is different.
that example don't sort HR Information, Contact.
I'm trying to do everything. but don't do that.
give a hint to me.

allan

that example don't sort HR Information, Contact.

No it doesn't. But it will sort by the sub-column headings.

DataTables doesn't currently have a feature to allow colspan row headings to sort multiple columns. You could do it manually using order() and your own click listener, but it isn't something built into DataTables.

Allan