upgrading and other issues part 1

upgrading and other issues part 1

sonicbugsonicbug Posts: 26Questions: 0Answers: 0
edited May 2011 in Bug reports
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.

Replies

  • sonicbugsonicbug Posts: 26Questions: 0Answers: 0
    [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]
  • allanallan Posts: 63,389Questions: 1Answers: 10,449 Site admin
    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
  • sonicbugsonicbug Posts: 26Questions: 0Answers: 0
    [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]
  • sonicbugsonicbug Posts: 26Questions: 0Answers: 0
    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.
  • allanallan Posts: 63,389Questions: 1Answers: 10,449 Site admin
    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
  • sonicbugsonicbug Posts: 26Questions: 0Answers: 0
    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...]
  • sonicbugsonicbug Posts: 26Questions: 0Answers: 0
    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]
  • sonicbugsonicbug Posts: 26Questions: 0Answers: 0
    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.
  • allanallan Posts: 63,389Questions: 1Answers: 10,449 Site admin
    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
  • sonicbugsonicbug Posts: 26Questions: 0Answers: 0
    Thanks Allan. The error has disappeared, however, the sorting broke now.
This discussion has been closed.