我有一个使用服务器端分页初始化的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" }
]
});
}
在初始化期间限制表的加载应该有一种方法吧？我阅读了文档，但没有找到，请提供建议。
您可以使用 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>deferLoading 的值从 0 更改为 [0]。 - JSelserdeferLoading 在 dataTables 1.10 中可用，但在 1.9 或更低版本中不可用，而是使用 iDeferLoading。 - user9645我可以通过一个变通方法来完成，通过在URL中传递额外的参数来标识事件。
例如，对于“加载”事件，我使用action="load"作为查询参数来初始化数据表格，对于其他操作，如搜索，则将action="search"传递。通过这种方式，我在后端将能够识别调用来源。如果它不是"load"，则我正在获取数据并传递（因为现在的实现是这样的）。否则（如果是“load”），那么我将传递空数据，这将显示"未找到数据"消息，就像它没有进行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();
$(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');
});
}
注意: 如果有可用且未禁用的默认选项，可以添加一些逻辑来选择默认选项。
正确（有效）的方法是：
$(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 );
})
} );
deferLoading对我无效。谢谢 :) - JavaYouthurl使用ajax重新加载数据：https://stackoverflow.com/a/57113353/1676736 - Sayed Abolfazl Fatemi