Develop Reference

How to get row values in Jquery Datatable Render?

Hello guys I am stuck on something I have to get the values of the whole row of data table, as far I am getting id but not getting whole row object
this is where I am
var table = $('.dtPrimaryBottom').DataTable({
// dom: "Bfrtip",
"lengthMenu": [[6], [7]],
paging: true,
columns:[
{ title: 'Student ID', data: 'stu_ID', visible:false},
{ title: 'Registration No', data: 'Registration No' , 'searchable':true},
{ title: 'Name', data: 'Name' },
{ title: 'FathersName', data: 'FathersName' },
{ title: 'Class', data: 'Class' },
{ title: 'Section', data: 'Section' },
{
//"title": "Actions",
//"mdata": null,
//"render": function (data, type, row) {
// return '<button class="btnID">Edit</button>';
//"mData": null,
//"bSortable": false,
//"mRender": function (stu_ID) { return '<input id="btnDispose" type="button" onclick="myfunction(' + stu_ID +')" value="Edit" />'; }
title:'Actions',
'data': 'stu_ID',
'render': function (data, type, row) {
debugger;
var id = $(this).data('stu_ID');
// console.log(data);
return '<input id="btnEdit" type="button" class="btn btn-warning" onclick="myfunction(' + data + ')" value="Edit" /> <input id="btnDelete" type="button" class="btn btn-danger" onclick="myfunction(' + data + ')" value="Delete" />';
}
}
],
data: JsonData
});
on my onclick function when I write data I get the id but when I try to pass the whole row to my function it does not get hit
function myfunction(data) {
debugger;
var stid = row.stu_ID;
var regNo = row
alert(stu_ID);
}
how to pass whole row values when clicking on edit button?

You are specifying explicitly to pass only one value in data object :
'data': 'stu_ID'
So, you need to remove this property if you want to pass complete object to render function.
Change your code to :
'data' : null
or just simply remove this property, as default it would pass complete object then.
title:'Actions',
'render': function (data, type, row) {
debugger;
console.log(data); // you should in console object now
return '<input id="btnEdit" type="button" class="btn btn-warning" onclick="myfunction(' + data + ')" value="Edit" /> <input id="btnDelete" type="button" class="btn btn-danger" onclick="myfunction(' + data + ')" value="Delete" />';
}
Now you can access it in function down:
function myfunction(data) {
debugger;
var stid = data.stu_ID;
}
You can read more in detail about how to use render function here:
https://datatables.net/reference/option/columns.render

You can use the following way to render data. I have always rendered data in serverside processing the following way :
var table= $('.dtPrimaryBottom').DataTable( {
"serverSide": true,
"destroy" :true,
"lengthMenu": [[6], [7]],
"ajax": {
"url": '/reports/getTopPerformerReport',
},
"columns": [
{ "data": "stu_ID" },
{ "data": "Registration No", },
{ "data": "Name" },
{ "data": "FathersName" },
{ "data": "Class" },
{ "data": "Section" },
{ "data": "stu_ID",
"render": function ( data, type, full, meta ) {
return "<img src=\"http://test.com/"+data+"\" style=\"max-width:150px;\">";
}
},
]
});
Hope it helps.

click function is not working and if i comment $('#tablenew').dataTable( {}); its working but i want datatable too

Click function is not working and if I comment $('#tablenew').dataTable({}); out, it's working, but I want this to work with datatable
$( document ).ready(function() {
$('#tablenew').dataTable( {
'bProcessing': false,
'bServerSide': false,
'sort': 'position',
'sAjaxSource': 'springPaginationDataTables.web',
'aoColumns': [
{ "mData": "UserId" },
{ "mData": "UserName" },
{ "mData": "UserStatus" },
{ "mData": "UserType" },
{ "mData": "AddedBy" },
{ "mData": "AddedDateTime" },
{ "mData": "UpdatedBy" },
{ "mData": "UpdatedDateTime" },
]
});
$('#tablenew').find('tr').live('click', function(){
var row = $(this).find('td:first').text();
alert('You clicked ' + row);
/* $("#userId").value(row); */
var url = '/paymentGateway/userInfoPage/'+row;
$(location).attr('href',url);
});
});

DataTables redraws the table structure (rows/cells) often. The <tr>'s that are initially getting the click event bound to them are being removed when the table redraws. You'll need to bind the events using event delegation on the table, instead of on the table rows.
This should work:
$('#tablenew').on('click', 'tr', function(){ ... });

invoke javascript on button click of a datatable row

