i am getting error your cannot read property of undefined i have below is code which describe table structure there is also edit() function i am trying to store id in my id variable using var id=data[0] but my i am getting error on this line
function edit() {
var current_row = $(this).parents('tr');
if (current_row.hasClass('child')) {
current_row = current_row.prev();
}
var data = table.row(current_row).data();
console.log('Row data:' + data);
var id = data[0];
$("#ID").val(id); // here i am getting error
}
//datatable structure
function createCustomisedDatatable(arr) {
table = $('#example').DataTable({
"data": arr,
"iDisplayLength": 10,
"pagingType": "simple_numbers",
"bDestroy": true,
responsive: true,
columnDefs: [
{
responsivePriority: 1,
targets: 1
},
{
"aTargets": [0],
"sTitle": "Id",
"class": "Id",
"bSortable": true
}, {
"aTargets": [1],
"sTitle": "name",
"class": "name",
"bSortable": true
}, {
"aTargets": [2],
"sTitle": "gender",
"class": "gender",
"bSortable": true
}, {
"aTargets": [3],
"sTitle": "pincode",
"class": "pincode",
"bSortable": true
}, {
"aTargets": [4],
"sTitle": "City",
"class": "City",
"bSortable": true
}, {
"aTargets": [5],
"sTitle": "Action",
"bSortable": true,
"render": function(data, type, row) {
var returnHTML = CreateDataHTML(data);
return returnHTML;
}
}
],
order: [1, 'asc']
});
}
I think this is your problem:
// returns an array for each row. Since t here is only one row,
// there will be only one item in the array.
var data = table.rows(current_row).data();
console.log('Row data:' + data);
var rowData= data[0];
// now you need the column that it belongs to
$("#ID").val(rowData[0]); // assuming that id is in the first column
Related
I'm trying to see what is going wrong here:
var TableName = $('#List').DataTable({
autoWidth: false,
pagingType: "full_numbers",
order: [[ 1, "desc" ]],
serverSide: true,
processing: false,
ajax: "datatables.cfc?method=getTable",
columns: arr,
columnDefs: arrDefs
});
Here is how arr and arrDefs are coming:
var arr=[];
var arrDefs = [];
datacolumns.split(",").forEach((element)=>{
arr.push({data:element.trim()})
arrDefs.push({className: "editable alignCenter"})
});
arrDefs.push({
width: "1em", className: "deleteCol", orderable: false
});
But I am getting an error:
TypeError: column is undefined jquery.dataTables.js:1722:5
jQuery 7
my JSON
[
{
"DT_RowData": {
"pkey": 1
},
"DT_RowId": 1,
"id": 1,
"delete": "<img class=\"deleteButton\" src=\"delete.png\" alt=\"delete1\" />",
"title": "Dewey defeats Truman"
},
{
"DT_RowData": {
"pkey": 2
},
"DT_RowId": 2,
"id": 2,
"delete": "<img class=\"deleteButton\" src=\"delete.png\" alt=\"delete2\" />",
"title": "Men walk on Moon"
}
]
I want to add Drop down with in a Data Table. But it's not working.
Here I am adding the code I tried:
_dataTables.markAttendanceTable = $('#markAttendanceTable').DataTable(
{
dom: '<"pull-right"f>rt<"bottom"ip><"clear">',
ordering: false,
searching: false,
paging: true,
pageLength: 10,
fixedColumns: false,
data: GetAllMarkAttendance(eventId),
language: {
search: "_INPUT_",
searchPlaceholder: "Search"
},
columns: [
{ "data": "Login.Name", "defaultContent": "<i>-</i>" },
{"data":null ,
render: function (d, t, r) {
debugger;
var $select = $("<select></select>", {
//"id": //r[0]+"start",
"id": "Select",
"value": "Select"
});
$.each(attended, function(k,v){
var $option = $("<option></option>", {
"text": v,
"value": k
});
if(d === v){
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
},
],
columnDefs: [
{ className: "text-left", "targets": [0] },
{ className: "text-center", "targets": [] },
//{ width: "30%", "targets": [0] },
//{ width: "25%", "targets": [1] },
],
});
Please give me your suggestions.
My jquery datatable contain one column which has checkbox. i just want to count number of selected checkboxes from that jquery datatable and stor that count value in one variable for further processing.
This is my code to create data table
oTable = $("#datatable-assessment-Notes").dataTable({
"bPaginate": true,
"bJQueryUI": true,
"bRetrieve": true,
"bDestroy": true,
// "bSorting": true,
"aaSorting": [[6, 'asc']],
"fnDrawCallback": function () {
NoteRadioButtonClick();
},
"aoColumns": [
{ "bSortable": false, "sType": "date", "aTargets": [0] },
{ "bSortable": true, "aTargets": [1] },
{ "aTargets": [2] },
{ "aTargets": [3] },
{ "aTargets": [4] },
{ "bSortable": false, "aTargets": [5] },
{ "bSortable": false, "aTargets": [6] },
{ "bSortable": false, "aTargets": [-1] }, ],
"fnRowCallback": function (nRow, aData) {
var isViewAll = $("#isview-all").val();
if (isViewAll == 1) {
$(".isviewall").remove();
$(".edit_note").remove();
}
return nRow;
}
});
and this is code for checkbox button
<td class="table_heading imp_class_tableData">
#Html.CheckBoxFor(m => item.priority, new { #id = "note_priority", #name = "Note_priority_check" })
</td>
In My datatable custom directive, I have three action icons in a cell.
$(document).ready(function () {
var oTable = $("#elem").dataTable({
'bJQueryUI': false,
'sScrollY': '300px',
'bScrollInfinite': true,
'bSearchable': true,
'bScrollCollapse': true,
'sDom': 'tSi',
"bDeferRender": true,
'bPaginate': true,
'aaSorting': [
[1, 'asc']
],
'aaData': scope.datasource,
"fnRowCallback": processRow,
"aoColumnDefs": [{
"bSortable": true,
"bSearchable": true,
"sWidth": "20%",
"sTitle": "Name",
"sName": "name",
"aTargets": [0],
"mData": "name",
"mRender": function (data, type, full) {
return '' + data + ' ';
}
}, {
"bSortable": true,
"bSearchable": true,
"sWidth": "18%",
"sTitle": "Types",
"sName": "types",
"aTargets": [1],
"mData": "types"
}, {
"bSortable": true,
"bSearchable": true,
"sWidth": "10%",
"sTitle": "File Type",
"sName": "fileType",
"aTargets": [2],
"mData": "fileType"
}, {
"bSortable": true,
"bSearchable": true,
"sWidth": "18%",
"sTitle": "Modified Time",
"sName": "modifiedTime",
"aTargets": [3],
"mData": "modifiedTime"
}, {
"bSortable": false,
"bSearchable": true,
"sWidth": "25%",
"sTitle": "Action Buttons",
"aTargets": [4],
"mData": "",
"mRender": function () {
return '<div class = "center">
<span>
<i class = "glyphicon-info-sign glyphicon"
id="info" style="color:#32a5e8"
onmouseover="this.style.color=\'crimson\'"
onmouseout="this.style.color=\'#32a5e8\'">
</i>
</span>
<i class = "glyphicon-edit glyphicon" style="color:#32a5e8"
onmouseover="this.style.color=\'crimson\'"
onmouseout="this.style.color=\'#32a5e8\'" ng-click="">
</i>
<span>
<i class = "glyphicon-remove glyphicon" style="color:#32a5e8"
onmouseover="this.style.color=\'crimson\'"
onmouseout="this.style.color=\'#32a5e8\'" ng-click="">
</i>
</span>
</div>';
}
}]
});
$("#elem tbody tr td:eq(4)").on('click', function () {
var data = oTable.fnGetData(this);
console.log("clicked inside table -- data: ", oTable.fnGetData());
var position = oTable.fnGetPosition(this);
console.log("clicked position inside table -- position: ", position);
});
});
After clicking on "info" icon, I need to show a message in popover.
Now,I have tried with fnGetPosition() method which returns the same position for all the icons inside the cell. If I can differentiate their position values, it will be easy for me to show the dialog on "info" icon click.
How can I work with it now? Or is there another way to do this?
$(document).ready(function() {
var oTable = $("#elem").dataTable({
'bJQueryUI':false,
'sScrollY': '300px',
'bScrollInfinite':true,
..........
..........
});
$("#elem tbody").delegate("tr i", "click", function (e) {
e.preventDefault();
var self = $(this);
var pos = self.closest('tr').index();// <-- this will give you row index.
if (self.hasClass('glyphicon-edit')) {
// Do something
}else if (self.hasClass('glyphicon-info-sign')){
// Do something
}else if(self.hasClass('glyphicon-remove'){
// Do something
}
});
In my table I have very 4 columns: Name, Age, Percentage, Checkbox column
http://live.datatables.net/umezez/51/edit
What I'm trying to do is to set value of percent column based on checkbox in last column.
Idea is to sum age column in footer based on that checkbox (this part I have done) and calculate percent value base on that footer.
When I try to debug and I put my updated data to console I see that percent value is correctly updated, but table isn't updated.
My idea is to update row in fnRowCallback but I think table should be updated when I modify data in fnPreDrawCallback
I'm using DataTables 1.9.4.
Here is my code:
$(document).ready(function () {
$(document).on('click', "input.updateFooter", function () {
var rowIndex = oTable1.fnGetPosition($(this).closest('tr')[0]);
var ok = this.checked ? 1 : 0;
oTable1.fnSettings().aoData[rowIndex]._aData.use = ok;
oTable1.fnDraw();
});
var iTotal = 0,
rowsInUse = 0;
var oTable1 = $('#example1').dataTable({
"table-layout": "fixed",
"oLanguage": {
"sZeroRecords": "No data"
},
"fnPreDrawCallback": function (oSettings) {
iTotal = 0;
rowsInUse = 0;
for (var i = 0; i < oSettings.aoData.length; i++) {
if (oSettings.aoData[i]._aData.use == 1) {
iTotal += oSettings.aoData[i]._aData.age;
rowsInUse++;
}
}
for (var j = 0; j < oSettings.aoData.length; j++) {
if (oSettings.aoData[j]._aData.use == 1) {
oSettings.aoData[j]._aData.percent = (parseInt(oSettings.aoData[j]._aData.age) / iTotal * 100).toFixed(2) + "%";
} else {
oSettings.aoData[j]._aData.percent = "";
}
}
//console.log(oSettings.aoData);
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
console.log(aData);
},
"fnDrawCallback": function (oSettings) {
//oSettings.aoData[0]._aData.percent = "24%";
},
"fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) {
if (rowsInUse > 0) {
$('#sum .c0').html(iTotal);
$('#avg .c0').html(rowsInUse > 0 ? (iTotal / rowsInUse).toFixed(2) : 0);
}
},
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"aaSorting": [
[0, "asc"]
],
"aaData": [{
name: "Tomek",
age: 20,
percent: "20%",
use: 1
}, {
name: "John",
age: 30,
percent: "80%",
use: 1
}],
"aoColumns": [{
"sTitle": "Name",
"bVisible": true,
"sType": "string",
"sWidth": "100px",
"mData": "name"
}, {
"sTitle": "Age",
"bVisible": true,
"sType": "",
"sWidth": "50px",
"sClass": "center percent",
"mData": "age"
}, {
"sTitle": "%",
"bVisible": true,
"sType": "",
"sWidth": "50px",
"sClass": "center percent",
"mData": "percent"
}, {
"sTitle": "",
"bVisible": true,
"bSortable": false,
"sType": "string",
"sWidth": "20px",
"sClass": "center",
"mData": "use",
mRender: function (data) {
return '<input type="checkbox" class="updateFooter" name="d" ' + (data == 1 ? 'checked="checked"' : '') + ' />';
}
}]
});
});
your code is fine just put this to fnRawCallBack
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).children(':eq(2)').text(aData.percent);
return nRow;
},
dataTables recycle html on each draw, solution is to edit that html. Link to live example http://live.datatables.net/epulak/