“Complex Header” not responsive in current DataTables.net build?

问题

DataTables allows you to create "complex headers" (which entails spanning multiple columns or rows). The Responsive plugin is compatible with this if you add some extra CSS as per the documentation.

Here is a working fiddle: https://jsfiddle.net/hmr9qtx3/1/

As you can see, resizing the rendered output frame correctly removes the <th> tags from the row. This is with versions 1.10.1 of DataTables and 1.0.0 of Responsive.

The most current DataTables build is 1.10.12, and the version of Responsive it comes packaged with is 2.1.0. Here is an identical fiddle with those versions swapped out: https://jsfiddle.net/hmr9qtx3/

Between the working and non-working version numbers, usage of datatables and the responsive plugin is identical.

You will notice that the responsive plugin functions correctly for the non-spanning table headers and the body of the table. However, the spanning headers are not removed from the DOM when the page is resized enough that they would add a scrollbar/overflow.

How can I fix or patch my code so the spanning headers are responsive like in the working fiddle? I'd prefer to not use older versions of the plugins.

回答1:

Complex headers are not supported with Responsive plug-in 2.0, see this thread or this issue #59.

As a workaround you can continue using Responsive plugin 1.0 with the most recent version of jQuery DataTables.

Per author's post:

Unfortunately yes, this is a limitation in Responsive 2.0. (...) The plan is to resolve it for 2.1. (...) The only option at the moment is to roll back to Responsive 1.x I'm afraid.

Although you're using v2.1.0, maybe it wasn't yet added because issue #59 on GitHub remains open.

回答2:

I created a hot fix on the fly for this issue for the responsive plugin.

Issue: (last column disappears)

DataTables 1.10.13
hot-fix → datatables.responsive v2.1.1

Adds responsive support to datatables.net Complex Headers

This hot-fix works perfectly well on my page where I have different types of datatables, but nevertheless, be careful with this patch as it is not tested with all possible dt features/types.

Here is a working demo: jsBin-Demo

_setColumnVis: function (col, showHide) {
    var dt = this.s.dt;
    var display = showHide ? '' : 'none'; // empty string will remove the attr

    $(dt.column(col).header()).css('display', display);
    $(dt.column(col).footer()).css('display', display);
    dt.column(col).nodes().to$().css('display', display);

    var parentrow = $(dt.column(col).header()).parent().prev("tr");

    var visibleSiblingCount = $(dt.column(col).header()).siblings("th").filter(function (idx, el) {
        return $(el).is(":visible");
    }).length;

    if (parentrow.length > 0 && visibleSiblingCount != 1) {

        if (parentrow.find("th:nth-child(" + col + ")").attr("rowspan") == 1) {
            parentrow.find("th:nth-child(" + col + ")").css('display', display);
        } else {
            parentrow.find("th:nth-child(" + (col + 1) + ")").css('display', display);
        }
    }
},

回答3:

A clean solution which works well is to add a duplicate, empty row of zero-height columns before the complex header row, followed by the actual row of columns.

<thead>
    <tr><th></th><th></th><th></th></tr>
    <tr><th colspan="2">Complex!</th><th>yeah</th></tr>
    <tr><th>One</th><th>Two</th><th>Three</th></tr>
</thead>

This is because FixedHeader targets the first row it finds in thead for sizing. If you size the dummy row correctly, all the others will follow.

I prefer this solution before there is an official fix because it doesn't require us to maintain a patched version of FixedHeader, and when an official fix is released would degrade gracefully and be removable at our leisure.

回答4:

This function counts the number of visible columns. Then loops through the headers to make them match. I hope this helps as a patch for someone until Responsive is updated. You will have to put this inside of a document load and window resize function.

function makeColumnsResponsive() {
    const visibleColumnCount = $('tbody tr:first-child td:visible').length - 1;
    $('thead tr th').show();
    for (let i = 1; i <= $('thead tr').length; i++) {
        $('thead tr:nth-child(' + i + ') th:gt(' + visibleColumnCount + ')').hide();
    }
}

来源：https://stackoverflow.com/questions/39752855/complex-header-not-responsive-in-current-datatables-net-build

标签

javascript

jquery

datatables

responsive