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

我有一个dataTable初始化服务器端分页，它工作正常。 该表在初始化期间触发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" } ] }); } 

在初始化期间应该有一种限制表加载的方法吗？ 我阅读了文档，但找不到。 请建议。

Answer 1

您可以使用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() }); }); 

           
 Reload 
 
 
 
 
Name
 
Position
 
Office
 
Age
 
Start date
 
Salary
 
 
 
 
 
Name
 
Position
 
Office
 
Age
 
Start date
 
Salary
 
 
 
 
 
   

Answer 2

我可以通过传递带URL的额外参数来识别事件，从而解决这个问题。

例如，对于on load，我使用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(); 

这是我不得不修改表init而不会导致错误的那个。

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

Answer 3

这是我最初在页面加载时加载空dataTable的方法。 然后我使用eventListener通过ajax加载数据。 我找不到任何文件，我只是喜欢它，它就像一个魅力。

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('); } }); //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  tags per  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  }, // 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  }, // 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'); }); } 

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