Javascript 数据表和服务器端处理-按需加载
我已经使用DataTables构建了简单的表,并且成功地连接了服务器端脚本,用数据填充了我的表 在我的表格上方,我有两个复选框和两个日期选择来指定筛选标准。 当我的页面加载时,我的表被填满了,因为在启动时,datatable正在从服务器中提取第一页数据 我想禁用第一次初始数据加载,所以当页面加载时,我将得到空表,然后在我选择criterias并按下“加载”按钮后,数据将被加载 我知道如何将筛选标准添加到服务器参数,我需要做的是在用户单击按钮后从服务器加载数据 下面是我的datatable脚本:Javascript 数据表和服务器端处理-按需加载,javascript,jquery-datatables,Javascript,Jquery Datatables,我已经使用DataTables构建了简单的表,并且成功地连接了服务器端脚本,用数据填充了我的表 在我的表格上方,我有两个复选框和两个日期选择来指定筛选标准。 当我的页面加载时,我的表被填满了,因为在启动时,datatable正在从服务器中提取第一页数据 我想禁用第一次初始数据加载,所以当页面加载时,我将得到空表,然后在我选择criterias并按下“加载”按钮后,数据将被加载 我知道如何将筛选标准添加到服务器参数,我需要做的是在用户单击按钮后从服务器加载数据 下面是我的datatable脚本:
var myTable= $('table#myTable').dataTable({
"table-layout": "fixed",
"bJQueryUI": true,
"sDom": '<"H"lpr>t<"F"ip>',
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, 500], [25, 50, 100, 500]],
"bSort": false,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Data.asmx/Sales",
"fnServerData": function(sSource, aoData, fnCallback) {
var sEcho = aoData[0].value;
var iDisplayStart = aoData[3].value;
var iDisplayLength = aoData[4].value;
$.ajax({
contentType: "application/json; charset=utf-8",
type: "POST",
url: sSource,
//below are my parameters
data: "{'sEcho': '" + sEcho
+ "','iDisplayStart': '" + iDisplayStart
+ "','iDisplayLength': '" + iDisplayLength
+ "'}",
success: function(msg) {
fnCallback(msg.d);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.responseText);
}
});
},
"bAutoWidth": false,
"aoColumns": [{
"sType": "numeric",
"mData": "Nr",
"sWidth": "50px"
}, {
"sType": "string",
"mData": "Name"
}, {
"sType": "string",
"mData": "Surname"
}]
});
在需要该表之前,不要调用.dataTable方法。示例如下:
var myTable = null,
dtOptions = {
"table-layout": "fixed",
"bJQueryUI": true,
//...rest of options...
};
$('#button').click(function (e) {
myTable = $('table#myTable').dataTable(dtOptions);
});
或者,如果表格初始化后不需要访问选项:
$('#button').click(function (e) {
myTable = $('table#myTable').dataTable({
"table-layout": "fixed",
"bJQueryUI": true,
"sDom": '<"H"lpr>t<"F"ip>',
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, 500], [25, 50, 100, 500]],
"bSort": false,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Data.asmx/Sales",
"fnServerData": function(sSource, aoData, fnCallback) {
var sEcho = aoData[0].value;
var iDisplayStart = aoData[3].value;
var iDisplayLength = aoData[4].value;
$.ajax({
contentType: "application/json; charset=utf-8",
type: "POST",
url: sSource,
//below are my parameters
data: "{'sEcho': '" + sEcho
+ "','iDisplayStart': '" + iDisplayStart
+ "','iDisplayLength': '" + iDisplayLength
+ "'}",
success: function(msg) {
fnCallback(msg.d);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.responseText);
}
});
},
"bAutoWidth": false,
"aoColumns": [{
"sType": "numeric",
"mData": "Nr",
"sWidth": "50px"
}, {
"sType": "string",
"mData": "Name"
}, {
"sType": "string",
"mData": "Surname"
}]
});
});
您只需将iDeferLoading参数指定给datatables,该参数包含DOM中已包含的记录数,如果没有记录,则为0
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing.php",
"iDeferLoading": 0
} );
} );
实际上,我从一开始就想要这个表,但里面没有任何数据。当第一个请求完成并且sEcho==1时,我设法在fnServerData中解决了这个问题,我只调用fnCallback,但数据集为空。这在开始时给了我一个空表,然后当我想加载数据时,我在按钮点击处理程序中调用fnDrawfalse。谢谢!我不知道我可以在这种情况下使用它: