jQuery Girl
  1. jQuery Girl
  3. Comment actualiser jquery datatable après avoir supprimé une ligne
Intereting Posts
jQuery animer la position d’arrière-plan, ne fonctionnant pas dans ie Désactiver la fermeture de fancyBox 2 en cliquant sur l’arrière-plan Javascript Prototype General Enquries et Assign Id par tableau event.preventDefault (); ne fonctionne pas lors de la soumission du formulaire Datapicker autorise les dates invalides Ajout d’une classe CSS basée sur la position de défilement du navigateur avec jQuery – recherche d’une approche plus modulaire Sélectionnez2 désactiver / activer une option spécifique Pourquoi ma fonction onchange est-elle appelée deux fois lors de l’utilisation de .focus ()? Afficher la valeur de la firebase database dans un champ de texte créé dynamicment dans la table à l’aide de jQuery Direction de développement ancrée dans Google Chrome avec flexbox Comment simuler une fonction d’ajout de rappel? Comment obtenir un événement div onblur pour exécuter une fonction javascript? Voir le contenu du panier dans Fancybox, page vierge uniquement dans IE8 Exécuter les balises de script chargées avec ajax La fonction Javascript devrait être en marche à chaque chargement de page

Comment actualiser jquery datatable après avoir supprimé une ligne

Chaque ligne de la table de données comporte un bouton de suppression.

En cliquant sur le bouton de suppression, j’appelle ce code: 

$('.deleteButton').live('click', function () { var $this = $(this); var url = $this.attr("id"); $("#example").fnReloadAjax(); $.getJSON(url, Success()); });

L’URL est une action du contrôleur qui prend l’identifiant et supprime les données de la firebase database. Ça marche. Je souhaite maintenant appeler la fonction d’actualisation / redessinage de datatable afin qu’elle puisse charger de nouveaux résultats, mais que cela ne fonctionne pas.

Datatable est: 

  $("#example").dataTable({ "aoColumns": [ { "sTitle": "Id" }, { "sTitle": "Name" }], "bProcessing": true, "bServerSide": true, "sAjaxSource": '@Url.Action("FetchData", "Home")', "sPaginationType": "full_numbers", });

Quelqu’un peut-il s’il vous plaît des conseils?

Cité à partir de la page datatable de l’ API – sur la fnReloadAjax() :

Remarque: pour recharger des données lors de l’utilisation d’un traitement côté serveur, utilisez simplement la fonction API intégrée fnDraw plutôt que ce plug-in.

Ainsi, vous feriez probablement mieux d’utiliser fnDraw .

[EDIT] En fait, l’ordre de vos appels devrait être: 

 // you don't have to use $.json because you don't use the downloaded data // first, ask the server to delete the data $.ajax({ url: urlToDelete, success: function() { // if it worked, ask datatable to redraw the table with the new data $("#example").dataTable().fnDraw(); // if this js function does anything useful (like deleting the row), then call it: Success(); }, error: function() { // display any error (like server couldn't be reached...), or at least try to log it } });

J’ai pu résoudre ce problème avec une approche beaucoup plus simple que celle fournie dans les réponses ci-dessus.

Appel Ajax pour supprimer des données du backend

Tout d’abord, supprimez les données du backend en utilisant un appel ajax async normal.

Supprimer du frontend datatable

Obtenez la ligne TR que vous souhaitez supprimer et utilisez la fonction fnDeleteRow pour supprimer cette ligne. Cela actualisera automatiquement la table, vous n’aurez donc besoin ni de fnDraw ni d’autres éléments. 

 //in my case its delete button which was clicked //so I got its parents parent which is TR row var row = $(this).parent().parent(); $('DATA TABLE SELECTOR').dataTable().fnDeleteRow(row);

Et vous avez terminé .. 🙂

La réponse ici ne fonctionnait pas pour moi, alors j’ai utilisé ceci:

http://datatables.net/plug-ins/api#fnReloadAjax

Ajoutez ceci dans un fichier: 

 $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw ) { if ( sNewSource !== undefined && sNewSource !== null ) { oSettings.sAjaxSource = sNewSource; } // Server-side processing should just call fnDraw if ( oSettings.oFeatures.bServerSide ) { this.fnDraw(); return; } this.oApi._fnProcessingDisplay( oSettings, true ); var that = this; var iStart = oSettings._iDisplayStart; var aData = []; this.oApi._fnServerParams( oSettings, aData ); oSettings.fnServerData.call( oSettings.oInstance, 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

Incluez le fichier sur votre page et appelez comme ceci: 

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

Utiliser une instance de dataTable et supprimer une ligne de datatable 

 dataTable.fnDeleteRow($(that).closest('tr').remove()); dataTable.fnDraw();