create custom render for dom data

create custom render for dom data

TeroaTeroa Posts: 9Questions: 3Answers: 0
edited August 2017 in Free community support

Currently I'm using another plugin for displaying tables on my site.
I want to replace it with data tables. Everything is updated, but there is on thing left.

I'm creating a table like that:

<table id="data-table-command" class="table table-command table-striped table-bordered display" cellspacing="0" width="100%">  
  <thead>  
  <tr>  
    <th data-column-id="id" data-visible="false" data-type="numeric">ID</th>                       
    <th data-column-id="name" data-order="asc">Name</th>
    <th data-column-id="icon" data-type="icon">Icon</th>
    <th data-column-id="commands" data-sortable="false">Options</th>
  </tr>
  </thead>
  <tbody>
  <% @datax.each do |data| %>
      <tr>
        <td><%= data.id %></td>
        <td><%= data.name %></td>
        <td><%= data.icon %></td>
        <td><%= link_to 'Edit' edit_datax_path(data.id) %></td>
     </tr>
  <% end %>
  </tbody>
</table>

Is there a posibility to update the icon-column with a custom render?
I want to return a html tag. Is it possoble to update data with client-side rendering?

like

icon:{
  from: function (value) { return (value); },
  to: function (value) { return ("<i class='fa fa-fw "+value.trim().toLowerCase()+"'></i>"); }
}

I'm creating the datatable currently with no options

$(".table-command").each(function () {
   $(this).DataTable()
})

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,309Questions: 26Answers: 4,947
    edited August 2017

    columns.render should do what you want.

    Kevin

  • TeroaTeroa Posts: 9Questions: 3Answers: 0

    @kthorngren Thank you I've alerad read the render option.
    But therefor I need to know on which position this data is located.

    I've got serveral tables where I'm using an icon. And it's on diferent positions.
    This was also one example. I need about 6 different modifying functions.
    There are about 60 tables on my page, so I don't want to define each table manually.

  • kthorngrenkthorngren Posts: 21,309Questions: 26Answers: 4,947
    edited August 2017

    You can use columnDefs for your render function. You will use columnDefs.targets to define which columns to apply the render function. I'm not sure how you are determining which column has the icon but you can build the columnDefs options outside of Datatables, assign it to a variable then in the Datatables init assign the variable to the columnDefs option.

    If this suggestion doesn't work for you maybe others can provide alternatives.

    Kevin

  • TeroaTeroa Posts: 9Questions: 3Answers: 0

    I cannot follow how this works. I'm little bit confused. I'm will not be the first one, who has a similar issue :'(

  • kthorngrenkthorngren Posts: 21,309Questions: 26Answers: 4,947
    Answer ✓

    Here is a quick example:
    http://live.datatables.net/banigoba/1/edit

    I'm not sure how your code is structured nor how you know which column contains the icon. So this example assumes column 0 is the column to render and it just renders a link. Assigns to a variable that can then be used in the Datatables init function.

    Kevin

This discussion has been closed.