禁用初始自动ajax调用 - DataTable服务器端分页

问题描述 投票：0回答：5

我有一个使用服务器端分页初始化的数据表，它工作正常。该表在初始化期间触发ajax、拉取数据并呈现到表上。但是，我最初需要空表，然后使用 load() 或 reload() 单击按钮加载表数据，例如：

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

这是我的表初始化：

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

应该有办法限制初始化时表的加载吗？我阅读了文档但找不到。请推荐。

jquery ajax datatables datatables-1.10
5个回答
88
投票

您可以使用 deferLoading 参数并将其设置为 

0
。这将延迟数据加载，直到以编程方式发生过滤、排序操作或绘制/重新加载 Ajax。

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

要在单击按钮时触发 Ajax，您可以在处理程序中添加类似以下内容：

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

请参阅下面的示例进行演示。

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

1
投票

我可以通过传递一个带有 URL 的额外参数来识别事件来解决此问题。

例如，对于加载时，我使用 

action="load"
作为查询参数初始化数据表，对于搜索等其他操作，我传递 
action="search"
。有了这个，我在后端将能够识别呼叫来源。如果它不是 
"load"
以外的任何内容，我将提取数据并传递（就像现在的实现一样）。否则（如果“加载”），那么我将传递空数据，这将向我显示
"No Data Found"
消息，就好像它没有进行ajax调用一样。

这是我的代码 - 表初始化：

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

对于加载以外的事件（例如按钮单击）：

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

这是我必须在不修改表初始化的情况下进行的操作，否则会导致错误。

感谢@JSelser 和@davidkonrad 的所有建议:)

0
投票

这就是我最初在页面加载时加载空数据表的方式。然后我使用 eventListener 通过 ajax 加载数据。我找不到任何文档，我只是玩了一下它，它就像一个魅力。

参考文件 - 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');

    });
    }

注意： 您可以添加一些逻辑来选择默认选项（如果有可用且未禁用的选项）。

0
投票

正确的（工作）方法是：

$(document).ready(function() {
  tableConfig = {
      pageLength: 5,  
      "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    };
  
  var table = $('#example').DataTable(tableConfig);

  $('#ajaxLoad').on('click', function() {
    tableConfig.ajax = {
      "url": "ajax/objects_root_array.txt",
      "dataSrc": ""
    };    
    
    table.destroy();
    table = $('#example').DataTable( tableConfig );
  })
} );

工作示例

来源

0
投票

近十年后，我再次回到这个话题……。 确实，我确实将服务器端和处理设置为 false，所以它有点不同，在我的情况下 defererLoading 对我没有帮助，但是！我想我找到了一个解决方案，可以禁用这两种情况的 init 调用，但稍后会按预期工作，例如按下按钮，不需要一些带有 bool 的自定义逻辑或一遍又一遍地破坏表。

function initTestTable(){
   myTable =  $('#testTable').dataTable({
      initComplete: function(settings) {
         settings.ajax = {
             "url": "testTableData.html",
             "type": "GET",
         }
      }
   });
}

这样，ajax 在 init 之后设置，绕过 init 调用（因为缺少 ajax 设置）。 无需重复设置，控制是否第一次调用或重新初始化表。

仍然不确定为什么我们不能在设置中使用简单的 bool ，希望对其他人有帮助:)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.