Creating an Action column for icons View - Edit - Delete

vlince

Hello all,

First time poster :-)

I’m in the process of creating a C# - ASP.NET MVC 2.0 application at which point I’d like to have/show some kind of grid with all the standard behavior (paging, sorting, etc…).

After spending a few hours reading articles and searching for a solution, I decided to give datatables a try as it looks easier to implement.

Because I have lots of data (4000 records) I have no choice but to use the Server-Side processing.

Assuming I have the following layout:
[code]



Id
FirstName
LastName
RoleId
IsActive
Actions





[/code]

Notice the “Actions” column.

The end result I’m trying to achieve is to have inside that “Actions” column a set of small little icons such as (View, Edit, Delete) for each row that will be dynamically generated.

Id | FirstName | LastName | RoleId | IsActive | Actions
--------------------------------------------------------------
18| John | Doe | Admin | true | V - E - D
19| Jane | Doe | Admin | false | V - E - D

V = icon for view
E = icon for edit
D = icon for delete

The icons would be links with the “Id” of each row in the QueryString.

Is this achievable with datatables and if so, where could I find an example for this?

Thanks in advance!
Sincerely

Vlince

fbas

Yes, I use an actions column (so far just have a delete icon in it).

In setting up that column, I have it draw the id from database (any field will do, but id is as good as any), then run fnRender to customize that column's cells - this adds the icons and uses the id in the href that I wrap around the images to perform actions.

my example uses the 2nd column, but otherwise, it's the same as what you're doing. I use fancybox to pop up a dialog to confirm deletion (requiring a password); you can use any confirmation package or skip that step if you want.

[code]



id
act
Pub Code
title
authors
description
txshop_price
txshop_item_id
imagepath

OP








[/code]

[code]
var oTable; // kept as handy global in window namespace

$(document).ready( function() {
oTable = $('#results_table').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bUseRendered": false,
"bDeferRender": true,
"sAjaxSource": "bookstore_json.php",
"aoColumns": [
{ "sName": "id", "sWidth": 30 },
{ "sName": "id", "sWidth": 30, fnRender: make_delete_link, "bSortable": false, "bSearchable": false }, // <---- getting ID column again, but will re-write it as delete icon
{ "sName": "pubcode", "sWidth": 100},
{ "sName": "title", "sWidth": 300, "sClass": "center", "sType": "string" },
{ "sName": "authors", "sWidth": 100, "sClass": "center", "sType": "string" },
{ "sName": "description", "sWidth": 300},
{ "sName": "txshop_price", "sTitle": "price", "sWidth": 50, "bUseRendered": false, "fnRender": currency},
{ "sName": "txshop_item_id", "sTitle": "TxShop ID", "sWidth": 50 },
{ "sName": "imagepath", "sTitle": "image", "sWidth": 300, "bUseRendered": false, "fnRender": img},
{ "sName": "outofprint", "sWidth": 50, "bSortable": false, "bSearchable": false, "fnRender": bool_yes },

],

"fnDrawCallback": function () { // add a class for fancybox call to delete icons' href (defined in make_delete_link()
$(".delete").fancybox({
'titlePosition' : 'top',
'overlayColor' : '#D03B40',
'overlayOpacity' : 0.4,
'transitionOut' : 'elastic',
'transitionIn' : 'elastic',
'height' : '65%',
'width' : '85%',
'scrolling' : 'auto',
'speedIn' : 500
});
},

// more intializations
}

});

// make a link to delete an id's row in the database. oObj is defined as object passed to fnRender
// you could just make this an anonymous function in-line with the aoColumns definition
function make_delete_link(oObj) {
// I'm relying on id being in column 0, but I could just as well used
// oObj.aData[oObj.iDataColumn]; // since this column also has the ID value
var id = oObj.aData[0];

return "";

}
[/code]

on confirmation, my delete pop-up will redraw the table (so the deleted row goes away, but the same filtering and sorting apply) using the API plug-in function fnStandingRedraw http://www.datatables.net/plug-ins/api

vlince

Hey thanks fbas!

That looks amazing! Thanks for sharing that code :-)

I’ll definitely have a look and try it out once I get my head around some basic stuff…

Since I’m fairly new to this (and have been reading/trying out the documentation for one day) I still don’t understand why in some examples, people use the following:
[code]
"fnServerData": function(sSource, aaData, fnCallback) {
$.ajax({ "dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
[/code]
And in other cases, they don’t!

I guess what I’m trying to get my head around is, if I simply stick to this:
[code]
$('#example2').dataTable({
"bServerSide": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"sAjaxSource": '<%=Url.Action("GetData","Home")%>'
[/code]

And define my columns with aoColumns like you did, then why would I need this “fnServerData” method.

Not sure I fully understand…

Perhaps my question should be asked in another post instead of a follow up.

Meanwhile, thanks again for your input as I’m sure it’ll be helpful once I get there :-)
Sincerely

Vlince

fbas

I don't see any need to use the fnServerData unless you're adding some custom action to happen before the call to server data is made, like adding extra parameters to send to the server script.

your instincts are correct - the fnServerData above doesn't do anything that the system doesn't already do by default.

if you were in the movies, though, you might need to do the following
[code]
"fnServerData": function(sSource, aoData, fnCallback) {
// add extra parameter or else server will blow up
aaData.push({"keep_speed_of_bus_over": "50 mph"}); //////// <<-- important plot line development
aaData.push({"hero": "Keanu Reeves"}); //////// <<-- important plot line

$.ajax({ "dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
[/code]

this is a good reference: http://www.datatables.net/ref (found by clicking Usage up top and then viewing Full Reference). There's a good link there for server-side processing parameters too.

vlince

Thanks! I'll continue working my way up the documentation :-)
Sincerely

Vlince

vlince

Hey fbas,

Just letting you know that I’ve finished my example and your code was a blessing!

I can’t thank you enough for it.

Sincerely
Vlince

aplav

Hi Vlince,
Could you please share your code? I need to do something similar.
Thanks

EmanSJ

Yes Vlince, I also need your code, could you please share your code or file with me or you can email me in eman.sj05@gmail,com.
Thanks before.