web-dev-qa-db-fra.com

Désactiver l'appel ajax automatique initial - pagination côté serveur DataTable

J'ai un dataTable initialisé avec la pagination côté serveur et cela fonctionne bien. Cette table déclenche ajax, extrait les données et rend sur la table lors de l'initialisation. Cependant, j'ai besoin de table vide et de charger les données de table en cliquant sur un bouton en utilisant load () ou reload () comme:

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

Voici mon initialisation de table:

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

Il devrait y avoir un moyen de limiter le chargement de la table lors de l'initialisation? J'ai lu la documentation mais je n'ai pas trouvé. Veuillez suggérer.

jqueryajaxdatatablesdatatables-1.10
24
JavaYouth

Vous pouvez utiliser le paramètre deferLoading et le définir sur 0. Cela retardera le chargement des données jusqu'à ce qu'un filtre, une action de tri ou un appel/rechargement Ajax se produise.

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

Pour déclencher le Ajax lorsque le bouton est cliqué, vous pouvez avoir quelque chose comme ceci dans le gestionnaire:

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

Voir l'exemple ci-dessous pour la démonstration.

$(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="//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="//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>

43
JSelser

Voici comment je charge initialement mon dataTable vide lors du chargement de la page. Ensuite, je le charge avec des données via ajax en utilisant un eventListener. Je ne trouvais aucune documentation avec laquelle je m'amusais un peu et ça fonctionne à merveille. 

fichiers ref - 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="/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');

    });
    }

REMARQUE: Vous pouvez ajouter une logique qui sélectionne une option par défaut s'il en existe une disponible et non désactivée.

0
yardpenalty

Je pouvais le faire avec une solution de contournement en passant un paramètre supplémentaire avec l'URL pour identifier l'événement. 

Par exemple, pour le chargement, j’ai initialisé la table de données avec action="load" en tant que paramètre de requête et pour d’autres actions telles que la recherche, je passe action="search". Ainsi, à l’arrière-plan, je pourrai identifier l’appel Origin. S'il s'agit de quelque chose d'autre que "load", je vais extraire les données et les transmettre (car l'implémentation est maintenant). Sinon (si "load"), alors je passe des données vides, ce qui me montrera le message "No Data Found" comme s'il n'avait pas effectué l'appel ajax.

Voici mon code - Initialisation de la table:

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

Pour les événements autres que charger (par exemple, cliquer sur un bouton):

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

C’était celui que je devais prendre sans modifications à la table init, ce qui causerait des erreurs.

Merci @JSelser et @davidkonrad pour toutes vos suggestions :)

0
JavaYouth