jQuery dynamic DataTables reload
<p>In my Laravel app, I have multiple pages where I have DataTables. They all have the class "mydttable". I load data into the DataTables using Ajax.
On each row of each table I have a column with a delete button. Whenever I press is, I execute a delete on the respective row, <code>then I want to reload the data into the datatable</code>. I can do that by questioning which tabel had the button on it using if statements, but I am wondering if there is a simpler method to do this reload.
More exactly...</p>

<p>is my custom.js, I do the dataTable populating like bellow:</p>

<pre><code>var uzTable = $('#users').DataTable( {
                "processing": true,
                "serverSide": true,
                "sAjaxSource": "sspXController?draw=1",
...
});

var cliTable = $('#clients').DataTable( {
                "processing": true,
                "serverSide": true,
                "sAjaxSource": "sspXController2?draw=1",
...
});

var marTable = $('#market').DataTable( {
                "processing": true,
                "serverSide": true,
                "sAjaxSource": "sspXController3?draw=1",
...
});
</code></pre>

<p>and now, the on delete click event, where I do the delete and want to do the <strong>reloading</strong></p>

<pre><code>$( document ).on('click', '.ssDelete', function(e){
                e.preventDefault();
                $.ajax({
                    url:    someFormAction,
                    type:   'POST',
                    dataType: 'html',
                    success:function(data) {
                        $(".mydttable").ajax.reload();
                    }

});
</code></pre>

<p>and my HTML is something like:</p>

<pre><code>&lt;table id="users" class="row-border hover order-column table mydttable dataTable no-footer" cellspacing="0" width="100%"&gt;
                            &lt;thead&gt;
                                &lt;tr role="row"&gt;
                                   &lt;th class="small-sorting" style="width:84px"&gt;&lt;/th&gt;
                                   &lt;th class="small-sorting" style="width:84px"&gt;Operatiuni&lt;/th&gt;
                                &lt;/tr&gt;
                            &lt;/thead&gt;
                            &lt;tbody&gt;
                                &lt;tr&gt;
                                    &lt;td&gt;&lt;/td&gt;
                                    &lt;td&gt;&lt;/td&gt;
                                &lt;/tr&gt;
                            &lt;/tbody&gt;            
                        &lt;/table&gt;
</code></pre>

<p>Of course, the above HTML is just the one for the first DataTable ("users"), there is HTML code for the other tables also, but I wont paste it here to avoid making this question excessively long.
Also at any given time, there is <strong>ONLY ONE dataTable</strong> displayed in View (html)</p>

<p>So when I click on any button with the ssDelete ID, I delete the current record of the currently shown dataTable, and I want to refresh the dataTable that contains the delete buttons. And since I did not do a delete function for each table separately, I would like to be able to also do things shorter for ajax reloading.</p>

<p>So, my goal is to be able to reload any DataTable that is loaded in the document when the "#ssDelete" button is clicked, without the need of additional asignments and conditionals...
And my attempt is not working:</p>

<pre><code> success:function(data) {
     $(".mydttable").ajax.reload(); // NOT WORKING
 ... 
</code></pre>

<p>How can I do this?
<strong>EDIT</strong>
People seem to not read my entire question, so I will repeat here the essence of it:
I need to be able to have ONLY ONE function for deleting records from multiple dataTables. In order to do that (the delete part is DONE and WORKING already) I need to be able to refresh/reload the contents of the VISIBLE dataTable. And I need to do that without having to test what table is visible.
Based on the fact that all my dataTables share the same class, I should be able to invoke a generic dataTable and apply to it the ajax.reload() function. But it does not work. I need a way to access whatever dataTable is in the current VIEW, using some generic way... something like:</p>

<pre><code>$(".mydttable").ajax.reload();
</code></pre>

<p>or</p>

<pre><code>$('.mydttable').dataTable().fnReloadAjax();
</code></pre>

<p>or</p>

<pre><code>$('.mydttable').DataTable().ajax.reload();
</code></pre>

<p>Apparently if I do this, jQuery is trying to execute a function on a regular Table element, and not on a dataTable conversion of the Table.
If I try to apply DataTable() to the element like above, I will get :</p>

<blockquote>
  <p>Uncaught TypeError: Cannot read property 'reload' of undefined</p>
</blockquote>

<p>Here is my ajax call so far (also not working):</p>

<pre><code>                var idtable = $('.mydttable').attr('id');
                $.ajax({
                    url:    myFormAction,
                    type:   'POST',
                    cache:  false,
                    data : { _token: csrf_token, _method:'DELETE' },
                    dataType: 'html',
                    success:function(data) {
                        $('#DeleteModalDialog').modal('hide');
                        if(idtable=='users'){
                            alert('uzerii');
                            uzTable.ajax.reload();
                        }else if(idtable=='clients'){
                            alert('Clients');
                            cliTable.ajax.reload();
                        }else if(idtable=='market'){
                            alert('Market');
                            marTable.ajax.reload();
                        }
                    }
                });
</code></pre>

<p>So the reloading does not happen, even if I get the Alert, so it knows what is the visible table's ID. (The uzTable,cliTable and marTable are jquery vars as seen above)</p>

<p>What is wrong with my code...?How can I solve this?</p>