upgrading and other issues part 1

sonicbug

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.

sonicbug

[code]
$(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]

allan

1. Can you show us your CSV data - it must have 5 elements in each row array. My guess is that some rows will have 4 or 6 elements in them.

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

sonicbug

[code]

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]

sonicbug

The above is only a portion of my csv file. I tried to paste the entire contents of the csv file, but the form complained that it was 2790 characters too long.


I'll see if I can setup a test environment on jsFiddle to share with you. Thanks again.

allan

They all look absolutely fine. I wonder if it would be worth looping over the parsed CSV array and checking the length of each of the inner arrays - might be quicker and more accurate than looking manually!

Allan

sonicbug

Firebug output part 1

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...]

sonicbug

firebug output 2

[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]

sonicbug

Hi Allan:

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.

allan

Given your data it looks like this one is the source of the problem:

[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

sonicbug

Thanks Allan. The error has disappeared, however, the sorting broke now.