Quantcast
Channel: DataTables 1.10 — DataTables forums
Viewing all articles
Browse latest Browse all 2364

Select extension with other css style

$
0
0

Hi, I have added the select extension to my DataTable, the problem is when I have added the style attribute to my element with background color and font color. When I select/click on a row (with a style already added to the row element), the style from the select is removed so I can not see the selection. You can see here that the row with the grey color is on a row without style attribute, the row with the cyan background color is also selected but it's not shown:

This style attr is dynamicly added based on data from database. Here is part of the code:

var table = {};
                //callback function that configures and initializes DataTables
                function renderTable(data) {
                    var cols = [];
                    var Record = data[0];
                    var keys = Object.keys(Record);

                    keys.forEach(function (k) {
                        cols.push({
                            title: k,
                            data: k
                        });
                    });

                    table = $('#dynamicTableDetailChild').DataTable({
                        columns: cols,
                        order: [[0, "desc"]],
                        rowCallback: function (row, data, displayIndex) {
                            $node = this.api().row(row).nodes().to$();
                            $node.css({ color: data.CD_ForeColor, backgroundColor: data.CD_BackColor });
                        },
                        columnDefs: [
                            { visible: false, targets: [1, 2] }
                        ]
                    });

                    table.rows.add(data).draw();
                    //table.columns([1, 2]).visible(false);
                    var node0 = table.column(0).nodes();
                    $(node0).addClass('details-control');

               }

                var datacall = $.ajax({
                    type: 'GET',
                    url: '/api/getDynamicMainContent/get/',
                    data: { 'procedure': '@subMenu.subProcedure', 'index': index }
                });

                //promise syntax to render after xhr completes
                datacall.done(renderTable);

Viewing all articles
Browse latest Browse all 2364

Trending Articles