use HTML5 data-* atribute in init columns and fields

e.jourde

Hello, I want to integrate translation data on my column headers dynamically. The principle is simple, a trad class and a "tag" attribute for the translation identifier, and a "traddef" attribute for the default display. When I change the language, I retrieve this data by JS and modify the content by translation. But I don't know how to do it in column definition. The examples provided, show an html already written, I want it in the initialization.

table_family = $('#bfamily').DataTable( {
     language: {
         "url": "languages/"+_LANGUE_+".json"
     },
        dom: 'Bfrtip',
        ajax:{
            url:'php/table.bfamily.php',
            type:'post',
            data: function ( d ) {
                d.langue=_LANGUE_;
            }
        },
        scrollY:        "65vh",
        scrollCollapse: true,
        paging:         false,
        columns: [
            
            {
                title:"id",
                data: "id_familytree",
                readonly:true,
                
            },
            {
                title:"Name of family",
                data: "lib",
                className:"trad",
/**************************************************************/
i try with :
            -   'data-tag:"IHM-family" data-traddef:"Family"'

                         -       'data-tag="IHM-family" data-traddef="Family"'

                         -       "data-tag":"IHM-family",
                                "data-traddef":"Family"'
/****************************************************************/
            }
            
        ],
        select: {
            style: 'single'
            },
        lengthChange: false,
    
         autoFill: {
             editor_family:  editor_family
         },
         buttons: [
                   { extend: 'create', editor: editor_family},
                   { extend: 'edit',   editor: editor_family },
                   { extend: 'remove', editor: editor_family }
               ]
    } );

kthorngren

I'm not sure what you are trying to do. Sounds like you want to have Datatables assign those HTML5 data attributes. I don't believe there is a configuration option to do this. You will need to use Javascript or jQuery methods to apply the data attributes.

Kevin

e.jourde

it's a bad news (like Moon Martin ) thanks

allan

You could use columns.createdCell to add data attributes to the cells.

You'd need to make sure that whatever you were using to interpret those attributes though would run after the table is drawn - but if I'm understanding correctly, that would change the value of the cell?

Normally with translation of cell data you'd use a renderer with a function that will do the lookup:

render: function (data) {
  return i18n(data);
}

Allan

e.jourde

Thank you very much Allan. I found another way thinking it was impossible, but I will look at this. I have another question. Is it possible to reload all the existing datatables in a single command? I would like the change of language of the datatable to be done without reloading the page, and that the displayed data is also reloaded (the data is itself translated)