We help IT Professionals succeed at work.

removing the duplicate link inside the datatable

Yakup K
Yakup K asked
on
85 Views
Last Modified: 2019-03-06
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 ?
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
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

Author

Commented:
Thanks a lot Chris. That works fine.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
No worries

Author

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 ?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
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!

Author

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.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
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?

Author

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

Author

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.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.