React datatable.net keeps throwing NotFoundError: Failed to execute 'removeChild' on 'Node': The nod

edmundm

I have a datatable i am initiliazing within the ajax callback. It works fine on initial load. When I try to redo the table, it keeps throwing the below error:

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

$.ajax({
url: 'https://localhost:44363/api/ShoppingItemsApi/GetShoppingItem/' + groupId,
success: function (data) {

                this.setState({
                    shoppingItems: data.shoppingItemsResponse,
                    loading: false
                });
                DataConfig.prototype.InitializeDataTables();
            }.bind(this)
        })
        } catch (error) {
        debugger;
        console.log(error);

Initilization is like below

public InitializeDataTables() {

  DataTableFilter = {};
 var that = this;

this.hideToggleDisplay();
var datatables = $('#dataTable');

  var rows: any = datatables.attr('data-rowlength');

isPageChange = false;
  $('#dataTable').on('page.dt', function () {
    isPageChange = true;
    $('.dataTables_paginate').show();
});

if (datatables.length > 0) {
    var showPagignation:any = ($('#dataTable tbody tr').length >parseInt(rows));

    //add options and targets to the datatable
     DataTableFilter.tableFilter = datatables.DataTable({
        // "dom": '<"top"iflp>rt<"bottom"iflp><"clear">',
        "dom": '<"top"ip>rt<"bottom"ip><"clear">',
         "drawCallback": function (settings) {
             that.removePaginationForEmptyDataTable();
            that.removePaginationForTwoRowsDataTable();
         },
         destroy: true,
         //retrieve: true,
        "pageLength":6,
        "paging": showPagignation,
        "pagingType": "simple_numbers",
         "info": showPagignation,
        "autoWidth": false,
         "ordering": false,
       // fixedHeader: true,
        "search": { regex: true },
       // "scroller": false,
        //"bInfo": showPagignation,

        "columnDefs": [{
            "targets": 'hidden',
            "visible": false
        },
        {
            "targets": 'nosort',
            "orderable": false
        }, {
            "targets": 'nosearch',
            "searchable": false
        }]
    });

colin

There's nothing obvious there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

edmundm

Hi colin,

Thank you. I have been struggling for the past 3 days.

1. Initially i was calling my datatable initilisation on the within the componentDidMount() as below:

componentDidMount()
{
DataConfig.prototype.InitializeDataTables();
}

I kept getting the No data available error.

1. I read an article which suggested that I move the initilization within my ajax call, since the datatable was not yet loaded.
   I did the following:

   getShoppingItems = async (groupId: number) => {

   fetch('https://localhost:44363/api/ShoppingItemsApi/GetShoppingItem/' + groupId) //+ $("#CategoryID").val()
       .then(response => response.json())
       .then(data => {
   
           _self.setState({
               shoppingItems: data.shoppingItemsResponse,
               loading: false, stillRendering: false
           });
   
           DataConfig.prototype.InitializeDataTables();
       });
   

   }

This only works for the first load, when I do click a link, and try to call the _self.seState I keep getting the error: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

1. My datatable Initialization is as follows:

   public InitializeDataTables() {

   DataTableFilter = {};
   var that = this;
   this.hideToggleDisplay();
   var datatables = $('#dataTable');

   var rows: any = datatables.attr('data-rowlength');

   isPageChange = false;
   $('#dataTable').on('page.dt', function () {
   isPageChange = true;
   $('.dataTables_paginate').show();
   });

   if (datatables.length > 0) {
   var showPagignation:any = ($('#dataTable tbody tr').length >parseInt(rows));

   //add options and targets to the datatable
    DataTableFilter.tableFilter = datatables.DataTable({
       // "dom": '<"top"iflp>rt<"bottom"iflp><"clear">',
       "dom": '<"top"ip>rt<"bottom"ip><"clear">',
        "drawCallback": function (settings) {
            that.removePaginationForEmptyDataTable();
           that.removePaginationForTwoRowsDataTable();
        },
        destroy: true,
        stateSave: true,
        //retrieve: true,
       "pageLength":6,
       "paging": showPagignation,
       "pagingType": "simple_numbers",
        "info": showPagignation,
       "autoWidth": false,
        "ordering": false,
      // fixedHeader: true,
       "search": { regex: true },
      // "scroller": false,
       //"bInfo": showPagignation,
   
       "columnDefs": [{
           "targets": 'hidden',
           "visible": false
       },
       {
           "targets": 'nosort',
           "orderable": false
       }, {
           "targets": 'nosearch',
           "searchable": false
       }]
   });
   

   }

   $('.paginate_button.previous').empty()
   $('.paginate_button.next').empty();

}

1. I am buidling my table dynamically as below:

edmundm

private buildDataTable(shoppingItems: model.ShoppingItemsModel[]) {
var that = this;
return (

{shoppingItems.map(function (item, index) { return ( ) })}

{parse(item.heading)} Price: R{item.price} {parse(that.ellipsis(item.description))} Qty: {that.getbuttonTextOnReload(item.id)}

    );

}

edmundm

Please find my test case:

http://live.datatables.net/yijiyaco/1/ I have included my react javascript componet

edmundm

Another link is the below. I have included the datatable initiliazation and the one where I am loading the datatable.

https://codepen.io/edmundm/project/editor/XVWjab

datatable.js is the initilization file.
buildreact.datatable.js is where im loading consuming the data

colin

Thanks for the test case, but it's not running. Could you link to a page demonstrating the error please, that'll help diagnose it,

Colin

edmundm

Thank you. I manage to solve the problem. Not sure if it is the correct way. I have menu, so when ever I was clicking on the menu, I was initializing the datatable again. I ended up filtering everytime I click on the menu. So I only initialize it when I load for the first time, menu click only filters it.