wake-up-neo.net

reload datable nach ajax erfolg

Ich verwende JQuery DataTable. Ich sende Daten an datatable onclick in json file bei ajax. Der erste Klick ist alles gut, aber beim nächsten Klick bekomme ich nur die richtigen Daten und falschen Wert von dataTables_info. Daraufhin wird immer der erste Wert von dataTables_info angezeigt erstes Ergebnis . Dies ist die erste Anzeige von Daten in datatable:

 The first Click

ALLE der nächste Klick Ich bekomme nur die richtigen Daten: Für dieses Beispiel sind sie ein Ergebnis, das in der folgenden Abbildung dargestellt wird, aber alles andere (Info, Show, Paginierung) gehört zur ersten Suche, die im ersten Bild angezeigt wird:  enter image description here

Im zweiten Beispiel Wenn ich auf eine beliebige Seite der Paginierung klicke, bekomme ich den Inhalt des ersten Seitenergebnisses !! Dies ist meine Funktion ONclick:

    $ ( '#ButtonPostJson' ).on('click',function() {

             $("tbody").empty();
             var forsearch = $("#searchItem").val();

    $.ajax({
        processing: true,
        serverSide: true,
        type: 'post',
        url: 'searchData.json',
        dataType: "json",
        data: mysearch,
       /* bRetrieve : true,*/

        success: function(data) {
            $.each(data, function(i, data) {
                var body = "<tr>";
                body    += "<td>" + data.name + "</td>";
               ..........................
               ..........................
                body    += "</tr>";
                $('.datatable-ajax-source table').append(body);

            })
        ;
            /*DataTables instantiation.*/
     $('.datatable-ajax-source table').dataTable();
    },

        error: function() {
            alert('Processus Echoué!');
        },
        afterSend: function(){
    $('.datatable-ajax-source table').dataTable().reload();
 /* $('.datatable-ajax-source table').dataTable({bRetrieve : true}).fnDestroy();    
    $(this).parents().remove(); 
$('.datatable-ajax-source table').dataTable().clear();*/
    }
    });
    });

Ich versuche alles und ich weiß nicht was ich vermisse ... Ich benutze diese Jquery für datable:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

Vielen Dank.

4
MedKostali

Dieser Link Daten in jQuery DataTables aktualisieren

ist sehr hilfreich, ich inspiriere davon, um mein Problem zu lösen.

1
MedKostali

Auf einem Knopfdruck müssen Sie Ihren Tabellenkörper nicht leeren und die Datierung mit dem Ajax erneut initiieren.

sie müssen lediglich Ihren ajax erneut anrufen, da Sie bereits die Funktion Dokument bereitstellen 

benutz einfach

$("#Table_id").ajax.reload();

Überprüfen Sie den Link unten, Sie haben eine bessere Idee.

https://datatables.net/reference/api/ajax.reload ()

Lass es mich wissen, wenn dir das nicht hilft

2
Punit Gajjar

verwenden Sie den folgenden Code .. es funktioniert einwandfrei, Sie behalten Ihre Seitenumbrüche, ohne die aktuelle Seite zu verlieren

$ ("# table-example"). DataTable (). ajax.reload (null, false);

0
salithlal

Ich habe diese einfache Funktion erstellt:

function refreshTable() {
  $('.dataTable').each(function() {
      dt = $(this).dataTable();
      dt.fnDraw();
  })
}

Ich hatte das gleiche Problem. Ich habe eine Funktion gefunden, die ich zu einem Projekt geschrieben habe, das sich damit beschäftigt. Hier ist eine einfache 2-Spalten-Tabelle, die ich erstellt habe.

<table id="memberships" class="table table-striped table-bordered table-hover"  width="100%">
        <thead>
            <tr>
                <th>Member Name</th>
                <th>Location</th>
            </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Member Name</th>
            <th>Location</th>
          </tr>
        </tfoot>
      </table>

Dies ist mein Skript, um es aufzufüllen:

function drawTable(){
var table = $('#memberships').DataTable();

table.destroy();

value = $("#memberName").val();
console.log("member name-->>" + value);
$('#memberships').DataTable({
responsive:true,
pageLength: 50,
ajax:{
    "url": `//BACKEND API CALL`,
    "type":"get",
    "dataSrc": 'members'//my data is in an array called members
},
columns: [
  {"data": "name_display" },
  {"targets": 0,
    "data": "membershipID",
    "render": function ( data, type, full, meta ) {
      return '<button type="button" class="btn btn-info btn-block" 
      onclick="editMember(' + data + ')">Edit Member</button><button 
      type="button" class="btn btn-danger btn-block" 
      onclick="deleteMember(' + data + ')">Delete</button>';
    }
  }
 ]
});
$.fn.dataTable.ext.errMode = 'none';
}

Sie können meine Spalten-Renderfunktion ignorieren. Ich benötigte zwei Schaltflächen basierend auf den zurückgegebenen Daten. Der Schlüssel war der table.destroy in der Funktion. Ich habe die Tabelle in einer Variablen namens Tabelle erstellt. Ich zerstöre es in dieser Initialisierung richtig, weil ich diese Funktion immer wieder verwenden konnte. Beim ersten Mal wird ein leerer Tisch zerstört. Jeder Aufruf zerstört danach die Daten und füllt sie mit dem Ajax-Aufruf auf. 

Hoffe das hilft.

0
sixstring

$("#Table_id").ajax.reload(); hat nicht funktioniert. 

Ich habe umgesetzt - 

var mytbl = $("#Table_id").datatable();
mytbl.ajax.reload;
0
Adarsh Madrecha