Action Template custom render question

getalex

I'm trying to add a few action buttons to each row, so users can do something with a result row.
My first approach was to pass the row to a helper method : getRowActions as shown below, then I'd be able to read row data and determine what action to add. I've simplified the example below but basically I find myself building the click event passing the item ID, then in the function I have to find that item ID all over again. I wonder if there's a better way to just handle the button click and get the row data all in one stop, but I couldn't quite figure out the selector/datatables syntax to get the row data for which the button is clicked …

var table = $('#example').DataTable({
    data: data,
    columns: [
      { 
        data: null, orderable: false, searchable: false, title: 'Action',
            render: function (data, type, row) {
                return getRowActions(row);
            }
      },
      {data:'Id', title: 'id' },
      {data:'name', title: 'Name'},
      {data:'position', title: 'Position'},
      {data:'office', title: 'Office'},
      {data:'age', title: 'Age'},
      {data:'start_date', visible: false},
      {data:'salary', visible: false}      
    ]
  });

function getRowActions(row) {
   // row.Id for example would be unique to then pass an on click event to, then try to find the item by ID all over again.
   return '<button type="button" onclick="dosomething(' + row.Id + ')" class="btn btn-sm btn-default"><i class="glyphicon glyphicon-ok">Add</i></button>';
 }

Live Link: http://live.datatables.net/hojalahe/1/edit?js,output

allan

My personal preference is to avoid DOM0 event handlers. They aren't particularly flexible. Instead I would use a jQuery delegated event handler: http://live.datatables.net/hojalahe/2/edit .

Allan

getalex

Thank you for your time, sir. I'll take that approach.

getalex

I used "render" because I need to have business logic on what buttons to show in each row - for example, in the live demo I have an add button, which would need to be a remove button under certain row conditions - for example a status field would determine approve or reject etc. so is there a way to do this with 'defaultContent' as you posted? is there an alternative to render?

allan

columns.defaultContent is useful when you want just the same HTML in each cell for that column. If you need different HTML, then columns.render is the right way to do it.

Allan

getalex

Thank's Allan, the main concern I see and am reading on other posts is how much 'render' gets called - up to 3x the row count. I am placing an "if type === display" check before the cell logic is executed which seems to help but hard to improve beyond that, unless you have any examples or recommendations.
it has been great to hear from you and get help on these questions. Thank you!

kthorngren

You can try deferRender to see if it helps improve the speed.

Kevin

allan

he main concern I see and am reading on other posts is how much 'render' gets called - up to 3x the row count

That is correct. Whenever DataTables needs data about a cell it will call the rendering function (either internally or externally depending on your configuration).

The rendering function should be made as fast as possible (i.e. don't use async code in it). If you are having performance issues with it, please link to a test case showing the issue.

Allan