Deaktivieren Sie den anfänglichen automatischen Ajax-Aufruf – Paging auf DataTable-Serverseite

Lesezeit: 7 Minuten

Ich habe eine dataTable mit serverseitigem Paging initialisiert und es funktioniert einwandfrei. Diese Tabelle löst Ajax aus, zieht Daten und rendert während der Initialisierung in die Tabelle. Ich brauche jedoch zunächst eine leere Tabelle und lade Tabellendaten auf Knopfdruck mit load() oder reload() wie:

myTable.api().ajax.reload();

Hier ist meine Tabelleninitialisierung:

function initTestTable(){
    myTable =  $('#testTable').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "testTableData.html",
        "type": "GET",
    },
    "columns": [
        { "data": "code" },
        { "data": "description" }
    ]
 });
}

Es sollte eine Möglichkeit geben, das Laden der Tabelle während der Initialisierung einzuschränken? Ich habe die Dokumentation gelesen, aber nicht gefunden. Bitte vorschlagen.

  • Also … konnten Sie es zum Laufen bringen?

    – JSelser

    2. Juli 2015 um 13:56 Uhr

  • @JSelser – Ja, indem ich die Problemumgehung zum Übergeben von Anforderungsparametern verwende, um den Ereignisursprung zu identifizieren, kann ich es zum Laufen bringen. Bitte beachten Sie die von mir unten geposteten Antwortdetails. Ich frage mich immer noch, warum deferLoading hat bei mir nicht funktioniert. Vielen Dank 🙂

    – JavaJugend

    3. Juli 2015 um 1:39 Uhr

  • Ich habe die Lösung gefunden, sehr einfach, folgen Sie diesem Link: stackoverflow.com/a/41831416/7463452

    – Luis Enrique Gomes Portugal

    24. Januar 2017 um 16:12 Uhr

  • Verwenden Sie diese Lösung zum erneuten Laden von Daten mit Ajax mit demselben url: stackoverflow.com/a/57113353/1676736

    – Sagte Abolfazl Fatemi

    19. Juli 2019 um 13:20 Uhr

Benutzer-Avatar
JSelser

Du könntest die verwenden aufschiebenLaden Parameter und setzen Sie ihn auf 0. Dadurch wird das Laden von Daten verzögert, bis ein Filter, eine Sortieraktion oder ein Zeichnen/Neuladen von Ajax programmgesteuert erfolgt.

function initTestTable(){
    myTable =  $('#testTable').dataTable({
    "processing": true,
    "serverSide": true,
    "deferLoading": 0, // here
    "ajax": {
        "url": "testTableData.html",
        "type": "GET",
    },
    "columns": [
        { "data": "code" },
        { "data": "description" }
    ]
 });
}

Um den Ajax auszulösen, wenn auf die Schaltfläche geklickt wird, können Sie im Handler Folgendes haben:

function buttonClickHandler(event){
  $('#testTable').DataTable().draw();
}

Siehe Beispiel unten zur Demonstration.

$(document).ready(function() {
  // AJAX emulation for demonstration only
  $.mockjax({
      url: '/test/0',
      responseTime: 200,
      response: function(settings){
         this.responseText = {
            draw: settings.data.draw,
            data: [
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ]
            ],
            recordsTotal: 1000,
            recordsFiltered: 1000
         };
      }
  });

  $('#example').DataTable({    
    "processing": true,
    "serverSide": true,
    "deferLoading": 0,
    "ajax": {
        "url": "/test/0",
        "type": "GET"
    }    
  });
      
  $('#btn-reload').on('click', function(){
     $('#example').DataTable().draw()  
  });
});
<!DOCTYPE html>
<html>

<head>
<meta charset="ISO-8859-1">
<link href="https://cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
  
</head>
<body>
<p>
<button id="btn-reload">Reload</button>
</p>
<table id="example" class="display" cellspacing="0" width="100%">

<thead>
   <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
   </tr>
</thead>

<tfoot>
   <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
   </tr>
</tfoot>

