Più DataTable sulla stessa pagina con diverse fonti Ajax

Question

Ho diverse tabelle su una singola pagina utilizzando dataTables. Ciascuno ha bisogno di avere il proprio 'sAjaxSource'. Non riesco a capire esattamente come farlo. Ecco il codice minimo che ho:

  var oTable = $('.datatable').dataTable({ 
             "bProcessing": true, 
             "sAjaxSource": "/ajax/function", 
       "bSort": false, 
       "fnDrawCallback": function() { 
         //some click events initilized here 
       } 
         }); 

Questa è fondamentalmente la configurazione dell'osso nudo. Ogni tabella come classe datatable e un ID univoco. Ma non sono sicuro di come modificare AjaxSource, in base a una tabella specifica.

Grazie!

EDIT:

Ecco quello che ho finito per fare:

 $('.datatable').each(function(index){ 

       $('#'+$(this).attr('id')).dataTable({ 
             "bProcessing": true, 
       "sAjaxSource": $(this).children('caption').html(), 
       "bSort": false, 
       "fnDrawCallback": function() { 
       } 
         }); 
     }); 

all'interno della tabella ho messo un tag didascalia che è nascosto dal CSS e contiene l'URL di origine Ajax. Itera su ogni istanza e prende l'url.

Questo sembra funzionare fino ad ora!

Answer 1

Non funziona? Utilizza l'id piuttosto che la classe per identificare in modo univoco ciascuna tabella di dati e allega un'origine separata a ciascuna tabella in base all'ID.

var oTable = $('#FirstDataTableID').dataTable({ 
      "bProcessing": true, 
      "sAjaxSource": "/ajax/function", 
      "bSort": false, 
      "fnDrawCallback": function() { 
        //some click events initilized here 
      } 
     }); 

    var oTable = $('#SecondDataTableID').dataTable({ 
      "bProcessing": true, 
      "sAjaxSource": "/ajax/other_function", 
      "bSort": false, 
      "fnDrawCallback": function() { 
        //some click events initilized here 
      } 
     }); 

Answer 2

Si avrebbe bisogno di selezionare ogni tavolo sperately e applicare l'origine dati Ajax opportuno al fine per voi per ottenere quello che ti serve. In questo momento si sta selezionando in base al nome della classe:

$(".dataTable") 

avrà probabilmente bisogno di essere convertito in:

$("#dataTable1") 

Credo che questo otterrà noioso se si dispone di un sacco di tavoli, ma che è piuttosto è l'unico modo in cui puoi fare ciò che stai proponendo di fare.

Answer 3

Ho avuto lo stesso problema, che ho risolto utilizzando un HTML5 dati- attributo e l'inizializzazione di codice simile al tuo:

$('.dataTableServer').each(function() { 
     var source = $(this).attr("data-source"); 
     $(this).dataTable({ 
      "sPaginationType": "full_numbers", 
      "bProcessing": true, 
      "bServerSide": true, 
      "sAjaxSource": source 
     }); 
    }); 

in questo modo non c'è bisogno di creare un ID per ogni dataTable

Answer 4

Puoi usarne due o più sulla stessa pagina. L'ho fatto e i datatables funzionano abbastanza bene. Datatables memorizza i dati localmente anche i record sono stati rimossi da esso in modo asincrono. Quindi dobbiamo chiarire sempre di mostrare il risultato corretto quando abbiamo cercato i record rimossi. Dato che i datatables devono essere inizializzati solo una volta, dobbiamo tenere a mente, per ogni datatable sulla stessa pagina dobbiamo continuare a inizializzare i datables perché stanno memorizzando i record locali come non lo vogliamo perché sulla stessa pagina memorizziamo/mostra dati diversi.

Così. Dobbiamo usare il metodo coeso come

$("#Id_of_Current_DTBL").DataTable().destroy(); 
$("#Id_of_Other1_DTBL").DataTable().clear(); 
$("#Id_of_Other2_DTBL").DataTable().clear(); 

Questo risolve il problema.