Cómo actualizar manualmente la tabla de tablas de datos con nuevos datos JSON


98

Estoy usando el complemento jQuery datatables y cargo mis datos que he cargado en DOM en la parte inferior de la página e inicia el complemento de esta manera:

var myData = [
    {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe"
    }
];

$('#table').dataTable({
    data: myData
        columns: [
        { data: 'id' },
        { data: 'first_name' },
        { data: 'last_name' }
    ]
});

Ahora. después de realizar alguna acción, quiero obtener nuevos datos usando ajax (pero no la opción ajax incorporada en las tablas de datos, ¡no me malinterpretes!) y actualizar la tabla con estos datos. ¿Cómo puedo hacer eso usando la API de tablas de datos? La documentación es muy confusa y no encuentro una solución. Cualquier ayuda será muy apreciada. Gracias.


¿Qué tal eliminar el cuerpo de la tabla existente y crearlo nuevo?
Reportero

Respuestas:


177

SOLUCIÓN: (Aviso: esta solución es para tablas de datos versión 1.10.4 (por el momento) no versión heredada).

ACLARACIÓN Según la documentación de la API (1.10.15), se puede acceder a la API de tres formas:

  1. La definición moderna de DataTables (mayúscula camel):

    var datatable = $( selector ).DataTable();

  2. La definición heredada de DataTables (minúsculas en camello):

    var datatable = $( selector ).dataTable().api();

  3. Usando la newsintaxis.

    var datatable = new $.fn.dataTable.Api( selector );

Luego cargue los datos así:

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

Referencias de API:

https://datatables.net/reference/api/clear ()

https://datatables.net/reference/api/rows.add ()

https://datatables.net/reference/api/draw ()


4
Esto fue demasiado difícil de encontrar, ¡muchas gracias! Usar esto para conservar la tabla de datos entre viajes de ida y vuelta al servidor.
Doug

¿Qué pasa con la versión 1.9.4 de tablas de datos? Estoy enfrentando el mismo problema en eso
Hardik Masalawala

4
Solo quiero agregar que también puede encadenar los métodos (es decir datatable.clear().rows.add(newDataArray).draw()). A partir de este comentario, estoy usando la versión 1.10.18
Sal_Vader_808

¿Cómo puedo agregar una columna con el botón de control
ajinkya

30

Puedes usar:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

Actualizar. Y sí, la documentación actual no es tan buena, pero si está bien utilizando versiones anteriores, puede consultar la documentación heredada .


Sí, tienes razón, pero estoy usando la última versión de tablas de datos. De todos modos, encontré una solución y actualicé mi pregunta. Gracias por su interés :)
Indy

1
@CookieMan, elimine su edición y publíquela como respuesta. Después de eso, márquelo como aceptado.
Reportero

esta solución no actualiza la sección de paginación
Alok Deshwal

8

Debe destruir la instancia antigua de la tabla de datos y luego reinicializar la tabla de datos

Primero verifique si existe una instancia de tabla de datos usando $ .fn.dataTable.isDataTable

si existe, destrúyalo y luego cree una nueva instancia como esta

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });

5

Aquí está la solución para la tabla de datos heredada 1.9.4

    var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);

Esto funciona para la versión reciente (por favor, considere la fecha del comentario). ¡Gracias Vikas!
Telmo

Esto funcionó para mí. Pero no entiendo por qué puedo usar todos estos ejemplos: var datatable = $ (selector) .DataTable (); var tabla de datos = $ (selector) .dataTable (). api (); var tabla de datos = nuevo $ .fn.dataTable.Api (selector); Pero al agregar .row (). Add () no funciona.
Fernando Palma

4

En mi caso, no estoy usando la api ajax incorporada para alimentar Json a la tabla (esto se debe a un formato que fue bastante difícil de implementar dentro de la devolución de llamada de procesamiento de la tabla de datos).

Mi solución fue crear la variable en el alcance externo de las funciones de carga y la función que maneja la actualización de datos ( var table = nullpor ejemplo).

Luego creo una instancia de mi tabla en el método de carga

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

y finalmente, en la función que maneja la actualización, invoco el método clear () y destroy (), obtengo los datos en la tabla html y vuelvo a crear una instancia de la tabla de datos, como tal:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

¡Espero que alguien encuentre esto útil!


2
Destruir toda la mesa en cada viaje de ida y vuelta es bastante caro y el estado también se pierde. Debe considerar la respuesta aceptada donde se mantiene el estado de la tabla.
nhaberl
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.