Im using dataTable and I have the following:
var oTable = $('#example').dataTable({
bProcessing: true,
sAjaxSource: "/Cart/addresses",
'iDisplayLength': 5,
aaSorting: [],
aoColumns: [
{ "mData": "Contact" },
{ "mData": "Address" },
{ "mData": "Postcode" },
{
"mData": null,
"mRender": function (data, type, full) {
return '<button type="button" class="btn btn-success use-address" onclick="doFunction();" role="button" data-adcode="' + full.ADCode + '">' + 'Use Address' + '</button>';
}
}
]
});
I have tried the following, i basically want to be bale to use adcode when the button is clicked:
$('.use-address').click(function () {
var adccode = $(this).data("adcode");
});
function doFunction()
{
var adccode = $(this).data("adcode");
}
This wont work, in firebug it doesnt hit either of these.
Note the datatable is added dynamically (after clicking a button.)
Any ideas why it aint working?
Thanks

Try to use event delegation here:
$('#example').on('click','.use-address',function () {
var adccode = $(this).data("adcode");
});

jQuery Datatables.net - refresh table - getting null sAjaxSource

I have the following function which should update a datatable in my ASP.NET site master page:
function refreshTable(oTable) {
var table = $(oTable).dataTable();
var oSettings = table.fnSettings();
//Retrieve the new data with $.getJSON. You could use it ajax too
$.getJSON(oSettings.sAjaxSource, null, function (json) {
table.fnClearTable(this);
for (var i = 0; i < json.aaData.length; i++) {
table.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table.fnDraw();
});
}
This function is then called to refresh a table if an attachment is added to the site - this is the datatable settings that it should refresh.
var DeleteClicked = false;
var oTable;
$(document).ready(function () {
oTable = $('#infoTable').dataTable({
"aaSorting": [[6, "desc"]],
"bProcessing": true,
"sAjaxSource": '/Web/Handlers/infoTableHandler.ashx',
"aoColumns": [
{ "mData": "ID", "bVisible": false },
{ "mData": "Type" },
{ "mData": "Received" },
{
"mData": "Action", "sWidth": "100px", "mRender": function (data, type, row) {
var id = row.ID;
return "<input type=button id=" + id + " onclick='DeleteFile(" + id + ")' class=buttonBlue value=Delete />";
},
},
{ "mData": "IsImage", "bVisible": false }
],
"bDeferRender": true,
});
However - if I open Developer Tools in Chrome I get an error message saying sAjaxSource is null so i cannot then get the value from it - so oSettings is null and then I cannot get access to the sAjaxSource - anyone see anything wrong here?

you're basically reinitializing your dataTable in the first row of refreshTable. Try instead:
function refreshTable() {
var oSettings = oTable.fnSettings();
...
}
and refer directly to the global oTable instead of your local table variable

need help with editable tables in jQuery ( DataTables plugin )

I'm trying to use jQuery and its plugin DataTables ( http://www.datatables.net/release-datatables/examples/api/editable.html ), to make an editable table.
Here's my code so far. The top part of it works great by generating a table inside a DIV with the data from a js array.
Yet I also need this table to be editable. I have found an example code for it ( see bottom part ) but kinda can't figure out how to apply it to my table?
Any ideas? Thanks!
$(document).ready(function() {
$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
/// create a table within the '#dynamic' DIV
$('#example').dataTable( {
"aaData": numbarr, /////// takes data from the 'numbarr' js array.
"aoColumns": [
{ "sTitle": "Country " }, //// column names
{ "sTitle": "Number " },
{ "sTitle": "Tariff ID " },
{ "sTitle": "Customer Acc " },
{ "sTitle": "Customer Name " },
{ "sTitle": "Payment Terms " },
{ "sTitle": "Payout/Call " },
{ "sTitle": "Payout/Min " },
]
} );
///////////////////////////// the code above workd fine!
////////////////// this code was taken from an example, not sure how to connect it with my table...
$('td', oTable.fnGetNodes()).editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "12px"
} );
////////////////// this code was taken from an example, not sure how to connect it with my table...

I've used this plugin http://square-bracket.com/openjs

The example I see states to initialize your table like:
$('#example').dataTable(options).makeEditable(options);
That being said, I haven't gotten it to work yet either.

This is an example that works for me:
$('#tblDataTable2').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[ 0, "asc" ]],
"aoColumnDefs": [
{ "sClass": "center", "aTargets": [ 0, 1 ] }
]
}).makeEditable({
sAddURL: "Setting?operation=create",
sUpdateURL: "Setting?operation=update",
"aoColumns": [
{ placeholder: '' },
{ placeholder: '' }
],
});