Data tables unable to select newly added rows after refresh

RaghuJonnala

My data table configuration via debugger is here:-
**http://debug.datatables.net/ecinil**

Also code is posted below in case:

Whenever a new table with more rows is drawn only the number of rows equal to previous table are clickable or mouseenter(Hover) event works.

I mean suppose I loaded table with 4 rows, clicked a row which will reload the new data set for table. Table got loaded with 8 rows. But now I will be able to select only top 4 rows. Rest all will result in error on chrome console
Uncaught TypeError: Cannot read property '_aData' of undefined.

Any help in this regard is greatly appreciable.

Thank you

``` $("#filterdata_table body").empty();

var table = $('#filterdata_table').DataTable({
    "dom": '<"row"<"col-xs-12"f>><"row"<"col-xs-12"<"chart chart-table"t>>><"row"<"col-xs-4"i><"col-xs-4"p><"col-xs-4"l>>',
    "bDestroy": true,
    "length": false,
    "ordering":false,    
    'fnCreatedRow': function (nRow, aData, iDataIndex) {
        $(nRow).attr('id', aData["Campaigns"]);
    },
    'ajax': {
        "url": WebAPIURL + "api/GetNonSponsorFilterData",
        "type": "POST",
        data: function (d) {
            return JSON.stringify(NonSponsorData);
        },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        "dataSrc": function (json) {
            var return_data = new Array();
            return_data[0] = {
                'Campaigns': "Totals",
                'AppUse': numeral(json.totals.AppUsageTotal).format('0,0'),
                'FiltersSeen': numeral(json.totals.FiltersSeenTotal).format('0,0'),
                'PhotosTaken': numeral(json.totals.PhotosTakenTotal).format('0,0'),
                'UsedCamera': numeral(json.totals.UsedCameraTotal).format('0,0'),
                'UsedGallery': numeral(json.totals.UsedGalleryTotal).format('0,0'),
                'SocialShare': numeral(json.totals.SocialShareTotal).format('0,0'),
                'Impressions': numeral(json.totals.ImpressionsTotal).format('0,0'),
                'Filter_id': json.totals.Filter_id,
                'Campaign_id': json.totals.Campaign_id,
                'FilterImageUrl': json.totals.FilterImageUrl,
                'isCampaign': json.totals.isCampaign,
                'Campaign_name': json.totals.Campaign_name,
                'Filter_name': json.totals.Filter_name
            };
            for (var i = 0, j = 1;i < json.items.length; i++,j++) {
                return_data[j] = {
                    'Campaigns': json.items[i].Name,
                    'AppUse': numeral(json.items[i].AppUse).format('0,0'),
                    'FiltersSeen': numeral(json.items[i].FiltersSeen).format('0,0'),
                    'PhotosTaken': numeral(json.items[i].PhotosTaken).format('0,0'),
                    'UsedCamera': numeral(json.items[i].UsedCamera).format('0,0'),
                    'UsedGallery': numeral(json.items[i].UsedGallery).format('0,0'),
                    'SocialShare': numeral(json.items[i].SocialShare).format('0,0'),
                    'Impressions': numeral(json.items[i].Impressions).format('0,0'),
                    'Filter_id'  : json.items[i].Filter_id,
                    'Campaign_id': json.items[i].Campaign_id,
                    'FilterImageUrl': json.items[i].FilterImageUrl,
                    'isCampaign': json.items[i].isCampaign,
                    'Campaign_name': json.items[i].Campaign_name,
                    'Filter_name': json.items[i].Filter_name
                }
            }

            //console.log(return_data);
            return return_data;
        }
    },
    "columns": [
        { "data": "Campaigns" },
        { "data": "AppUse" },
        { "data": "FiltersSeen" },
        { "data": "PhotosTaken" },
        { "data": "UsedCamera" },
        { "data": "UsedGallery" },
        { "data": "SocialShare" },
        { "data": "Impressions" },
        { "data": "Filter_id" },
        { "data": "Campaign_id" },
        { "data": "FilterImageUrl" },
        { "data": "isCampaign" },
        { "data": "Campaign_name" },
        { "data": "Filter_name" },
    ]


});

// Row Click Event
//The :gt() selector selects elements with an index number higher than a specified number.
//The index numbers start at 0.
// tr:gt(0) will make first row unclickable
//tr:gt(0)
**$('#filterdata_table').delegate('tbody tr:gt(0)', 'click', function () {

    //console.log("Campaign_id  " + table.row(this).data().Campaign_id); // This will also give hidden column data for the row.
    //console.log("Filter_id  " + table.row(this).data().Filter_id);

    //Update NonSponsor object's filter_id and campaign_id

    NonSponsorData.filter_id = 0;
    NonSponsorData.campaign_id = 0;

    //console.log(table.row(this).data());

    if (table.row(this).data().isCampaign === true) {
        console.log("I am campaign");
        NonSponsorData.campaign_id = table.row(this).data().Campaign_id;
        NonSponsorData.filter_id = 0;
    }

    if (table.row(this).data().isCampaign === false) {
        console.log("I am filter");
        NonSponsorData.campaign_id = table.row(this).data().Campaign_id;
        NonSponsorData.filter_id = table.row(this).data().Filter_id;
    }

    // Update search bar
    document.getElementById("hdnFilterTblClickedCampaign").value = table.row(this).data().Campaign_name;
    document.getElementById("hdnFilterTblClickedFilter").value = table.row(this).data().Filter_name;

    document.getElementById("filter-image").src = table.row(this).data().FilterImageUrl;

    console.log("Campaign_id  " + table.row(this).data().Campaign_id); 
    console.log("Filter_id  " + table.row(this).data().Filter_id);
    console.log("I am in GetFilterData()");

    // reload non-sponsor tab
    RefreshDashboardData(); ----> **Function which refreshes '#filterdata_table datatable**
});**


**// Hover over event
$('#filterdata_table')
    .delegate('tbody tr:gt(0)', 'mouseenter', function () {
        if (table.row(this).data().isCampaign === false) {
            //console.log(table.row(this).data());
            var img = '<img class="img-responsive" src=' + table.row(this).data().FilterImageUrl + '/>';
            $(this).popover({ content: img, placement: 'top', html: true, trigger: 'hover' });

            $(this).popover("show");
        }

    } );**  ```

allan

Uncaught TypeError: Cannot read property '_aData' of undefined.

I don't see how you are adding the new data to the DataTable. Are you using the api - row.add() for example?

Allan