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.
Related
I am trying to add a new row to the datatable loaded by ajax, but need the content of the new row to be different then the previous rows. I am using row.add.draw() and a new row is added to the table but with the same fields as the other rows. I need the new row to have a "ADD" button instead of "EDIT" and "DEL".
Here is the columns of the table in general:
columns: [
{ data: 'mls' },
{ data: 'steet' },
{ data: 'city' },
{ data: 'zip' },
{ data: 'country' },
{'data': null, 'render': function (data, type, row, meta) {
return '<button id="del-'+row.mls+'" class="btn btn-danger btn-xs edit_active" data-title="Delete" data-toggle="modal" data-target="#del" >Delete</button>';
}
},
this is the function of row.add.draw() :
$("#cur_act_tbl").DataTable().row.add({"mls": '',"street": '',"city": '',"zip": '',"country": ''}).draw();
In your data add a type property that will tell DataTables if this is a new row or an existing one. You will need to modify your Ajax return to include this property also (but with the value "existing")
{"mls": '',"street": '',"city": '',"zip": '',"country": '', "type": "new"}
Then in DataTables you just need to check for this property and return the corresponding button.
columns: [
{ data: 'mls' },
{ data: 'steet' },
{ data: 'city' },
{ data: 'zip' },
{ data: 'country' },
{ render: (data, type, row, meta) => {
let btn = '';
if(row.type == 'new') {
btn = '<button id="add-'+row.mls+'" class="btn btn-primary btn-xs edit_active" data-title="Add" data-toggle="modal" data-target="#add">Add</button>';
} else {
btn = '<button id="edit-'+row.mls+'" class="btn btn-info btn-xs edit_active" data-title="Edit" data-toggle="modal" data-target="#edit">Edit</button>';
}
return btn;
}
],
I am trying to render dynamic buttons for dataTable rows in vuejs. Buttons are displaying for each row, but the problem is, #click event is not working there. My codes are:
$('#users').DataTable({
data: response.data,
columns: [
{ data: 'id' },
{ data: 'role_id' },
{ data: 'name' },
{ data: 'email' },
{
data: null,
className: "dt-center editor-edit",
render: function (data, type, row, meta) {
return '<input type="button"'+ #click=toggleModal()+'" class="name" id=n-"' +
meta.row + '" value="Name"/>;
},
orderable: false
}
]
})
Please try this, with just hardcode #click="toggleModal()" with the string.
<input type="button" #click="toggleModal()" class="name" id=n-"' +
meta.row + '" value="Name"/>
I Edited my code, but the problem now is i can't retrieve my data but there is no error in my code, Also i have records in my database. I can't figure it out why my data is not dislaying.
//Controller - where i getting my data in database.
public ActionResult GetEmployeeFlexiSched()
{
string query = "exec spdGetEmployeeFlexiSched";
string strReturn = GlobalFunction.DataTableToJSON(GlobalFunction.TableFromMSSQL(conn, query));
return Json(new { success = true, data = strReturn }, JsonRequestBehavior.AllowGet);
}
<script>
$(document).ready(function () {
var dataTable = $('#OedTB').DataTable({
"language": {
emptyTable: "No Transaction"
},
ajax: {
url: '#Url.Action("GetEmployeeFlexiSched", "FlexiSchedule")',
dataType: "json",
retrieve: "true",
processing: "true",
serverSide: "true",
type: "POST",
dataSrc: "",
},
order: [],
columnDefs: [
{
orderable: false,
}
],
columns: [
{data: "TranNo"},
{data: "FullName"},
{
data: "TranNo",
render: function (data, type, row, meta) {
return '<button type="button" class="btn btm-sm btn-outline-danger viewdetails" id="' + data + '"><i class="fas fa-info-circle"></i></button>';
}
},
]
});
});
</script>
I am trying to use DataTables twice on two different modals, the problem I'm having is the second modal that opens the DataTable isn't being initialised?
CodePen of the process -
http://codepen.io/kieronapple/pen/WwzrgP
How it should work -
First modal opens first DataTables initialises
Press manage on the first modal, second modal opens. But DataTables doesn't initialise?
Function to initialise both tables
function getValidTags(type){
var ruleID = $('.ruleID').val();
switch(type){
case "validTags":
var table = $('.valid-tags').DataTable({
"ajax": {
"url": "/ajax/getValidTags.php",
"type": "POST",
"data": {
ruleID: ruleID,
type: type
},
},
"columnDefs": [{
"targets": 2,
"render": function(data, type, full, meta){
return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button> <button class="btn btn-danger btn-sm deleteValid">Delete</button>';
}
}],
destroy: true
});
break;
case "autofixes":
alert('hi');
var table2 = $('.autofixes-table').DataTable({
"ajax": {
"url": "/ajax/getValidTags.php",
"type": "POST",
"data": {
ruleID: ruleID,
type: type
},
},
"columnDefs": [{
"targets": 2,
"render": function(data, type, full, meta){
return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button>';
}
}],
destroy: true
});
break;
}
}
Function to action first DataTable
$('input[class="val_list"]').click(function() {
$('.ruleID').val($('#mongoid').val());
$('.validation-list-modal').modal('show');
$('.validTagsTable').empty();
if ($('.val_list').is(':checked')) {
$(".tags, .tm-input, .new-tag, .allow_null_div, #null-label, .auto-fix").show();
}
getValidTags('validTags');
});
Function to action second DataTable
$('.valid-tags').on('click', '.manageAutofixes', function(){
$('.autofixes-modal').modal('show');
getValidTags('autofixes');
})
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");
});