¿Cómo volver a cargar los datos de la tabla de datos (jquery)?

Question

¿Cómo volver a cargar la pestaña seleccionada? En realidad tengo un problema con la recarga de la pieza. Cuando agregue mis datos, los guardaré con éxito en la tabla de datos, pero en el campo de ID de la base de datos muestra la identificación adecuada, pero cuando agrego el detalle, no muestra la identificación en la tabla de datos.

(antes de actualizar la pestaña de resumen) aquí hay un ejemplo que muestra algo como esto en datatable id patient husband age ........... etc. ... '' xyz abc 23 .... ... así sucesivamente ...

(después de actualizar manualmente) pero cuando actualizo mi página se muestra con éxito ... como esta en datatable: id patient husband age ........... etc. ... 13 xyz abc 23 ....... así sucesivamente ...

Pero exactamente quiero que cuando agregue mis detalles debería actualizar automáticamente la pestaña seleccionada.

Mi código es el siguiente:

<button type="button" a href="javascript:void(0);" onclick="fnClickAddRow();">Add Summary</button> 

function fnClickAddRow(event) { 

$('#table_scroll').dataTable().fnAddData([ 

$('#patientt').val(),$('#husband').val(),$('#age').val(),$('#opu_no').val(),$('#date').val(),$('#proc').val(),$('#no_of_eggs').val(),$('#fert').val(),$('#et_date').val(),$('#et_day').val(),$('#et').val(),$('#fz').val(),$('#bioch_preg').val(),$('#clin_preg').val(),$('#fh').val(),$('#comment').val() 

]); 


var datastring = $(Form_summary).serialize(); 

$.ajax({ 
    type: "POST", 
    url: "summaryajax.php", 
    data: datastring, 
    success: function(response){ 

alert(response); 

    } 
    }); 

también cansada este enfoque, pero sin éxito.

Quiero que mi tabla de datos para actualizar los datos

function fnClickAddRow(event) { 

var datastring = $(Form_summary).serialize(); 

$.ajax({ 
    type: "POST", 
    url: "summaryajax.php", 
    data: datastring, 
    success: function(response){ 
     $('#table_scroll').dataTable().fnAddData( 
      [resposne, $('#patientt').val(), $('#husband').val(),$('#age').val(), 
      $('#opu_no').val(), $('#date').val(),$('#proc').val(), $('#no_of_eggs').val(), 
      $('#fert').val(),$('#et_date').val(), $('#et_day').val(), $('#et').val(), 
      $('#fz').val(), $('#bioch_preg').val(), $('#clin_preg').val(), $('#fh').val(), 
      $('#comment').val() ]); 
    } 
}); 

Answer 1

Se puede utilizar esta función:

function RefreshTable(tableId, urlData) 
    { 
     //Retrieve the new data with $.getJSON. You could use it ajax too 
     $.getJSON(urlData, null, function(json) 
     { 
     table = $(tableId).dataTable(); 
     oSettings = table.fnSettings(); 

     table.fnClearTable(this); 

     for (var i=0; i<json.aaData.length; i++) 
     { 
      table.oApi._fnAddData(oSettings, json.aaData[i]); 
     } 

     oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 
     table.fnDraw(); 
     }); 
    } 

'No se olvide de llamar después su función de eliminación ha succeded.

Fuente: http://www.meadow.se/wordpress/?p=536

Answer 2

// Get the url from the Settings of the table: oSettings.sAjaxSource 

function refreshTable(oTable) { 
    table = oTable.dataTable(); 
    oSettings = table.fnSettings(); 

    //Retrieve the new data with $.getJSON. You could use it ajax too 
    $.getJSON(oSettings.sAjaxSource, null, function(json) { 
     table.fnClearTable(this); 

     for (var i=0; i<json.aaData.length; i++) { 
      table.oApi._fnAddData(oSettings, json.aaData[i]); 
     } 

     oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 
     table.fnDraw(); 
    }); 
} 

Answer 3

Uso the fnReloadAjax() por el autor DataTables.net.

estoy copiando el código fuente abajo - en caso de que el original nunca se mueve:

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) 
{ 
    if (typeof sNewSource != 'undefined' && sNewSource != null) 
    { 
     oSettings.sAjaxSource = sNewSource; 
    } 
    this.oApi._fnProcessingDisplay(oSettings, true); 
    var that = this; 
    var iStart = oSettings._iDisplayStart; 
    var aData = []; 

    this.oApi._fnServerParams(oSettings, aData); 

    oSettings.fnServerData(oSettings.sAjaxSource, aData, function(json) { 
     /* Clear the old information from the table */ 
     that.oApi._fnClearTable(oSettings); 

     /* Got the data - add it to the table */ 
     var aData = (oSettings.sAjaxDataProp !== "") ? 
      that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json; 

     for (var i=0 ; i<aData.length ; i++) 
     { 
      that.oApi._fnAddData(oSettings, aData[i]); 
     } 

     oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 
     that.fnDraw(); 

     if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) 
     { 
      oSettings._iDisplayStart = iStart; 
      that.fnDraw(false); 
     } 

     that.oApi._fnProcessingDisplay(oSettings, false); 

     /* Callback user function - for event handlers etc */ 
     if (typeof fnCallback == 'function' && fnCallback != null) 
     { 
      fnCallback(oSettings); 
     } 
    }, oSettings); 
} 

