How do I set two dynamic header rows in jquery datatable?

Question

How do I set two dynamic header rows in jquery datatable ??

    function updateTable(params) {
    $.getJSON(
    window.location.pathname,
    params,
    function(result) {
        // Set table title
        $('#title_box').text(result.title);

        // Set table headers
        var column_titles = result.column_titles1.map(function(header) {
            return {
                'title': header
            };
        });

        // Let datatables render the rest.
        $('#datatable').dataTable({
            "ordering": false,
            "searching": false,
            "paging": false,
            "info": false,
            "columns": column_titles,
            "data": table.data
        });
    }
);}}

with this I was able to set only one dynamic header. I need to set two header rows from the data that I return from ajax response. I've separated the the two columns as:

    {"column_titles1":[["value1"],["value2"]], "columns_titles2": [["value1"],["value2"]]}

Isn't this what you need? datatables.net/examples/data_sources/js_array.html — Betlista
– Betlista, Commented Jul 13, 2017 at 12:12
No I need to set the table headers from my data. There are no problems getting the data for my table. — Agnelo Dsouza
– Agnelo Dsouza, Commented Jul 13, 2017 at 12:20
It's not clear to me, how you want to have table with two header rows? What is the usage for that? — Betlista
– Betlista, Commented Jul 13, 2017 at 12:27
I need to have two headers like this - datatables.net/examples/basic_init/complex_header.html — Agnelo Dsouza
– Agnelo Dsouza, Commented Jul 13, 2017 at 12:33

marc_s · Accepted Answer · 2017-07-14 09:50:24Z

2

Do this directly with jQuery. Making some assumptions here because I can't see your HTML, but assuming you have a thead on your table, find it with a jQuery selector and set the HTML to:

var header_rows = ["column_titles1", "column_titles2"].map(function(z) {
    return '<tr>' + result[z].map(function(y) {
            return '<td>' + y + '</td>';
        }).join("") + '</tr>'
}).join("");

$("#myTable thead").html(header_rows);

edited Jul 14, 2017 at 9:50

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jul 13, 2017 at 12:40

abigperson

5,3823 gold badges25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Agnelo Dsouza Over a year ago

How will column_titles1 and column_titles2 get its json value.

abigperson Over a year ago

I provided the best example answer I could based on the example you provided. Part of coding is figuring out how to apply examples to your specific use case. I have faith in you!

Collectives™ on Stack Overflow

How do I set two dynamic header rows in jquery datatable?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related