I am getting this error Cannot read property 'oFeatures' of undefined datatables I am using bubble editing of datatable editor
<script type="text/javascript">
var editor;
$(document).ready(function(){
// use a global for the submit and return data rendering in the examples
editor = new $.fn.dataTable.Editor( {
ajax: 'http://52.77.155.163/web/index.php?r=ivision/productprices/datatable',
table: '#example',
fields: [ {
label: "Id:",
name: "id"
},
],
formOptions: {
inline: {
onBlur: 'submit'
}
}
} );
$('#example').on( 'click', 'tbody td', function (e) {
var index = $(this).index();
if ( index === 0 ) {
editor.bubble( this );
}
});
var table=$('#example').DataTable( {
ajax: 'http://52.77.155.163/web/index.php?r=ivision/productprices/datatable',
dom: "Bfrtip",
scrollY: 300,
paging: false,
bSort: false,
columns: [
{ data: "id" },
{ data: "getcat(cat_id)" },
{ data: "getproduct(p_id)" },
{ data: "m_price" },
{ data: "c_price" },
{ data: "e_price" },
{
data: null,
defaultContent: 'Delete',
orderable: false
}],
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
],
} );
});
</script>
I am getting this error in console, Cannot read property 'oFeatures' of undefined . I am using bubble editing for datatables.net editor.
I also get this error.
It was the issue, Editor's table property is different DataTable Id.
After use same Id, it's fixed.
Related
I want to get the selected checkbox value from the data table, in my table, I have two columns and the first one is for the checkbox and the second one is for display values.
Here is just returning a checkbox. How can we know that there is a click that happens?
Help me.
Here is the code
function BindColumSelectTable(DataExchangeList) {
debugger
$('#columnSelectTable').DataTable({
"data": DataExchangeList,
"destroy": true,
"columns": [
{
data: 'check', render: function (data, type, row) {
debugger;
return '<input type="checkbox"/>'
}
},
{ data:"FieldCaption" },
],
"columnDefs": [
{
orderable: false,
className: "select-checkbox",
targets:0
},
{ className:"tabletdAdjust","targets":[1]}
],
});}
I'm using jquery data table
function BindColumSelectTable(DataExchangeList) {
$('#columnSelectTable').DataTable({
"data": DataExchangeList,
"destroy": true,
"columns": [
{
data: 'check', render: function (data, type, row) {
var checkbox = $("<input/>",{
"type": "checkbox"
});
if(data === "1"){
checkbox.attr("checked", "checked");
checkbox.addClass("checked");
}else{
checkbox.addClass("unchecked");
}
return checkbox.prop("outerHTML")
}
},
{ data:"FieldCaption" },
],
"columnDefs": [
{
orderable: false,
className: "select-checkbox",
targets:0
},
{ className:"tabletdAdjust","targets":[1]}
],
});}
Try this
Here is the answer I use onclick function for each click it will trigger the function
function BindColumSelectTable(DataExchangeList) {
debugger
$('#columnSelectTable').DataTable({
"data": DataExchangeList,
"destroy": true,
"columns": [
{
data: 'ColumnCheck', render: function (data, type, row) {
debugger;
return '<input type="checkbox" onclick="ColumnCheck(this)"/>'
}
},
{ data:"FieldCaption" },
],
"columnDefs": [
{
orderable: false,
className: "select-checkbox",
targets:0
},
{ className:"tabletdAdjust","targets":[1]}
],
});
}
the above code is the same i used in the question only one thing i added is an onclick function
and the onclick function is
function ColumnCheck(thisObj) {
debugger;
var dataExchangeCheckColumnVM = $('#columnSelectTable').DataTable().row($(thisObj).parents('tr')).data();
var dataExchangeCheckColumnList = $('#columnSelectTable').DataTable().rows().data();
for (var i = 0; i < dataExchangeCheckColumnList.length; i++) {
if (dataExchangeCheckColumnList[i].FieldCaption !== null) {
if (dataExchangeCheckColumnList[i].FieldCaption === dataExchangeCheckColumnVM.FieldCaption) {
dataExchangeCheckColumnList[i].ColumnCheck = thisObj.checked;
}
}
}
_dataExchangeColumnList = dataExchangeCheckColumnList;
}
so i used an property **ColumnCheck ** it is boolean variable. on each iteration it will added a true value if check box is checked
I'm new in DataTables and I have a simple datatable for which I'm trying to add a Font Awesome fa-info-circle image instead of one column header by using render like:
table = $("#datatable-buttons").DataTable({
data: document.pvm.tableContent(),
columns: [
{ data: "Info", render: function (data, type, full, meta) { if (type === 'display') return '<span style="font-size:75%" class="fa fa-info-circle"></span>' } },
{ data: "WiFi", title: "WiFi" },
{ data: "GPS", title: "GPS" },
],
fixedHeader: true,
dom: "lfBrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "excel",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "pdfHtml5",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "print",
className: "btn-sm"
},
],
});
But it seems that my icon instead of being just in the header for Info column, there is no icon in the header but in the data columns instead of the correct data. Is is possible to add a icon just for one field in the header?
I believe when you are saying "column header" you mean the title? render() is for rendering column data, you set the column header through the title property :
var table = $('#example').DataTable({
columnDefs: [{
targets: 0,
data: '0', //just use DOM
title: '<i class="fa fa-info-circle fa-lg"></i>'
}]
})
demo -> http://jsfiddle.net/6kp3tvpb/
title can be a function as well :
title: function() {
return '<i class="fa fa-info-circle fa-lg"></i>'
}
But notice that this callback only is called once.
I am using a Codeigniter and ajax request with DataTable to fetch data and trying to print the data using DataTable print export option. But footer is not appearing in the print.
How can i include the footer in printing with DataTable?
Here is my code:
function data_table_report(dateselected){
$("#dataTables-report").dataTable().fnDestroy();
table = $('#dataTables-report').DataTable({
"ajax": {
"url": "<?php echo site_url('patients_report/dataTable_report/')?>"+dateselected,
"type": "POST",
},
responsive: true,
bInfo: false,
dom: 'Bfrtip',
buttons: [{ extend: 'print',
exportOptions: {
columns: ':visible'
}
},
'colvis'],
columnDefs: [ {
targets: -1,
visible: false}
]
});
}
Add this:
buttons: [{ extend: 'print', footer: true }]
Add footer property as shown below
buttons: [{ extend: 'print',
footer: true,
exportOptions: {
columns: ':visible'
}
}]
Try this:
"fnInitComplete": function (oSettings, json) {
myfooter = this.find('tfoot')[0].innerHTML;
new $.fn.dataTable.Buttons( this, {
buttons: [
{
extend: 'print',
exportOptions : {
columns: ':not(.notForPrint)'
},
customize: function ( win ) {
$(win.document.body)
.css( 'font-size','10pt')
.css( 'font-family','arial');
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
$(win.document.body).find('tfoot')[0].innerHTML = myfooter ;
win.print();
setTimeout(win.close(),500);
}
}
]
});
this.DataTable().buttons().container().insertBefore( '#example_filter');
},
This is my JavaScript code. My table id is tblEmployee.
$(document).ready(function (){
$('#tblEmployee').DataTable({
ajax: {
"url": "http://localhost:57507/api/Employee/Get",
"dataSrc": ""
},
columns : [{ data: 'Employee_Id' }, { data: 'Project_Id' }, { data: 'Grade_Id' }, { data: 'Site_Id' },{ data: 'Location_Id' },{ data: 'StartDate' }, { data: 'EndDate' }, { data: 'BillRate' }, { data: 'Role' },
]
});
});
This is the data from my database which the web API calls:
This is because you are setting the dataSrc = "" . As per data-tables docs dataSrc should be set to empty string if you are reading via ajax from a file. Since you are accessing the api to get a json string try something like this
A working js fiddle (with another Url)
var url = 'http://localhost:57507/api/Employee/Get';
var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
'ajax': {
type: 'POST',
'url': url,
'data': function(d) {
console.log(d.order);
return JSON.stringify(d);
}
},
columns: [{
data: 'Employee_Id'
}, {
data: 'Project_Id'
}, {
data: 'Grade_Id'
}, {
data: 'Site_Id'
}, {
data: 'Location_Id'
}, {
data: 'StartDate'
}, {
data: 'EndDate'
}, {
data: 'BillRate'
}, {
data: 'Role'
}, ]
});
Trying to hook up a client/server interface for record updates. Alles gute until the very last mile: after returning the response to the client I get this error:
TypeError: f is undefined
dataTables.editor.js (line 252 col 138)
The response is:
{"data":
[{"planid":null,"evnamelast":"Duck","eveligibleincome":3232,"DT_RowId":10003869,"evnamefirst"
:"Daffy","estart":1440054000000,"eligibilityversionid":10003869,"evpositionname ":"Duck duck goose"}] }
The columns are setup as follows:
var dispCols = [{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "evnamefirst" },
{ data: "evnamelast" },
{ data: "evpositionname" },
{ data: "planid" },
{ data: "estart" },
{ data: "eveligibleincome", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
];
And the DataTables setup as:
//Define the Editor
editor = new $.fn.dataTable.Editor( {
ajax: {
"url": "/grid?pAction=UpdateRecs&recType=" + recType,
"dataSrc": ""
},
idSrc: "eligibilityversionid",
table: "#" + GRID_ID,
/*fields: columns */
fields: fields
} );
//Setup DataTable
var table = $GRID.DataTable( {
dom: "Bfrtip",
ajax: {
"url": "/grid?pAction=GetRecords&recType=" + recType,
"dataSrc": ""
},
columns: dispCols,
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
Thanks in advance!
Asked this back in October 15, now it is August 2016. So I am going to answer this myself:
Use handsontable.