6

I'm using the following code to initialize jQuery DataTables:

var oTable = $('#qpidvulh_to-do_list').dataTable( {
    "columns": [
        {
            "data": "item",
            "className": "editable"
        }
    ]
} )

The issue with this code is that it adds the editable class to the th of each column, even though I only want it added to the td of each column.

How can I get the code to only add the editable class to the cells of each column and not their headers?

8 Answers 8

6

Thanks to mainguy and markpsmith for posting their answers. I'll throw my own solution into the mix, but I'd still like to see what everyone thinks the best performing solution would be:

$('#qpidvulh_to-do_list thead th').removeClass('editable');

3

Use this to add the class to the cell, 100% working solution, make sure the you give the correct target number while adding the class, here createdCell function adds class to the targeted cell,

var oTable  = $('#<?php echo $module; ?>').DataTable({
                  columnDefs: [{"orderable": true, "targets": 1,
                        'createdCell':  function (td, cellData, rowData, row, col) {
                           $(td).addClass('myclass');
                           // $(td).parent('tr').attr('data-id', rowData[0]); // adds the data attribute to the parent this cell row
                        }
                  }]
    });
1

Why not simply use jquery?

$("td").addClass('editable');

Look here

Update: On second thought: It would be better to put this jquery snippet in the draw event of dataTables so it works too when pagination changes and the table is redrawn.

1

I had this problem but the suggested solution didn't really work for me because I am applying different types of inputs (number, text) selectively to cells in multiple tables. I have an onclick event for the cell to convert it into an editable box. I changed where it is called from

table.on('click', '.edit-text', function() {
    // yadda yadda;
}

to

table.on('click', 'td.edit-text', function() {
    // yadda yadda;
}

In this way the function ignores the 'th' cells with that class.

EDIT:
A second way I have found is to use the createdCell option in the columns definition:

columns: [
    {
        data: 'property_name',
        createdCell: cell => $(cell).addClass('some-class')
    }
]
0

You can use fnRowCallback for this:

var oTable = $('#qpidvulh_to-do_list').dataTable( {
    "columns": [
        {
            "data": "item"
        }
    ],
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $(nRow).children().each(function (index, td) {
            $(this).addClass('editable');
        });
     }
0
"aoColumns":[null,{sClass:'editable'},null,null,{ "sClass": 'my_class other_class' }]
1
  • This unfortunately adds the classes to both the cells and the headers.
    – nonzaprej
    Commented Sep 5, 2018 at 10:06
0

In my table I put the editable in the draw callback like this:

$('#table td.editable-class').editable();

and in the column defs I gave the editable cells a class. Here's an example:

var table = $('#blocks').dataTable({
  ajax: {
    url: ...
  },
  columns: [
    { data: "column_data",    "name": "column1",   visible: false },
    { data: "editable_column", class: "editable another-class" }
   ],
  "drawCallback": function ( settings ) {

    $('#table td.editable').editable();
  }
});

Hope that helps.

0

The best way will be using CSS.

Just set the CSS class selector to affect the 'td' and not the 'th'.

Try this code:

td.editable {
    color: red; /*Or some other attribute*/
}

Important: With this solution the 'th' element will still have the 'editable' class set, but it wont be affected by the CSS styling.

If you still need to remove the class on the 'th' element try this:

$('#qpidvulh_to-do_list th').removeClass('editable');

/* ADDITIONAL INFO */

If you need more info about CSS selectors, try this page: https://www.w3schools.com/cssref/css_selectors.asp

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.