Datatables + Ajax + Actioncolumn
Datatables + Ajax + Actioncolumn
Hi, I have a datatables grid in my page. It uses an AjaxSource and i would like to add some 'action' buttons or indicators to my rows. For example i would like to add a switch for "is_active" which indicates if the item is active and allows the user to inactivate it with a click straight from the grid and i would like to add edit, delete buttons in there allso. I've seen this done here: http://datatables.net/release-datatables/examples/api/row_details.html where they add the button on every row but how do i add buttons for an ajax enabled grid ? Thanks !
This discussion has been closed.
Replies
[code]
"aoColumns: [
{
"mDataProp": function () { return ""; },
"sTitle": "Actions",
"bSearchable": false,
"bVisible": true,
"bSortable": false,
"sClass": "centered",
"sWidth": "4%",
"mRender": function () {
return '';
}
}
]
[/code]
Then I built on-click functions
[code]
$("#myTable tbody").on("click", "a.editAction", function () {
// fnGetData is used to get the object behind the row - you can also use
// fnGetPosition if you need to get the index instead
MyEditFunction($("#myTable").dataTable().fnGetData($(this).closest("tr")[0]));
})
[/code]
[code]
"aoColumnDefs": [
{
"aTargets":[11], // Your actual column number goes here
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function( data, type, full) {
return '';
}
}
] // End of aoColumnDefs
[/code]
I have an icon sitting in place of an actual link. Use fnCreatedCell to highlight it with whatever color you want to show for 'Active' and 'Inactive' states.
In you JS
[code]
$(document).ready(function(){
$('a.YOUR-ACTION').live('click', function(){
// Your code
});
});
[/code]
You can as well use an URL instead of an event to change the required status
Another was of doing it is using fnRender which is depricated from 1.9x and will be completely removed in 1.10
[code]
{"fnRender": function(oObj)
{
if(oObj.aData[4] == 'Inactive') {
return '' + 'Enable' + '';
}
if(oObj.aData[4] == 'Active') {
return '' + 'Disable' + '';
}
},
"aTargets": [4]
}
[/code]
Hope this helps