Display action buttons(delete, etc) at the row end on row hover and click ?

Antriksh

I want to show some action buttons at the end of the dataTable row on hovering and clicking that row. Firstly those icons or button should not be visible. But will be seen on hover and click.

Please help. @kthorngren

kthorngren

This thread has some examples of how to display buttons.

Firstly those icons or button should not be visible. But will be seen on hover and click

Datatables doesn't control this. You can probably control this via CSS. If you have issues setting this up please provide a test case so we can take a look.

Kevin

Antriksh

@kthorngren I have achieved this with css. But want to have fixed width for the last column. Currently used code -
columnDefs: [
{
targets: -1,
data: null,
sorting: false,
render: function(data, type, row, meta) {
return '<a>

</a>';
}
}
]

I have made the A tag hide and show on hover. But when we dont hover on row and this A tag is not visible, the column doesn't occupy any width. I want to fix this column's width.

kthorngren

Try using the width option. If that doesn't help please build a test case with what you have so we can offer suggestions.

Kevin

Antriksh

This width option is not working. Edited example-
http://live.datatables.net/qemodapi/147/edit

On hover in first column we can see the buttons but width of 50% is not reflecting.
@kthorngren

kthorngren

Is the problem you want to fix to keep the column the same width and keep the buttons inline?

If so maybe the opacity CSS property will do what you want. Example using opacity.
http://live.datatables.net/qemodapi/147/edit

Kevin

Antriksh

No, like if there are more than 20 columns. There will be scroll to show those columns and the width of the columns will depend on their content. In this case if I hide/show the buttons i have in my last column, the width of that column changes because of show/hide. I want to fix that width.
@kthorngren
For reference - http://jsfiddle.net/6zc34mjy/2/

If you can this in this example, width changes on hovering rows. I want to fix last column width.

kthorngren

Sorry I linked to the wrong test case:
http://live.datatables.net/qemodapi/151/edit

This one has the opacity CSS. Does this work for you?

Kevin

Antriksh

Thanks Kevin that worked for me. I have one another question. In the same example can I have a dynamic template for our button in the columnDefs render function and set properties on it.

Example - I can have dynamic buttons, so i don't want to have the hard coded HTML in the render function. @kthorngren

kthorngren

In the same example can I have a dynamic template for our button in the columnDefs render function and set properties on it.

The example it is returning a string representing the inputs. There are no Datatables restrictions of how the string is built. Using Javascript you should be able to dynamically build the buttons.

Kevin