<tbody>
</tbody>
</table>
</body>
</html>

  • “deferLoading”: 0, macht keinen Unterschied. Ich bekomme immer noch meine Tabelle auf Init geladen.

    – JavaJugend

    2. Juli 2015 um 4:12 Uhr

  • Kann mit neu laden myTable.api().ajax.reload();aber ich brauche meine Tabelle beim Laden leer – was bei “deferLoading” nicht passiert: 0

    – JavaJugend

    2. Juli 2015 um 4:16 Uhr

  • Es funktioniert nicht? Seltsam, diese Option geht speziell auf Ihre Bedürfnisse ein, sie sollte funktionieren … Versuchen Sie, die zu ändern deferLoading Wert ab 0 zu [0]

    – JSelser

    2. Juli 2015 um 4:20 Uhr

  • Ich habe alle Optionen ausprobiert, aber kein Glück. Ja es sieht so komisch aus. Auch gestern habe ich diese Option ausprobiert.

    – JavaJugend

    2. Juli 2015 um 4:32 Uhr

  • Scheint deferLoading ist in dataTables 1.10 verfügbar, aber nicht 1.9 oder niedriger. In 1.9 oder niedriger ist es iDeferLoading.

    – Benutzer9645

    7. November 2016 um 19:36 Uhr


Benutzer-Avatar
JavaJugend

Ich könnte es mit einer Problemumgehung tun, indem ich einen zusätzlichen Parameter mit der URL übergebe, um das Ereignis zu identifizieren.

Zum Beispiel habe ich für on load die Datentabelle mit initialisiert action="load" als Abfrageparameter und für andere Aktionen wie die Suche, übergebe ich action="search". Damit kann ich am Backend den Ursprung des Anrufs identifizieren. Wenn es etwas anderes ist als "load", ich ziehe die Daten und übergebe (wie die Implementierung jetzt ist). Andernfalls (falls “load”) übergebe ich leere Daten, die mir angezeigt werden "No Data Found" Nachricht, als hätte sie den Ajax-Aufruf nicht getätigt.

Hier ist mein Code – Tabelleninitialisierung:

function initTestTable(){
    myTable =  $('#testTable').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "testTableData.html?action=load",
        "type": "GET",
    },
    "columns": [
        { "data": "code" },
        { "data": "description" }
    ]
 });
}

Für andere Ereignisse als Laden (z. B. Schaltflächenklick):

    var newUrl="testTableData.html?action=search";
    myTable.api().ajax.url(newUrl).load();

Dies war diejenige, die ich ohne Änderungen an der Tabelleninitialisierung übernehmen musste, die Fehler verursachen würden.

Danke @JSelser und @davidkonrad für all eure Vorschläge 🙂

  • Das ist zu komplex, deferLoading sollte gut funktionieren. Siehe das Beispiel, das ich zu @JSelser answer hinzugefügt habe, das DataTables 1.10.5 verwendet.

    – Gyrocode.com

    2. Juli 2015 um 10:39 Uhr


Benutzer-Avatar
yardpenalty.com

So lade ich zunächst meine leere dataTable beim Laden der Seite. Dann lade ich es mit Daten über Ajax mit einem eventListener. Ich konnte keine Dokumentation finden, ich habe nur irgendwie damit herumgespielt und es funktioniert wie ein Zauber.

ref-Dateien – dataTables.js, table-advanced.js

