Unable to get createdCell to manipulate css on DataTables 2.0.0

Unable to get createdCell to manipulate css on DataTables 2.0.0

henrik khenrik k Posts: 6Questions: 2Answers: 0
edited February 18 in Free community support

In previous versions on Datatables the following code set the background color to red on all cells. But on DataTables v2 the cells stays white. I don't get any error message, where to search for a change in the background code to get the css manipulation with createdCell to work again?

(The example is a much simplified version, usually we need to set individual cell colors for larger tables with several rows and columns)

<html>
<head>
    <script type="text/javascript" src="../lib/jquery/jquery-3.7.1.min.js"></script>

<!--
    <link rel="stylesheet" href="../lib/DataTables/datatables.css">
    <script type="text/javascript" src="../lib/DataTables/datatables.js"></script>
-->

<link rel="stylesheet" href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.css" />  
<script src="https://cdn.datatables.net/2.0.0/js/dataTables.js"></script>


    <script>
    
    tableData = {
        columns : 
        [
            {
                "data" : "DT_RowId",
                "title" : "DT_RowId",
                "visible" : false
            },
            {
                "data" : "Test",
                "title" : "Test",
                "visible" : true
            }
        ],
        data : 
        [
            {
                "DT_RowId" : 6,
                "Test" : "0"
            }
        ],
        searching: false,
        columnDefs: [
            {
                targets: '_all',
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).css('background-color', 'red');
                }
            }
        ]
    };


    $(document).ready( function () {
        $('#myTable').DataTable(tableData);
    });
    
    </script>
</head>
<body>

<table id="myTable"></table>

</body>
</html>

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949

    I built a test case for you:
    https://live.datatables.net/qinuceqe/1/edit

    I added a second table to demonstrate the working case versus your non-working case.

    It seems the problem occurs when using columns.title to create the thead and th elements. In this case columns.createdCell doesn't fire. But if the thead and ths exist then columns.createdCell fires and works.

    @allan will need to take a look.

    Kevin

  • henrik khenrik k Posts: 6Questions: 2Answers: 0

    Thanks for super quick answer and helping setting up the test case. Looking forward for more answers to the underlying cause or a stable solution.

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    Many thanks for reporting this @henrik k and Kevin for the test case! It certainly does look like a bug. I'll dig into it and report back (if not tomorrow, then Tuesday).

    Allan

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    It was the _all target on a table with no HTML columns that was causing the issue. I've committed a fix (and tests) to address this.

    The fix will be in 2.0.1 which I'll drop in the next few days.

    Thanks again for flagging this up and also Kevin for the investigation.

    Regards,
    Allan

Sign In or Register to comment.