Set column render in events (preInit.dt, init.dt)

TinkerBug · February 2022

Is there a way to set the column render in some events?
I tried in preInit with this but the render is not used

var columns = $(e.target).DataTable().settings().init().columns;
for (var i = 0; i < columns.length; i++) {
  if (columns[i].render === undefined) {
      columns[i].render = $.fn.dataTable.render.text();
  }
}

kthorngren · February 2022

columns.render runs as needed for rendering the column data for sorting, searching and display. It is only configured in the columns or columnDefs options.

What are you trying to do?

Kevin

TinkerBug · February 2022

To avoid Cross-Site Scripting I'm trying to set a default renderer ($.fn.dataTable.render.text) instead of changing options to all the tables.

kthorngren · February 2022

Have you seen the setting default options docs? Maybe that will work for you.

Kevin

TinkerBug · February 2022

Yes, I have other defaults set in that way but I cannot see any default render option.

I tried with

$.extend(true, $.fn.dataTable.defaults, {
    ...
    "columns":
    {
        "render": $.fn.dataTable.render.text()
    }
});

but it dosen't seem to work

kthorngren · February 2022

Try using columnDefs instead with the columnDefs.targets set to the appropriate columns. Read the Conflict resolution section to learn which options take priority for overlapping options.

Kevin

TinkerBug · February 2022

Got it.
It's column.render, not columns.render

https://datatables.net/reference/option/columns.render

$.extend(true, $.fn.dataTable.defaults, {
    ...
    "column":
    {
        "render": $.fn.dataTable.render.text()
    }
});

Many thanks for your help

kthorngren · February 2022

It's column.render, not columns.render

No, there is no option column. Its not doing anything for you as its not being applied. Use columnDefs.

Kevin

TinkerBug · February 2022

Strange because it works.
And in datatables source code there's this (I'm using version 1.10.18)

    /**
     * Column options that can be given to DataTables at initialisation time.
     *  @namespace
     */
    DataTable.defaults.column = {
        ...

kthorngren · February 2022

It does seem to work, Learn something new everyday!

Maybe its an undocumented feature @colin or @allan is using column a documented somewhere for default options? If not it should be - seems very useful.

Kevin

TinkerBug · February 2022

BTW also this works

  $.extend(true, $.fn.dataTable.defaults, {
    "columnDefs": [
      { "targets": '_all', "render": $.fn.dataTable.render.text() }
    ]
  });

Example

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Datatables</title>

  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
 </head>
 <body>
    <table id="example" class="display" width="100%"></table>
 </body>

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>

 <script>
$(document).ready(function() {
  $.extend(true, $.fn.dataTable.defaults, {
    "columnDefs": [
      { "targets": '_all', "render": $.fn.dataTable.render.text() }
    ]
  });
  var dataSet = [
      [ "Tiger Nixon<input />", "System Architect", "Edinburgh", "5421", "2011/04/25", "320,800" ],
      [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "170,750" ]
   ];
  $('#example').DataTable( {
          data: dataSet,
          columns: [
              { title: "Name" },
              { title: "Position" },
              { title: "Office" },
              { title: "Extn." },
              { title: "Start date" },
              { 
                title: "Salary", 
                render: function ( data, type, row ) {
                  return '$'+ data;
                } 
              }
          ]
      } );
} );
 </script>
</html>

colin · February 2022

columnDefs would be the way to go, that's officially supported and documented, the other option is probably something that really shouldn't be there and may get removed in the future,

Colin

Set column render in events (preInit.dt, init.dt)

Set column render in events (preInit.dt, init.dt)

Answers

Howdy, Stranger!

Categories

DataTables

Set column render in events (preInit.dt, init.dt)

Set column render in events (preInit.dt, init.dt)

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables