Why is the table.destroy() property not working?

sub30

I have a function which fetches data from the db(firestore) and creates a array of objects to feed to a datatable (myTable).

     $("#getdata").click(function()
            {

                $('#myTable').DataTable().destroy();


                 $('body').loadingModal('show');
                var ref,cat,dt,noc2;
                cat=$("#customertyp1 option:selected").val();
                dt=$("#debttyp1 option:selected").val();
                noc2=$("#noc option:selected").val();
               ref=db.collection("debt");
                if(cat!="All")
                   ref=ref.where("debtorcatagory", "==", cat);
                    if(dt!="All")
                        ref=ref.where("type1","==",dt);
                     if(noc2!="Multiple")  
                        ref=ref.where("noc","==",noc2);

           ref.onSnapshot(function(querySnapshot) {
                var temp = [];
                querySnapshot.forEach(function(doc) {
                    temp.push(doc.data());

                });
                console.log(temp);
             //datatables here


                 var table=$('#myTable').DataTable( {
                data:temp,
                "columns": [
                    { data: "name" },
                    {data:"contactno"},
                    { data: "balance" },
                    {data:"lastcommdate"},
                    {data:"lastcommdetails"},
                    {data:"setreminder"},
                 {
              "data": null,
              "defaultContent": "<button>Update</button>",

            }
                ],
                      dom: 'Bfrtip',

                      buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                      "destroy": true,
                  responsive: true,
            } );

               $('#myTable tbody').on('click', 'tr', function () {
                //var data = 

                    console.log(this.cells[1].innerHTML);
                   //console.log(data);
                   //lstbtnval=data.contactno;
               $('#myModal2').modal('toggle');

            } );

                $('body').loadingModal('hide');
            });


         });

If the get data button is clicked once without refreshing the page the outcome is perfect.But whenever I click the getdata button multiple times the view of the table is as desired but on click of the default update button here:
` $('#myTable tbody').on('click', 'tr', function () {
//var data =

                                                    console.log(this.cells[1].innerHTML);
                                                   //console.log(data);
                                                   //lstbtnval=data.contactno;
                                               $('#myModal2').modal('toggle');

                                            } );`

The log console.log(this.cells[1].innerHTML); is repeated the number of times the getdata button is clicked. I have already tried table.clear().redraw(); and table.empty() but neither works.

colin

Hi @sub30 ,

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

kthorngren

Looks like you have the event $('#myTable tbody').on('click', 'tr', function () { inside the getdata function. Each time you call the function it will add another event handler for that click event resulting in it running multiple times. You can either turn it of then back on like this $('#myTable tbody').off().on('click', 'tr', function () { or move it outside the function so it runs once.

Kevin