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");
});
Related
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.
Here I am using data table
Row click I want to do something [redirection],
in a row, one of the columns has a button & it has some action.
Problem: when I click button to do action getting row click, want to prevent row click while clicking on button
CODE
$('#example').click(function () {
var dataArr;
var rows = $('tr.selected');
var rowData = table.rows(rows).data();
$.each($(rowData), function (key, value) {
dataArr = value["id"];
window.location = 'clients?id=' + dataArr;
});
}
What should I change? Thank you
Edit:
The buttons :
$(document)
.ready(
function() {
var table = $('#example')
.DataTable({
"sAjaxSource": "/clients",
"sAjaxDataProp": "",
"order": [
[0, "asc"]
],
"aoColumns": [{
"mData": "id"
},
{
"mData": "name"
},
{
"mData": "lastName"
},
{
"mData": null,
defaultContent:'<p>1</p>'
},
{
"mData": null,
className: "center",
defaultContent: ' <p title="New"><button class="btn btn-primary btn-xs newButton" data-title="Add" id="btn"><span class="glyphicon glyphicon-plus"></span></button></p>'
},
{
"mData": null,
className: "center",
defaultContent: '<p data-placement="top" data-toggle="tooltip" title="Edit "><button class="btn btn-default btn-xs data-title="edit" data-toggle="modal" data-target="#edit""><span class="glyphicon glyphicon-pencil"></span></button></p>'
},
{
"mData": null,
className: "center",
defaultContent: ' <p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button></p>'
}
]
});
I am using DataTables. ANd only need this for the last two columns where edit and delete are
Whenever child event call parent event, here you can prevent using the following method.
event.stopPropagation();
Try using event.stopPropagation();
The code will be similar with :
$(".table_row"/*the table row class*/).on('click', 'button', function () {
//button action
}).on('click', $(this).parent().parent().parent() , function (e) {
e.stopPropagation();
});/* if $(this).parent().parent().parent() doesn't work ,search in developer tools to see where click action is triggered ,on the */
Something like
I tried to make something I don't know if you like it but it works the way you want this(updated).
I have two tables
First table:
var oTable1 = $('#table1').dataTable({
"sAjaxDataProp": "firstDataSource",
...
"aoColumns": [
{ "mData": "name" },
{ "mData": "value" },
]
Second table:
var oTable2 = $('#table2').dataTable({
"sAjaxDataProp": "secondDataSource",
...
"aoColumns": [
{ "mData": "newName" },
{ "mData": "newValue" },
{
"mRender": function (data, type, full) {
return '<a id="addbtn" class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Add' + '</a>';
}
}
]
I need add new row to first table from second table. Whether it is possible to do so? How implement?
For implement you can try use this link http://jsfiddle.net/n57ra688/ or http://jsfiddle.net/NpT26/14/
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(){ ... });
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