How to Add a delete and edit icon to each row

julee

Hi there. I have the following code: http://jsfiddle.net/5ooyertu/

Right now, the table is being populated properly via the server side, and my paging works.
But I'd like to add the ability to delete and or edit a row. I would like to add a column called "Actions" that has two <a hrefs> - one to an edit method... and the other to a delete method.

Prior to using dataTables, I had some JavaScript logic that would iterate through an array of records from an Ajax, call and populate a regular table with the data, and the appropriate hyper-links. http://jsfiddle.net/wu0p2e1x/

As you can see from the above code example, in my hyperlinks, I need to pass a few pieces of data from each row, either as a part of the query string (in the case of edits) or just pass them as parameters to another JavaScript function that lives in the same file as this dataTable.
I am wondering how I can change the logic that populates the dataTable to now include these two hyper-links?

I found this link: http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete#
But the code didn't work for me and I think I read somewhere that the fnRender method is deprecated now.

If you have any suggestions, I'd appreciate it. I'm a novice with JavaScript so a detailed answer would be appreciated.

tangerine

You need columns.render.

https://datatables.net/reference/option/columns.render

One of those examples has render returning a link:

   "render": function ( data, type, full, meta ) {
      return '<a href="'+data+'">Download</a>';

You would adapt the return value according to your needs.

julee

thanks tangerine. I've been reading up on that. i've managed to get a hyperlink to show up but the value of "data" shows up as "undefined". Here's the latest code: http://jsfiddle.net/av5aso2q/

I've also tried to change the render to look like:

{"render": function (data, type, full, meta) {
return '<a href=add.html?id="' + data + '">Edit</a>';
}

OR

{"render": function (data, type, full, meta) {
return '<a href=add.html?id="' + data[0] + '">Edit</a>';
}

OR

{"mRender": function (data, type,row) {
return '<a href=add.html?id="' + row + '">Edit</a>';
}

OR
{"mRender": function (data, type,row) {
return '<a href=add.html?id="' + row[0] + '">Edit</a>';
}

But I keep getting the same error that data is "undefined". I also still need to know how to make the location of the hyperlink change depending on the value of data in a row.
So for example, as I'm looping to display all records in the table, if the destination is "Group" then I want to change the hyperlink to let's say, x.html... but if it's not "Group" then add.html.
Is that possible?

troyd

Hey Julee,

If you don't care for a datatables specific method - you can use jquery. (Do you have experience with jquery/ajax?) The delete portion is really straight forward with jquery / ajax.

For example this command, would visually remove the row selected. This would be tied to a "click" event for that specific delete button.

     $(this).parent().parent().remove();

With additional code you could shove a unique identifier into your <a> tag when you generate it, then use the identifier in an ajax call to tell your server to delete it from your database when visually removing the row.

The same concepts would go with editing, but you would want some code that substituted in some input tags and ajax the new values back to the server to update your database.

I hope this make sense.

allan

've managed to get a hyperlink to show up but the value of "data" shows up as "undefined".

You would need to use columns.data to tell DataTables what data point to use for that column. The renderer just renders the data.

Regarding direct jQuery / DOM methods - yes you can do that, but you need to be a little careful. You should use the DataTables API to manipulate the table, otherwise DataTables won't know that you've added, edited or removed rows and will just undo your changes.

Allan

julee

I've answered my own question. Here's the code that I've written that's working...

http://jsfiddle.net/5ooyertu/3/

And then as far as deleting from the actual dataTable, I did the following in the success() of the delete ()

            var rowtodelete = document.getElementById('row_'+rowid);
            rowtodelete.parentNode.removeChild(rowtodelete);

Thanks to everyone for commenting / trying to help out.

allan

As I say, you need to be a little careful with that approach - as soon as the table redraws the table (assuming you are using client-side processing), it will just reinsert the deleted row.

Allan

CelesteA

very nice and informative post, thanks for sharing.

julee

Hi Allan, thanks for the caution. I'm actually using server side processing so it should work out.
Thanks