web-dev-qa-db-fra.com

Comment recharger les données datatable (jquery)?

Comment recharger l'onglet sélectionné? En fait, j'ai un problème avec la partie de rechargement. Lorsque j'ajoute mes données, je suis enregistré avec succès dans la table de données, mais dans le champ id de la base de données, il affiche l'ID approprié, mais lorsque j'ajoute le détail, il ne montre pas l'ID dans la table de données.

(avant de rafraîchir l'onglet récapitulatif) voici un exemple qui montre quelque chose comme ça en âge de mari patient id id ........... ainsi de suite ... '' xyz abc 23 ....... so sur...

(après rafraîchissement manuel) mais lorsque je rafraîchis ma page, elle s'affiche avec succès .. comme ceci dans la table de données: id patient mari age ........... ainsi de suite ... 13 xyz abc 23 ..... .. bientôt...

Mais exactement, je veux que lorsque j'ajoute mes détails, il devrait actualiser automatiquement l'onglet sélectionné.

Mon code est ci-dessous:

<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);

    }
    });

J'ai aussi fatigué cette approche mais sans succès.

Je veux que ma table de données rafraîchisse les données

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() ]);
    }
});
jquerydatatables
18
gur

Vous pouvez utiliser une approche simple ...

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

Il rafraîchira les données en faisant une requête ajax avec les mêmes paramètres. Très simple.

27
Elior Cohen

Vous pouvez utiliser cette fonction:

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();
      });
    }

N'oubliez pas de l'appeler après votre fonction de suppression a réussi.

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

19
Edgar Villegas Alvarado

Utilisez le fnReloadAjax () par l'auteur de DataTables.net.

Je copie le code source ci-dessous - au cas où l'original se déplacerait jamais:

$.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();
13
Alexander Farber

Solution plus simple:

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

$.getJSON(url, null, function (json) {
    dt.fnClearTable();
    dt.fnAddData(json.aaData);
    dt.fnDraw();
});
7
Onur Yıldırım

Si quelque chose fonctionne! Faites ceci:

exemple:

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

comment recharger la table:

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

initTable est juste une méthode qui a initialisé la table avec getJSON.

6
Masood Moshref

Aucune de ces solutions n'a fonctionné pour moi, mais j'ai fait quelque chose de similaire à la réponse de Masood. Le voici pour la postérité. Cela suppose que vous avez <table id="mytable"></table> Quelque part dans votre page:

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

Les parties importantes sont:

  1. bDestroy, qui efface la table courante avant le chargement.
  2. L'appel hide() et fnInitComplete, ce qui garantit que la table n'apparaît qu'après que tout est chargé. Sinon, il redimensionne et semble étrange lors du chargement.

Ajoutez simplement l'appel de fonction à $(document).ready() et vous devriez être prêt. Il chargera la table initialement, ainsi que rechargera plus tard sur un clic de bouton ou autre chose.

3
Josh
// 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();
    });
}
2
Martin

Je poste ceci juste au cas où quelqu'un en aurait besoin ..

Créez simplement un bouton:

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

mais n'oubliez pas d'ajouter ceci lors de l'appel du datatable:

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

Pour recharger les données de la table depuis la source de données Ajax, utilisez la fonction suivante:

dataTable.ajax.reload()

Où dataTable est la variable utilisée pour créer la table.

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

Voir ajax.reload() pour plus d'informations.

1
Pablo Palladino

Pour les versions plus récentes, utilisez:

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

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

Tiré de: https://stackoverflow.com/a/27781459/405981

1
ChrisE