Adding a link on the nested data table

Yakup K
Yakup K used Ask the Experts™
on
I would like to add a download link, just before search box. I am using third level nested data table. This data creates dynamically on AJAX respond data.
I am using the following plugins;
Datatable
nested data table

 Second and third level of table is shown, when user click on the table rows. How I can add download link for the last level of the datatable ?

 var appendDownloadLink = $(".dataTables_filter");
    		                    
appendDownloadLink.prepend('<a class="download">Download</a>');

Open in new window


JSfiddle
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You need to add this to your drawCallback option in your settings
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="download">Download</a>');
    })
  }
};

Open in new window


What is happening? In your first attempt you were trying to bind to the table before it had been rendered. In the above setup the drawCallback function is called when the table has completed rendering. Now you can do your manipulation.
To get to the search in the 3rd level we need to discount the searches in the first two levels - hence the "table table" selector - after that we find the .dataTables_filter class and the label immediately after that.
Finally we add the link before the label.

Author

Commented:
Thanks a lot Julian. You are the best!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial