Adding custom colored rows to the top of the table, breaks responsive view

shane805

Hello all,

I'm trying to add some rows at the top of my table, after any sorting, filtering, or searching has been done. It's working fine, except the rows do not adjust responsively like the rest of the table after they are moved to the top.

What I'm doing right now is inserting the rows after the table has built, and then after it is drawn, moving them to the top. They work fine responsively before I move them to the top.

Any help would be greatly appreciated. Below is my JavaScript code.

app.data.catch_highlights = {
    'headers': [
        [
            "Total (not column total)",
            321, 3, 5, 3, 3, 0, 0, 2, 4, 0
        ],
        [
            "Sample Date",
            "10/22 - 10/28",
            "10/22 - 10/28",
            "10/22 - 10/28",
            "10/22 - 10/28",
            "10/22 - 10/28",
            "10/22 - 10/28",
            "10/22 - 10/28",
            "10/22 - 10/28",
            "10/22 - 10/28",
            "10/22 - 10/28"
        ]
    ],
    'data': [
        [
            "1",
            1, 0, 1, 1, 1, 0, 0, 0, 0, 0
        ],
        [
            "2",
            0, 0, 0, 2, 1, 0, 0, 1, 0, 0
        ],
        [
            "3",
            2, 0, 0, 0, 0, 0, 2, 0, 0, 0
        ],
        [
            "4",
            2, 0, 2, 3, 0, 0, 0, 0, 0, 0
        ],
        [
            "5",
            1, 0, 0, 0, 0, 1, 0, 0, 1, 1
        ],
        [
            "6",
            1, 0, 0, 0, 0, 0, 0, 0, 1, 0
        ],
        [
            "7",
            0, 1, 0, 0, 2, 0, 0, 0, 1, 0
        ],
        [
            "8",
            0, 0, 4, 2, 0, 0, 1, 1, 0, 0
        ],
        [
            "9",
            1, 0, 0, 0, 0, 0, 0, 0, 0, 1
        ],
        [
            "10",
            2, 1, 0, 1, 0, 0, 0, 0, 0, 1
        ]
    ]
};


var table = jQuery('#catch-highlights-table')
               .on("init.dt", function (e, settings) {

// setup access to api
        var api = new $.fn.dataTable.Api(settings);

        // background color array, TODO: use colors from app.ui.theme
        var background_colors = [
            ['#3C668C'], ['#CBDFF6'], ['#f4911e']
        ];
        // same as above
        var font_colors = [
            ['#FFF'], ['#333'], ['#000']
        ];

        // could probably remove this in the future
        var len = dataArray.headers.length;

        // loop through all of the headers, add them to the table, and apply colors
        for (var i = 0; i < len; i++) {

            var node = api.row.add(dataArray.headers[i]).node();
            jQuery(node).css({
                backgroundColor: background_colors[len - i],
                color: font_colors[len - i]
            }).attr('id', 'header_' + [i]).addClass('header-top');
        }

        // move the table rows to the top of the table after it has been drawn
        jQuery(table).on("draw.dt", function(){
             jQuery('.header-top').each(function(){
             jQuery(this).parent().prepend(jQuery(this)[0].outerHTML);
             jQuery(this).remove();
             });
         });
        
        api.draw();
})
                .DataTable({
            "data": app.data.catch_highlights.data,
            "sDom": '',
            "pageLength": 15,
            "processing": true,
            "responsive": true,
            "search": false,
                    "bSort": false,
            "columns": [
                {"title": "1"},
                {"title": "2"},
                {"title": "3"},
                {"title": "4"},
                {"title": "5"},
                {"title": "6"},
                {"title": "7"},
                {"title": "8"},
                {"title": "9"},
                {"title": "10"},
                {"title": "11"}
            ]
    });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I think what you will need here is a custom sorting plug-in that will sort the rows to the top of the table as you require. Simply moving them in the DOM would override DataTables and thus it doesn't really know what is going on - and hence the issue.

Allan

shane805

Hey Allan,

I looked into this, but am a bit stumped. Is it possible to maintain the normal sorting functionality on all of the columns while doing this?

The table is full of columns that all need to be sort-able while keeping two rows at the top.

This seems like it would be a very useful feature for everyone.

allan

Is it possible to maintain the normal sorting functionality on all of the columns while doing this?

Only if the sorting code handled both cases. The built in code currently does not which is why I mentioned that a custom plug-in would need to be written.

Allan