Multiple jQuery Datatables on same page

Question

I have two jQuery datatables on the same ascx page. I'm trying to insert a hyperlink into the toolbar div, which calls a link in the code behind, after the table has been rendered. Here's the code:

           var SDFtable = $('#tblSDF').dataTable(
            {
                "scrollY": "300px",
                "scrollX": true,
                "scrollCollapse": true,
                "paging": false,
                "autowidth": true,

                dom: '<"toolbar"><"filterPad"f>rti<"floatRight"B><"clear">',

                //all available button options
                //'copy', 'csv', 'excel', 'pdf', 'print'

                buttons: {
                    buttons: [
                        { extend: 'excel', text: 'Download this grid in Excel', exportOption: { page: 'current' }, footer: true }
                    ]
                }

            });

          $("div.toolbar").html('<h2><a id="aSDFExport" title="Click here to download full report" OnServerClick="ExportFundingSummaryToExcel"  runat="server">SDF Pool</a></h2>');

The problem is that I have two of these blocks of code, one for each table, and when the second $("div.toolbar") line runs, it adds that link to both datatables. How can I reference that specific to the table that is being drawn?

Thanks in advance.

Maybe this might help stackoverflow.com/questions/7827986/… — morne
– morne, Commented Aug 11, 2016 at 12:35

Mustapha Larhrouch · Accepted Answer · 2016-08-11 12:38:13Z

1

try this:

$("#tblSDF_wrapper div.toolbar").html('<h2><a id="aSDFExport" title="Click here to download full report" OnServerClick="ExportFundingSummaryToExcel"  runat="server">SDF Pool</a></h2>');

answered Aug 11, 2016 at 12:38

Mustapha Larhrouch

3,4053 gold badges16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TrevorGoodchild Over a year ago

Got it, still picking up on jQuery element traversal, thanks for the help!

Mike Lambert · Accepted Answer · 2016-08-11 12:39:09Z

1

Try this:

$('#tblSDF').find("div.toolbar").html('<h2><a id="aSDFExport" title="Click here to download full report" OnServerClick="ExportFundingSummaryToExcel"  runat="server">SDF Pool</a></h2>');

answered Aug 11, 2016 at 12:39

Mike Lambert

528 bronze badges

Collectives™ on Stack Overflow

Multiple jQuery Datatables on same page

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related