removing the duplicate link inside the datatable

I have got a nested datatable, I am adding a link in the inner data table. When I try to click another row, it duplicated the links.

jsfiddle

var settings = {
  "iDisplayLength": 20,
  "bLengthChange": false,
  "bFilter": true,
  "bSort": true,
  "bInfo": false,
   "drawCallback" : function() {
                       		var appendDownloadLink = $("table table td .dataTables_filter label");
                        		appendDownloadLink.each(function(i, e) {
                        		  $(e).before('<a class="take" href>Export departments</a>');
                           });
                           
                            $(".take").on("click", function(e){
                   	   console.log("export links");
                   	   e.preventDefault();
                         circuit = $(this).closest('tr').prev('tr').children('td').eq(1).text();
                         console.log(circuit);
                         hpath = "exportCircuits?organisationID="+"hello"+"&interfaceName="+circuit;
                         console.log(hpath);
                         $(this).attr("href", hpath);

                   });
                           
                           
                         }
};

var table = new nestedTables.TableHierarchy("example", dataInJson, settings);
table.initializeTableHierarchy();

Open in new window


How I can remove the duplication of the link ?
Yakup KAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
On line 10 you have this:

$(e).before('<a class="take" href>Export departments</a>');

And that's called each time you do a redraw, so after you've ran it once, the content includes the link. The next time you run it, you're adding a link before the existing content (which now includes the link that was drawn the first time).

It might be easier to change your HTML so you have an empty DIV (div class="links" for example) that you can write the links to, and then you can just do:

var appendDownloadLink = $("table table td .dataTables_filter .links");
appendDownloadLink.each(function(i, e) {
    $(e).html('<a class="take" href>Export departments</a>');
});

Open in new window

Now each time you do a redraw, you're just setting the HTML of your .links container.
Chris StanyonWebDevCommented:
Actually, looking at your code, it seems that the HTML is generated by the plugin, so you probably can't generate your own. If that's the case, then change your JS to look something like this:

var appendDownloadLink = $("table table td .dataTables_filter");
appendDownloadLink.each(function(i, e) {
    var label = $('label', e);
    $(e).html('<a class="take" href>Export departments</a>').append(label);
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971MultitechnicianCommented:
try this :
var settings = {
    "iDisplayLength": 20,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": false,
    "drawCallback" : function() {
        var appendDownloadLink = $("table table td .dataTables_filter label");
        appendDownloadLink.each(function(i, e) {
            $(e).before('<a class="take" href>Export departments</a>').on("click", function(e){
                console.log("export links");
                e.preventDefault();
                circuit = $(this).closest('tr').prev('tr').children('td').eq(1).text();
                console.log(circuit);
                hpath = "exportCircuits?organisationID="+"hello"+"&interfaceName="+circuit;
                console.log(hpath);
                $(this).attr("href", hpath);

            });;
        });
    }
};

var table = new nestedTables.TableHierarchy("example", dataInJson, settings);
table.initializeTableHierarchy();

Open in new window

Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Yakup KAuthor Commented:
Thanks a lot Chris. That works fine.
Chris StanyonWebDevCommented:
No worries
Yakup KAuthor Commented:
var appendDownloadLink = $("table table td .dataTables_filter");
                        		appendDownloadLink.each(function(i, e) {
                        		  
                        		  var label = $('label', e);
                        		  $(e).html('<a class="export-circuits" href target="_blank">Export circuits</a>').append(label);
                        		 
                        			   
                        		  $(".export-circuits").on("click", function(e){
                                  	  
                                 
                                        circuit = $(this).closest('tr').prev('tr').children('td').eq(1).text();
                                     
                                        hpath = "exportCircuits?organisationID="+getbusinessID+"&interfaceName="+circuit;
                                        console.log(hpath);
                                        $(this).attr("href", hpath);
                                       

                                  });
                        		
                        		 
                                 });
                        		
                         }

Open in new window


The link updates href correctly. But, it does not work on the left click. it works on right click without any issues. Do you have any ideas ?
Chris StanyonWebDevCommented:
Not sure what you mean by not working on the left click, but ok on the right click. You haven't bound any events to the right click, and you'll need to explain what you mean by doesn't work on the left!
Yakup KAuthor Commented:
Thanks Chris for your quick respond. When you click on the anchor link, it updates the href, but it does not go to the locations. On the other side, when you right click on the same element, it works correctly and download csv files on the href.
Chris StanyonWebDevCommented:
Still not understanding you. What does the right-click have to do with this at all.

And when you left click on the anchor, where does it take you?
Yakup KAuthor Commented:
It works fine now. Thanks a lot for your help.
Yakup KAuthor Commented:
Sorry Chris, it's me again :).

var appendDownloadLink = $("table table td .dataTables_filter");
appendDownloadLink.each(function(i, e) {
    var label = $('label', e);
    $(e).html('<a class="take" href>Export departments</a>').append(label);
});

Open in new window


This solution works fine on the Chrome. But,on IE 11, it removes the search textbox inside label.

<label>Search:<input type="search" class="" placeholder="" aria-controls="nested-datatable-covertab_0_row_1_tab_0_row_0_tab_0"></label>

Open in new window

On the IE11 it removes the content of the label for some reasons.
<label></label>

Open in new window


Any recommendations for this would be highly appreciated.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.