$(document).ready(function(){
   option = "I";
  // pick a table list or something
  $("#dropdownList").on("change", function(){
      option = $('option:selected:not(:disabled)',this).val();
    if($.fn.DataTable.isDataTable('#table_001')){
       $('#table_001').dataTable().fnDestroy();
       InitDataTable(option); 
     }
     else{
       InitDataTable("disabled");   
     }    
    });

     //add/delete/update a row maybe?
     $("#signupForm #add_btn").on("click",function(e){
       if($("#signupForm").valid()){
            var oTable1 = $('#table_001').DataTable(); ///load .ajax structure 
             //Successful Submit!
             oTable1.ajax.reload(); 
            $("#note").html(<img src="https://stackoverflow.com/images/loading.gif" alt="loading">');
        }
     });

     //On draw occurs everytime you call table.ajax.reload(); 
     $('#table_001').on( 'draw.dt', function () { 
            if(option !== "I")
                  var evtname = $('select[name="EVENT"] option:selected:not(:disabled)').text();

            if(evtname !== undefined)
                $("#event_name").html("The " + evtname + " Signup Sheet").addClass("xs-small");
            // keep track of values for table input fields on each draw
            $("[aria-controls="table_001"][type="search"]").attr('hth_orig',$("            [aria-controls="table_001"][type="search"]").val());
            //Don't initialize on draw 
            TableAdvanced.init('table_001','N');
});


  var InitDataTable = function(choice){

            var oTable1 = $('#table_001').dataTable( {
                "processing": true,
                "serverSide": true,
                "lengthMenu": [10,25,50,100], // records pulldown
                "iDisplayLength": 25, // # records to initially display
                "ajax": {
                    "url": "http://www.domain.com",
                    "data": function (d) { // pass additional        
                                d.user = user; 
                                d.choice = choice; 
                                d.cols = "15"; // TOTAL <td> tags per <tr> tag  
                    },
                    // Load attendee total and pending total sections 
                    complete: function (d) {
                        recordstotal = d.responseJSON.recordsTotal;
                        attendeetotal = d.responseJSON.attendeeTotal;
                        //console.log(JSON.stringify(d.responseJSON.data));
                        if ( attendeetotal == '0') {
             $("#totalAttendees").html("No one has signed up for this event yet");
                        }
                        else {
        $("#totalAttendees").html("Event Total: " +  attendeetotal + " attendees");                     
                        }  
                        $("#add-atn").removeClass("hidden");
                    } 
                }, 
                // insert code to execute after table has been redrawn
                "fnDrawCallback": function( oSettings ) {
                    // Column filtering
                    var table = $('#table_001').DataTable();
                    $("#table_001 tfoot th").each( function ( i ) { // i = 0,1...
                        if($.trim($(this).html()) != '') {
                            save_html = $(this).html();
                            $(this).empty(); 
                            var select = $(save_html)
                            .appendTo( this )
                            .on( 'change', function () {
               table.column( i, { filter: 'applied'                }).search($(this).val()).draw();
                            }); 
                            $("#table_001 tfoot th:eq("+i+") input").val(save_value);
                        } 
                    });     
                    //console.log($("#table_001 tfoot th").length);
                 },

                "columns": [// set "data" to next sequential number in double quotes
                        {"data":"0",// Set "name" to field name that will be refd
                        "name": "skip"},        
                        {"data":"1", 
                        "name": "skip"}, 
                        {"data": "2",
                        "name": "skip"},
                        {"data":"3", 
                        "name": "lname"},
                        {"data":"4", 
                        "name": "fname"}
                          {"data":"5",
                           "name": "skip"}
                ],      
                "columnDefs": [                    
                        // what columns should be hidden?       
                        {
                        "targets": [1], // what element starting with 0
                        "class":"hidden" // class to attach to <td>
                        },
                        // what columns should NOT be sortable?       
                        {
                        "targets": [0,1,2,5,6,7,8,9,12,13,14], 
                        "sortable": false, // sortable?
                        },
                        // what columns should NOT be searchable?       
                        {
                        "targets": [0,1,2,6,7,8,9,12,13,14],  
                        "searchable": false, // searchable?
                        }
                ],  
                "createdRow": function( row, data, dataIndex ) { 
                    //manipulate the specific column in the row   
                     //$(row).addClass( 'form-group' ); 
                     // $('td', row).eq(2).addClass('form-group'); // Added to <td>

                 },
                // Specify initial sort order       
               "order": [[ '10', "desc" ],[ '11', "desc" ],['3',"asc"],['4',"asc"]]   
            });

            // handle 1st page table load initialization using 
            TableAdvanced.init('table_001','Y');

    });
    }

HINWEIS: Sie könnten eine Logik hinzufügen, die eine Standardoption auswählt, wenn eine verfügbar und nicht deaktiviert ist.

1257110cookie-checkDeaktivieren Sie den anfänglichen automatischen Ajax-Aufruf – Paging auf DataTable-Serverseite

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy