0

I have a couple of applications which use jquery 3.2.1 and DataTables 1.10.15.

In the first application - which all works fine - I made a reference to a single DataTable as follows:

var myTable = $('#myTable').DataTable({ ... });

If I need to reference that DataTable it's easy because I can do this:

var row = myTable.row(tr);

In the second application there are multiple DataTables on one page. The way in which these were created is using $.each() in jquery:

$.each($('table'), function () {
    var dt_id = $(this).attr('id');

    $('#' + dt_id).DataTable({ ... });
});

This targets each <table> which is present in the HTML present on page load. It creates a variable called dt_id which has the value of the ID of the <table>. It then initialises the DataTable on it.

So if, for example, I have 3 tables:

<table id="tableA"> ... </table>
<table id="tableB"> ... </table>
<table id="tableC"> ... </table>

I end up with 3 DataTables being initialised on ID's #tableA, #tableB and #tableC.

The problem I'm having is that outside the $.each() I want to be able to refer to a specific DataTable when the user clicks on a particular row inside it. So if for example the user clicks a <tr> inside #tableB I need a variable which refers to that table.

I don't know the best way of creating these in my code? I've read JavaScript Dynamic Variable Names and one option would be to dynamically create a variable name, e.g.

$.each($('table'), function () {
    var dt_id = $(this).attr('id');

    var dynamicVar = $('#' + dt_id).DataTable({ ... });
});

But how do I create that dynamicVar at this point?

Another option I thought of would be to read the ID of the table that the user has clicked (e.g. If the user clicks a <tr> then find the ID of the parent <table>, e.g. #tableB). Not sure if that's viable and even if it is, how do you access .DataTable(...) from that?

IndexOutOfDevelopersException
  • 1,364
  • 7
  • 15
  • 28
Andy
  • 5,142
  • 11
  • 58
  • 131
  • 1
    You can get a reference to the Datatable after initialisation from the jQuery object: `var dtA = $('#tableA').DataTable(); var dtB = $('#tableB').DataTable();` – Rory McCrossan Sep 06 '19 at 10:11
  • @RoryMcCrossan ok, so is the best way then to try and identify the ID (`#tableA`) based on the `` the user has clicked and then use the snippet you provided? – Andy Sep 06 '19 at 10:11
  • 1
    Yes, if you have a reference to a clicked `tr`, then you can do `$(this).closest('table').DataTable()`, where `this` is the `tr` itself – Rory McCrossan Sep 06 '19 at 10:12
  • 1
    Here's the docs regarding accessing the DT from a jQuery object: https://datatables.net/manual/api#Accessing-the-API – Rory McCrossan Sep 06 '19 at 10:12
  • 1
    There's no need to select an element by ID when you already have the element itself. Just use `$(this)` instead of `$('#' + dt_id)` – Barmar Sep 06 '19 at 10:35
  • Couldn`t you create an object where you store the data tables by using the ID as its key. For example var myDictionnary = {}; Then in the $.each function myDictionnary[dt_id] = $('#' + dt_id).DataTable({ ... }); One more thing can you replace $('#' + dt_id) by $(this). If so you could get rid on the line var dt_id = $(this).attr('id'); – Eric Villemure Sep 06 '19 at 10:55

0 Answers0