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

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

TinkerBugTinkerBug Posts: 6Questions: 1Answers: 0

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();
  }
}

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • TinkerBugTinkerBug Posts: 6Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    Answer ✓

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

    Kevin

  • TinkerBugTinkerBug Posts: 6Questions: 1Answers: 0
    edited 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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • TinkerBugTinkerBug Posts: 6Questions: 1Answers: 0
    edited 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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • TinkerBugTinkerBug Posts: 6Questions: 1Answers: 0
    edited 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 = {
            ...
    
  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited February 2022

    It does seem to work, Learn something new everyday!

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

    Kevin

  • TinkerBugTinkerBug Posts: 6Questions: 1Answers: 0
    edited 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>
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

Sign In or Register to comment.