javascript - JQuery DataTable: Set colspan of column title dynamically - Stack Overflow

admin管理员组

文章数量:1387422

Unlike in the example provided by documentation, I want to make column title span dynamically.

I have generated sample data

var data = [];

for (var i = 0; i < 4; ++i) {
    for (var j = 0; j < 4; ++j) {
        var dataRow = [];
        dataRow.push ("10" + (i + 1));
        dataRow.push ("A");
        for (var k = 0; k < 8; ++k) {
            dataRow.push ("B");
            dataRow.push ("test");
        }
        data.push (dataRow);
    }
}

tried to generate header via columnDefs

var columnDefs = [
    {
        title: "title",
        targets: [0, 1]
    }
];

for (i = 0; i < 8; ++i) {
    columnDefs.push ({
        title: "data" + i,
        targets: [(i + 1) * 2, (i + 1) * 2 + 1]
    });
}

and generated table

$("#table").DataTable({
    columnDefs: columnDefs,
    data: data,
    rowsGroup: [
        0
    ],
    responsive: true,
    paging: false,
    searching: false,
    fixedHeader: true,
    fixedColumns: {
        leftColumns: 2
    },
    scrollX: true,
    scrollY: "200px",
    scrolLCollapse: true,
    info: false,
    ordering: false
});

but table duplicated title on each column assigned by targets field. Is there any way I can merge them (effectively making ths have colspan of 2)?

Demo

Unlike in the example provided by documentation, I want to make column title span dynamically.

I have generated sample data

var data = [];

for (var i = 0; i < 4; ++i) {
    for (var j = 0; j < 4; ++j) {
        var dataRow = [];
        dataRow.push ("10" + (i + 1));
        dataRow.push ("A");
        for (var k = 0; k < 8; ++k) {
            dataRow.push ("B");
            dataRow.push ("test");
        }
        data.push (dataRow);
    }
}

tried to generate header via columnDefs

var columnDefs = [
    {
        title: "title",
        targets: [0, 1]
    }
];

for (i = 0; i < 8; ++i) {
    columnDefs.push ({
        title: "data" + i,
        targets: [(i + 1) * 2, (i + 1) * 2 + 1]
    });
}

and generated table

$("#table").DataTable({
    columnDefs: columnDefs,
    data: data,
    rowsGroup: [
        0
    ],
    responsive: true,
    paging: false,
    searching: false,
    fixedHeader: true,
    fixedColumns: {
        leftColumns: 2
    },
    scrollX: true,
    scrollY: "200px",
    scrolLCollapse: true,
    info: false,
    ordering: false
});

but table duplicated title on each column assigned by targets field. Is there any way I can merge them (effectively making ths have colspan of 2)?

Demo

• javascript
• jquery
• datatables

Share Improve this question Follow asked Feb 14, 2017 at 11:22 Kudayar PirimbaevKudayar Pirimbaev 1,32022 gold badges2424 silver badges4343 bronze badges 1

• I've tried using jQuery, but it just weirds out. I was using this: $("#table thead th:first-child").attr('colspan',2); – Ryan Commented Feb 14, 2017 at 11:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +50

To make the DataTable colspan work requires a second header row, one that has a single header cell for each column.

Quote from https://datatables/examples/advanced_init/plex_header.html:

Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables can use that cell to detect the column and use it to apply ordering.

But to answer your question on how to add headers with colspan dynamically, you can do the following:

var headers = '<thead><tr><th colspan="2">Title</th><th colspan="2">1</th><th colspan="2">2</th><th colspan="2">3</th><th colspan="2">4</th><th colspan="2">5</th><th colspan="2">6</th><th colspan="2">7</th><th colspan="2">8</th></tr>';
headers += '<tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead>';

$("#table").append(headers);

$("#table").DataTable({...});

Updated demo: https://jsfiddle/pn4aLmpb/1/

To give it the correct appearance you may be able to apply a height of 0 to this second row. Note that display:none won't work as the headers will no longer align with the row data. This is because behind the scenes DataTable cleverly generates several overlapping HTML tables to simulate the effects of frozen rows, columns and headings, so there is a distinct disconnect between the column data and the column headings.

本文标签： javascriptJQuery DataTable Set colspan of column title dynamicallyStack Overflow