I have yadcf working on DataTables in a jqueryUI tabbed environment. When you first load the page, it works correctly.
However, when you click away to another tab, then come back to the previous tab, DataTables blows up and sends the error:
TypeError: settingsDt is undefined from line 438 in jquery.dataTables.yadcf.js >(if (settingsDt.oSavedState != undefined && settingsDt.oSavedState.ColReorder >!== undefined) {...)
I have a demo up for you to look at: www.novobpm.com/yadcf
Click on the "Part Master" tab, it works. Then click on "Part Alerts." All is OK.
Now go back to "Part Master" and it'll blow up. The error is in the console. Interestingly, if you now click on "Part Alerts" again, that table is blown up.
var oTable;
oTable = $('#part_master').DataTable( {
ajax: 'tables/parts/table.part_master.php',
dom: 'B<"clear">frtip',
pagingType:'full_numbers',
order: [[ 0, 'asc' ]],
processing: true,
pageLength : 10,
searching: true,
columns: [
{ data: 'part_master.part_number' },
{ data: 'part_master.part_description' },
{ data: 'part_master.part_status' },
{ data: 'part_master.add_leadtime_days' },
{ data: 'part_master.add_leadtime_name' },
{ data: 'part_master.max_pph' }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor }//,
],
InitComplete: function (settings, json) { }
} );
yadcf.init(oTable,[{
column_number: 0,
filter_type: "multi_select",
select_type: 'chosen'
}, {
column_number: 1,
filter_type: "auto_complete"
}, {
column_number: 2
}, {
column_number: 3
}, {
column_number: 4
}, {
column_number: 5,
filter_type: "range_number_slider"
},
]);
Go grab 0.9.0.beta.7 should work now.
Next time you get an error in browser console, feel free to open an issue
Related
Im using datatables (server side randering) with checkbox plugin from Gyrocode.
var dTable2 = $('table.contracts-search-results').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "${someURL}",
"type": "POST",
"data": function (d) {
d.returnEmptyResult = '${returnEmptyResult}';
},
},
searching: false,
"dom": '<"top"iplB<"clear">>rt<"bottom"iplB<"clear">>',
paging: true,
pageLength: 0,
displayStart: 50,
"pagingType": "input",
info: true,
"buttons": [],
"order": [],
"columnDefs":
{"targets": 7,
"width": "75px",
checkboxes: {
"selectRow": true,
"selectAll": false
},
"stateSave": true,
'createdCell': function (td, cellData, rowData, row, col){
var $this = this;
var selectedCon = '${con}';
var arrayOfCon = selectedCon.replace(/[\[\]\s']+/g, '').split(",");
$.map(arrayOfSelectedCon, function(conId, index) {
if(cellData == conId) {
$this.api().cell(td).checkboxes.select();
}
});
},
},
{
"targets": [14, 15, 16],
"visible": false
},
],
"select": {
"style": "multi",
},
"language": {
"decimal": ",",
"thousands": ".",
"url": themeUrl+"js/libs/dataTable/lang/german.json"
},
}
}) ;
I have to pages. On first one I have datatables with configuration posted above. Second page I have another datatables with similar configuration. When user get to second page and choose some rows using checkboxes Im creating list od Ids and when user go back to first page I send Ids from second page to first one and select checkboxes on first page based on Ids from secound page.
The problem is that its working fine If all rows were on the same table page, but when user on secound page used pagination it doesnt work.
use statesave: false as given,
"stateSave": false,
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.
The set-up:
DataTables is using remote data with pagination (AJAX-based)
YADCF is using a Select2 that's grabbing options using AJAX call
Selecting Select2 option triggers grid refresh and filtering (everything is correct)
The problem:
Right after DataTables pulls the updated rowset, YADCF re-runs its intialization routine and Select2 loses its state (i.e. the selected option is no longer selected and is not in the DOM anymore).
This:
becomes this after grid reloads (select2 control re-initialized and lost all options pulled via AJAX, including the one that was selected):
How can I avoid YADCF re-initialization in such case?
Having debugged the problem for a while I found that function appendFilters(...) is called after each grid refresh from this YADCF line:
https://github.com/vedmack/yadcf/blob/master/jquery.dataTables.yadcf.js#L3332
which, in turn is fired by DataTables' draw event.
Thanks!
EDIT:
DataTables config array:
var dataTableConfig = {
"autoWidth": false,
"deferLoading": 220,
"pageLength": 5,
"searchDelay": 0,
"searching": true,
"placeholder": null,
"ordering": true,
"paging": true,
"info": true,
"columns": [
{
"name": "company",
"data": {
"_": "company",
"filter": "company",
"display": "company"
},
"visible": true,
"searchable": true,
"orderable": true,
"className": "column_Company"
}
],
"showGlobalSearch": true,
"enableColumnFilter": true,
"columnFilterPosition": "table",
"resetPaging": true,
"select": {
"style": "single"
},
"serverSide": true,
"ajax": {
"url": "/datasource/",
"type": "post"
}
};
YADCF INIT:
colCfg = [
{
"column_number": 2,
"filter_type": "select",
"data": [],
"filter_default_label": "(select..)",
"enable_auto_complete": false,
"sort_as": "alpha",
"sort_order": "asc",
"filter_match_mode": "contains",
"exclude_label": "exclude",
"select_type": "select2",
"select_type_options": {
"width": "300",
ajax: {
url: '/datasource/',
dataType: 'json',
method: 'post',
delay: 750,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.results,
pagination: {
more: (params.page * 20) < data.total_count
}
};
},
cache: true
},
minimumInputLength: 1,
templateResult: formatItem,
templateSelection: formatItemSelection,
escapeMarkup: function(v) {return v;}
},
"case_insensitive": true,
"filter_delay": 500
}
];
yadcf.init(dataTable, colCfg);
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.
I have problem hiding jQuery datatable column. I want that column to retrieve data but I don't want it to be shown on the display page. I want to hide my column no 8 so from CSS I tried hiding it and it gives me collapsable div.
Below is my code for data table and class for hiding is "hideCol".
var userTable = $('#user').dataTable( {
"processing": true,
"serverSide": true,
"ajax":"admin/getData.php",
"responsive" : true,
"lengthMenu": [10, 25],
"paginationType" : "input",
columns: [
{ data:'param0'},
{ data: 'param1' },
{ data: 'param2' },
{ data: 'param3' },
{ data: 'param4' },
{ data: 'param5' },
{ data: 'param6' },
{ data: 'param7'},
],
fnRowCallback:function(nRow,aData, iDisplayIndex, iDisplayIndexFull){
var seenReportedVal =Number($('td:eq(7)', nRow).text());
$('td:eq(7)', nRow).addClass('hideCol');
if(seenReportedVal==0)
{
$(nRow).addClass('bold');
}
},
"columnDefs": [
{ "visible": false, "targets": 7 }
],
});
try using this code
var userTable = $('#user').dataTable( {
"processing": true,
"serverSide": true,
"ajax":"admin/getData.php",
"responsive" : true,
"lengthMenu": [10, 25],
"paginationType" : "input",
columns: [
{ data:'param0'},
{ data: 'param1' },
{ data: 'param2' },
{ data: 'param3' },
{ data: 'param4' },
{ data: 'param5' },
{ data: 'param6' },
{ data: 'param7'},
],
"columnDefs": [
{ "visible": false, "targets": [7] }
],
});
You may use visible property of columns.
I suggest enclose object attributes with quotes e.g. "columns", "data" or "visible".
"columns": [
{ "data":'param0'},
{ "data": 'param1', "visible": false},
{ "data": 'param2'},
{ "data": 'param3'},
{ "data": 'param4'},
{ "data": 'param5'},
{ "data": 'param6'},
{ "data": 'param7'},
]
I don't know if you already solved your problem, but since i had the same problem i will share with you at least my solution.
It looks you are using dataTable in Responsive Mode, so based on that, if you want to hide a column you have to apply specific css class for it, based on your need. You apply to the th element associated to the column, and you have your problem solved.
More info about the different css classes can be found here.
I have solved this with some css. Might be helpful for others.
"aoColumnDefs": [
{"sClass": "dt_col_hide", "aTargets": [3]}
],
dt_col_hide is a css class and it will hide column indexed 3 in this case.
.dt_col_hide{display: none;}
or
.dt_col_hide{visibility: hidden;}
as per your requirement.