removing the duplicate link inside the datatable

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>');
});

Select allOpen in new window

Now each time you do a redraw, you're just setting the HTML of your .links container.

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();

Select allOpen in new window

Thanks a lot Chris. That works fine.

No worries

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);
                                       

                                  });
                        		
                        		 
                                 });
                        		
                         }

Select allOpen 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 ?

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!

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.

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?

It works fine now. Thanks a lot for your help.

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);
});

Select allOpen 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>

Select allOpen in new window

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

<label></label>

Select allOpen in new window

Any recommendations for this would be highly appreciated.