How to add a column in Jquery DataTable

dt8485

In my view I am displaying the data with some columns in a datatable.

I want to add a column with View Details and when I click on the Details of that row I want to show Jquery Dialog box showing all the fields in that box.

Here is my view code which gets the data from my Ajax postback.

@model DirectAccess.Models.RoleViewModel
@{
ViewBag.Title = "UserInfo";
}
@using (Html.BeginForm("Index", "UserInfo", FormMethod.Post, new { id = "UserInfo" }))
{
@Html.ValidationSummary(true)

Get User Information:






Select User Role




@Html.LabelFor(m => m.RoleCode):
@Html.DropDownListFor(m => m.RoleCode, new SelectList(new DirectAccess.Models.RoleViewModel().GetRoles(), "Value", "RoleCode"), "Select")
Role is required












var dataTable;
$(function () {

$("#GetUserBtn").click(function (e) {
e.preventDefault();
var postUrl = $("#UserInfo").attr("action");
var roleCode = $("#RoleCode").val();

if (roleCode.length <= 0) {
$(".roleValidation").show();
return false;
}
else {
$(".roleValidation").hide();
$.post(postUrl, { "roleCode": roleCode }, function (data) {

var userData = data.Data != null ? data.Data : [];

dataTable = $('#usersTable').dataTable({
"bJQueryUI": true,
"aaData": userData,
"oLanguage": {
"sZeroRecords": "No Records Found"
},
"bDestroy": true,
"aoColumns": [{ "sTitle": "Full Name", "mDataProp": "FullName" }, { "sTitle": "UserName", "mDataProp": "UserName" }, { "sTitle": "Email", "mDataProp": "Email" }, { "sTitle": "Role", "mDataProp": "RoleName"}]
});

});
return false;
}
});
});


}

Below is the table, I am getting from my data. I am only showing 4 in my table. I need to have a View Details column so
when I click that I want to full details in Jquery Dialog box.

Show entries
Search:
Full Name

UserName

Email

Role
bbb testuser aaa@aaa.com Corporate
aaa test bbb@bbb.com Corporate
cccc watcher na@na.com Corporate
zzz zzzz zzz@zz.com Corporate
Showing 1 to 4 of 4 entries

Thanks

fbas

Allan does this for the drill-down rows example in his blog.

in aoColumns, he uses mDataProp for each column, but uses null for the extra column that doesn't match one of the data columns. he uses sDefaultContent to add his image, and JQuery to bind event handling to the cells in that column.

http://www.datatables.net/blog/Drill-down_rows