Múltiples tablas de datos en la misma página con diferentes fuentes Ajax

Question

Tengo varias tablas en una sola página usando dataTables. Cada uno debe tener su propio 'sAjaxSource'. Parece que no puedo entender exactamente cómo hacer esto. Aquí está el código mínimo que tengo:

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

Esto es básicamente la configuración básica. Cada tabla como la clase de tabla de datos y una ID única. Pero no estoy seguro de cómo cambiar AjaxSource, en base a una tabla específica.

¡Gracias!

EDIT:

Esto es lo que terminé haciendo:

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

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

Dentro de la mesa me puso una etiqueta de leyenda que se esconde por css y contiene la URL de la fuente Ajax. Se repite en cada instancia y toma la url.

¡Esto parece funcionar hasta ahora!

Answer 1

¿Esto no funciona? Utiliza el ID en lugar de la clase para identificar de forma única cada tabla de datos y agrega una fuente separada a cada tabla basada en el 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

Usted tendría que seleccionar cada mesa sperately y aplicar la fuente de datos Ajax apropiada a ella con el fin para que usted pueda obtener lo que necesita. En este momento usted está seleccionando basado en el nombre de clase:

$(".dataTable") 

probablemente tendrá que ser convertido a:

$("#dataTable1") 

supongo que esto va a resultar tedioso si usted tiene un montón de mesas, pero que es bastante la única forma en que puedes hacer lo que estás proponiendo hacer.

Answer 3

he tenido el mismo problema, que he resuelto utilizando un código HTML5 Data- atributo e inicialización similar a la suya:

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

de esa manera usted no tiene que crear un identificador para cada dataTable

Answer 4

Puede usar dos o más que eso en la misma página. Lo he hecho y datatables funciona bastante bien. Datatables almacena los datos localmente, incluso los registros se eliminaron de forma asincrónica. Por lo tanto, debemos dejar claro siempre que se muestra el resultado correcto cuando buscamos en los registros eliminados. Como las tablas de datos deben inicializarse solo una vez, debemos tener en cuenta que, para cada tabla de datos en la misma página, debemos seguir inicializando los datables porque almacenan los registros locales ya que no queremos eso porque en la misma página almacenamos/muestra diferentes datos

So. Tenemos que usar el método cohesivamente como

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

Esto resolverá el problema.