upgrading and other issues part 1
upgrading and other issues part 1
sonicbug
Posts: 26Questions: 0Answers: 0
Hi Allan:
The datatables plugin is awesome, keep up the great work. Recently, I have run into an issue when trying to upgrade from version 1.6.2 to
1.7.6. I have been getting the following errors:
1.) DataTables warning (table id = 'x'): Added data (size y) does not match known number of columns (5)
I have reviewed my code and everything looks alright. There is the correct number of thead,tr, and td elements being produced. I am reading the
data from a csv file, generating arrays from the csv data, and then passing the arrays to the dataTables plugin. I do have multiple tables
on a single page, each table is using a unique id.
2.) Error: oSettings.nTable.parentNode is null
Line: 3407
3.) The filter (text box) stops working when I have the "most recent" option selected. The filter (text box) works fine with all other
options in the select list except for the "most recent" option. For example, I can have 10 entries display and then try to filter
for a date that appears outside of any of the 10 values dispalyed in the table and the filter shows these records onfocus.
My intent with the code below was as follows: Display records that match only today's date, if none were posted today, display yesterday's.
Any suggestions on how best to fix these issues is greatly appreciated. Thanks in advance.
The datatables plugin is awesome, keep up the great work. Recently, I have run into an issue when trying to upgrade from version 1.6.2 to
1.7.6. I have been getting the following errors:
1.) DataTables warning (table id = 'x'): Added data (size y) does not match known number of columns (5)
I have reviewed my code and everything looks alright. There is the correct number of thead,tr, and td elements being produced. I am reading the
data from a csv file, generating arrays from the csv data, and then passing the arrays to the dataTables plugin. I do have multiple tables
on a single page, each table is using a unique id.
2.) Error: oSettings.nTable.parentNode is null
Line: 3407
3.) The filter (text box) stops working when I have the "most recent" option selected. The filter (text box) works fine with all other
options in the select list except for the "most recent" option. For example, I can have 10 entries display and then try to filter
for a date that appears outside of any of the 10 values dispalyed in the table and the filter shows these records onfocus.
My intent with the code below was as follows: Display records that match only today's date, if none were posted today, display yesterday's.
Any suggestions on how best to fix these issues is greatly appreciated. Thanks in advance.
This discussion has been closed.
Replies
$(function () {
/* grab today's date */
var dateObj = new Date();
var year = dateObj.getFullYear();
var monthNames = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
var month = monthNames[dateObj.getMonth()];
var day = dateObj.getDate();
var yesterday = day - 1;
/* get string equilvent of date */
str_year = '' + year;
str_month = '' + month;
str_day = '' + day;
str_yesterday = '' + yesterday;
/* grab data and place it into an array */
$.get("reports.csv", function (data) {
csv_reports = $.csv()(data);
/* generate a table - dataTable */
$('#reports').html('');
var oTable = $('#reports_table').dataTable({
"iDisplayLength": 9999,
"oLanguage": {
"sSearch": "Search Flood Reports by date:",
"sLengthMenu": 'Show ' +
'most recent' +
'10' +
'25' +
'50' +
'100' +
'All' +
' entries'
},
"sPaginationType": "full_numbers",
"aaSorting": [[0, "desc"], [1, "desc"], [2, "desc"]],
"aaData": csv_reports,
"aoColumns": [
{ "sTitle": "Year", "sType": "date" },
{ "sTitle": "Month", "sType": "date" },
{ "sTitle": "Day", "sType": "date" },
{ "sTitle": "English" },
{ "sTitle": "Français" }
]
});
oTable.fnFilter(str_year, 0); // year
oTable.fnFilter(str_month, 1); // month
oTable.fnFilter(str_day, 2); // day
var empty = $("#reports_table tr td").hasClass('dataTables_empty'); // determine if table is empty
//alert(empty);
var flag;
if (empty === true) {
oTable.fnFilter(str_year, 0); // year
oTable.fnFilter(str_month, 1); // month
oTable.fnFilter(str_yesterday, 2); // yesterday
$('#reports_sl option:selected').addClass('yesterday'); // add class yesterday to option
flag = $('#reports_sl option:selected').attr('class');
$(".dataTables_info").hide(); // do not display information about table
} else {
oTable.fnFilter(str_year, 0); // year
oTable.fnFilter(str_month, 1); // month
oTable.fnFilter(str_day, 2); // today
$('#reports_sl option:selected').addClass("today");
flag = $('#reports_sl option:selected').attr('class');
$(".dataTables_info").hide();
}
// handle onchange event
$("#reports_sl").change(function (evt) {
evt.preventDefault();
var op = $("#reports_sl option:selected").val();
if (op === '9999' && flag === 'yesterday') {
oTable.fnFilter(str_year, 0); // year
oTable.fnFilter(str_month, 1); // month
oTable.fnFilter(str_yesterday, 2); // yesterday
$(".dataTables_info").hide();
} else if (op === '9999' && flag === 'today') {
oTable.fnFilter(str_year, 0); // year
oTable.fnFilter(str_month, 1); // month
oTable.fnFilter(str_day, 2); // today
$(".dataTables_info").hide();
} else {
oTable.fnFilter('',0);
oTable.fnFilter('',1);
oTable.fnFilter('',2);
$(".dataTables_info").show();
}
});
});
});
[/code]
2. Can you link to an example showing this issue please? I'm not sure what would be causing that.
3. I presume this is the 'reports_sl' change handler part? I don't see anything obvious I'm afraid - are there any JS errors?
Allan
Year,Month,Day,English,Français
2011,April,05,Report,Rapport
2011,April,06,Report,Rapport
2011,April,07,Report,Rapport
2011,April,08,Report,Rapport
2011,April,09,Report,Rapport
2011,April,10,Report,Rapport
[/code]
I'll see if I can setup a test environment on jsFiddle to share with you. Thanks again.
Allan
0
"Year,Month,Day,English,French"
1
["2010", "March", "19", 2 more...]
2
["2010", "March", "20", 2 more...]
3
["2010", "March", "21", 2 more...]
4
["2010", "March", "22", 2 more...]
5
["2010", "March", "23", 2 more...]
6
["2010", "March", "24", 2 more...]
7
["2010", "March", "25", 2 more...]
8
["2010", "March", "26", 2 more...]
9
["2010", "March", "27", 2 more...]
10
["2010", "March", "28", 2 more...]
11
["2010", "March", "29", 2 more...]
12
["2010", "March", "30", 2 more...]
13
["2010", "March", "31", 2 more...]
14
["2010", "April", "1", 2 more...]
15
["2010", "April", "2", 2 more...]
16
["2010", "April", "3", 2 more...]
17
["2010", "April", "4", 2 more...]
18
["2010", "April", "5", 2 more...]
19
["2010", "April", "6", 2 more...]
20
["2010", "April", "7", 2 more...]
21
["2010", "April", "8", 2 more...]
22
["2010", "April", "9", 2 more...]
23
["2010", "April", "12", 2 more...]
24
["2010", "April", "13", 2 more...]
25
["2010", "April", "14", 2 more...]
26
["2010", "April", "15", 2 more...]
27
["2010", "April", "16", 2 more...]
28
["2010", "April", "19", 2 more...]
29
["2010", "April", "20", 2 more...]
30
["2010", "April", "21", 2 more...]
31
["2010", "April", "22", 2 more...]
32
["2010", "April", "23", 2 more...]
33
["2010", "April", "26", 2 more...]
34
["2010", "April", "27", 2 more...]
35
["2010", "May", "5", 2 more...]
36
["2010", "May", "26", 2 more...]
37
["2010", "May", "31", 2 more...]
38
["2010", "June", "1", 2 more...]
39
["2010", "June", "2", 2 more...]
40
["2010", "June", "3", 2 more...]
41
["2010", "June", "4", 2 more...]
42
["2010", "June", "7", 2 more...]
43
["2010", "June", "8", 2 more...]
44
["2010", "June", "9", 2 more...]
45
["2010", "June", "10", 2 more...]
46
["2010", "June", "11", 2 more...]
47
["2010", "June", "12", 2 more...]
48
["2010", "June", "13", 2 more...]
49
["2010", "June", "14", 2 more...]
50
["2010", "June", "15", 2 more...]
51
["2010", "June", "16", 2 more...]
52
["2010", "June", "17", 2 more...]
53
["2010", "June", "18", 2 more...]
54
["2010", "June", "19", 2 more...]
55
["2010", "June", "20", 2 more...]
56
["2010", "June", "21", 2 more...]
57
["2010", "June", "22", 2 more...]
58
["2010", "June", "23", 2 more...]
59
["2010", "June", "24", 2 more...]
60
["2010", "June", "25", 2 more...]
61
["2010", "June", "26", 2 more...]
62
["2010", "June", "27", 2 more...]
63
["2010", "June", "28", 2 more...]
64
["2010", "June", "29", 2 more...]
65
["2010", "June", "30", 2 more...]
66
["2010", "July", "2", 2 more...]
67
["2010", "July", "3", 2 more...]
68
["2010", "July", "4", 2 more...]
69
["2010", "July", "5", 2 more...]
70
["2010", "July", "6", 2 more...]
[code]
71
["2010", "July", "7", 2 more...]
72
["2010", "July", "8", 2 more...]
73
["2010", "July", "9", 2 more...]
74
["2010", "July", "10", 2 more...]
75
["2010", "July", "12", 2 more...]
76
["2010", "July", "13", 2 more...]
77
["2010", "July", "14", 2 more...]
78
["2010", "July", "15", 2 more...]
79
["2010", "July", "16", 2 more...]
80
["2010", "July", "17", 2 more...]
81
["2010", "July", "19", 2 more...]
82
["2010", "July", "20", 2 more...]
83
["2010", "July", "21", 2 more...]
84
["2010", "July", "22", 2 more...]
85
["2010", "July", "23", 2 more...]
86
["2010", "July", "24", 2 more...]
87
["2010", "July", "26", 2 more...]
88
["2010", "July", "27", 2 more...]
89
["2010", "July", "28", 2 more...]
90
["2010", "July", "29", 2 more...]
91
["2010", "July", "30", 2 more...]
92
["2010", "August", "5", 2 more...]
93
["2010", "August", "7", 2 more...]
94
["2010", "August", "9", 2 more...]
95
["2010", "August", "10", 2 more...]
96
["2010", "August", "11", 2 more...]
97
["2010", "August", "13", 2 more...]
98
["2010", "August", "14", 2 more...]
99
["2010", "August", "16", 2 more...]
100
["2010", "August", "30", 2 more...]
101
["2010", "August", "31", 2 more...]
102
["2010", "September", "1", 2 more...]
103
["2010", "September", "2", 2 more...]
104
["2010", "September", "10", 2 more...]
105
["2010", "September", "14", 2 more...]
106
["2010", "September", "17", 2 more...]
107
["2010", "September", "27", 2 more...]
108
["2010", "October", "27", 2 more...]
109
["2010", "October", "28", 2 more...]
110
["2010", "October", "29", 2 more...]
111
["2011", "April", "05", 2 more...]
112
["2011", "April", "06", 2 more...]
113
["2011", "April", "07", 2 more...]
114
["2011", "April", "08", 2 more...]
115
["2011", "April", "09", 2 more...]
116
["2011", "April", "10", 2 more...]
117
["2011", "April", "11", 2 more...]
118
["2011", "April", "12", 2 more...]
119
["2011", "April", "13", 2 more...]
120
["2011", "April", "14", 2 more...]
121
["2011", "April", "15", 2 more...]
122
["2011", "April", "16", 2 more...]
123
["2011", "April", "17", 2 more...]
124
["2011", "April", "18", 2 more...]
125
["2011", "April", "19", 2 more...]
126
["2011", "April", "20", 2 more...]
127
["2011", "April", "21", 2 more...]
128
["2011", "April", "22", 2 more...]
129
["2011", "April", "23", 2 more...]
130
["2011", "April", "24", 2 more...]
131
["2011", "April", "25", 2 more...]
132
["2011", "April", "26", 2 more...]
133
["2011", "April", "27", 2 more...]
134
["2011", "April", "28", 2 more...]
135
["2011", "April", "29", 2 more...]
136
["2011", "April", "30", 2 more...]
137
["2011", "May", "01", 2 more...]
138
["2011", "May", "02", 2 more...]
139
["2011", "May", "03", 2 more...]
[/code]
I have also checked the output using:
[code]
$.get("forecast_centre/csv/tab_ui_1/daily_flood_reports/daily_flood_reports.csv", function (data) {
csv_flood_reports = $.csv()(data);
for (x in csv_flood_reports) {
str += "\n" + csv_flood_reports[x];
}
console.log(str);
[/code]
Everything looks fine. I forgot to mention that dataTables successfully loads the data, I receive the message of unknown columns before the tables are loaded.
I am perplexed why in 1.6.2 I don't receive this error but do in 1.7.6, other than you added more safe checking. I guess you don't advise to just remove/comment out the alert message?
Thanks again for all your support with this.
[code]
0
"Year,Month,Day,English,French"
[/code]
That is just a string rather than an array - hence the warning form DataTables. I've suggest just shifting that element off the array.
Allan