Avatar of Yakup K
Yakup K
 asked on

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 ?
JavaScriptjQuery* datatat

Avatar of undefined
Last Comment
Yakup K

8/22/2022 - Mon
Chris Stanyon

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.
ASKER CERTIFIED SOLUTION
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
leakim971

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

Yakup K

ASKER
Thanks a lot Chris. That works fine.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Chris Stanyon

No worries
Yakup K

ASKER
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 Stanyon

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!
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Yakup K

ASKER
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 Stanyon

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 K

ASKER
It works fine now. Thanks a lot for your help.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Yakup K

ASKER
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.