jquery - ejemplos - examples datatable

Deshabilitar la llamada ajax automática inicial-paginación del lado del servidor de DataTable

Question

Tengo una tabla de datos inicializada con la paginación del lado del servidor y está funcionando bien. Esta tabla dispara ajax, extrae datos y se procesa en la tabla durante la inicialización. Sin embargo, necesito una tabla vacía inicialmente y cargar los datos de la tabla al hacer clic en un botón usando load () o reload () como

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

Aquí está mi inicialización de la mesa:

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

¿Debería haber una forma de restringir la carga de la tabla durante la inicialización? Leí la documentación pero no pude encontrarla. Por favor recomiende.

Answer 1

Así es como inicialmente carga mi tabla de datos vacía en la carga de la página. Luego lo cargo con datos a través de ajax usando un eventListener. No pude encontrar ninguna documentación con la que jugué un poco y funciona como un amuleto.

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

    });
    }

NOTA: Podría agregar alguna lógica que seleccione una opción predeterminada si hay una que está disponible y no está deshabilitada.

Answer 2

Podría hacerlo con una solución al pasar un parámetro adicional con la URL para identificar el evento.

Por ejemplo, para la carga inicialicé la tabla de datos con action="load" como parámetro de consulta y para otra acción como búsqueda, pasando action="search" . Con esto, en el back-end, podré identificar el origen de la llamada. Si es algo distinto de "load" , estoy extrayendo los datos y pasando (como la implementación es ahora). De lo contrario (si es "cargar"), entonces estoy pasando datos vacíos, que me mostrarán el mensaje "No Data Found" como si no hubiera realizado la llamada ajax.

Aquí está mi código - Inicialización de tabla:

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

Para eventos que no sean de carga (por ejemplo, haga clic en el botón):

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

Este fue el que tuve que aceptar sin modificaciones a la tabla init que causaría errores.

Gracias a @JSelser y @davidkonrad por todas sus sugerencias :)

Answer 3

Podría usar el parámetro deferLoading y establecerlo en 0 . Esto demorará la carga de datos hasta que un filtro, una acción de clasificación o el dibujo / recarga de Ajax ocurra mediante programación.

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

Para activar el Ajax cuando se hace clic en el botón, puede tener algo como lo siguiente en el controlador:

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

Vea el ejemplo a continuación para la demostración.

$(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>