/* Example call to load a new file */ 
oTable.fnReloadAjax('media/examples_support/json_source2.txt'); 

/* Example call to reload from original file */ 
oTable.fnReloadAjax(); 

Answer 4

Si nada funciona! Haga lo siguiente:

ejemplo:

<div id="tabledisplay"><table class="display" id="table"></table><table </div> 

cómo volver a la mesa:

$('#tabledisplay').empty(); 
$('#tabledisplay').append("<table class=\"display\" id=\"table\"></table>"); 
initTable("tablename"); 

initTable es sólo un método, que inicializa la tabla getJSON.

Answer 5

Se puede utilizar un enfoque simple ...

$('YourDataTableID').dataTable()._fnAjaxUpdate(); 

va a actualizar los datos al hacer una petición ajax con los mismos parámetros. Muy simple.

Answer 6

Estoy publicando esto en caso de que alguien lo necesite ..

Basta con crear un botón:

<button type="button" href="javascript:void(0);" onclick="mytable.fnDraw();">Refresh</button> 

pero no se olvide de añadir este al llamar a la tabla de datos:

mytable = $("#mytable").dataTable(); 

Answer 7

más simple solución:

var dt = $('#table_scroll').dataTable(); 

$.getJSON(url, null, function (json) { 
    dt.fnClearTable(); 
    dt.fnAddData(json.aaData); 
    dt.fnDraw(); 
}); 

Answer 8

Ninguno de estas soluciones funcionó para mí, pero lo hice algo similar a la respuesta de Masood. Aquí está para la posteridad. Esto supone que usted tiene en su página <table id="mytable"></table> alguna parte:

function generate_support_user_table() { 
     $('#mytable').hide(); 
     $('#mytable').dataTable({ 
      ... 
      "bDestroy": true, 
      "fnInitComplete": function() { $('#support_user_table').show(); }, 
      ... 
     }); 
} 

Las partes importantes son:

1. bDestroy, lo que elimina la tabla actual antes de la carga.
2. La llamada hide() y fnInitComplete, lo que garantiza que la tabla solo aparece después de cargar todo. De lo contrario, cambia el tamaño y se ve raro durante la carga.

Simplemente agregue la llamada a la función $(document).ready() y debe estar todo listo. Primero cargará la tabla, y luego volverá a cargarla con un clic de botón o lo que sea.

Answer 9

para recargar los datos de la tabla de fuente de datos Ajax, utilizar la siguiente función:

dataTable.ajax.reload() 

Dónde dataTable es la variable que se utiliza para crear la tabla.

var dataTable = $('#your_table_id').DataTable({ 
    ajax: "URL" 
}); 

Consulte ajax.reload() para obtener más información.

Answer 10

Para las versiones más recientes utilizan:

var datatable = $('#table').dataTable().api(); 

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

Tomado de: https://stackoverflow.com/a/27781459/4059810