数据库和服务器端处理 - 按需加载 [英] datatables and server-side processing - load on demand

问题描述

在表格上方我有2个复选框和2个复选框日期选择指定过滤器标准。
当我的页面加载时，我收到表填写，因为在启动时，datatable是从服务器提取第一页数据。

我想禁用第一个初始数据加载，所以当页面加载我会得到空表，然后在我选择标准后，按'加载'按钮数据将被加载。

我知道如何将我的过滤器标准添加到服务器参数中，我需要做的是在用户点击按钮后从服务器加载数据。

以下是我的datatable脚本：

  var myTable = $（'table＃myTable'）。dataTable（{
table-layout：fixed，
bJQueryUI：true，
sDom：<Hlpr> t<Fip>'，
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，
 //以下是我的参数
 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参数指定为数据表，您的表格包含在DOM中的记录数，如果没有记录，则为0。

  $（document）.ready（function ）{
 $（'＃example'）。dataTable（{
bProcessing：true，
bServerSide：true，
sAjaxSource：scripts / server_processing。 php，
iDeferLoading：0 
}）; 
}）; 
  

I've build simple table using DataTables and I successfully connected server-side script to populate my table with data.

Above my table I have 2 checkboxes and 2 date selects to specify filter criterias. When my page is loading I get table filled, because at startup datatable is pulling first page of data from server.

I would like to disable first initial data load, so when page is loaded I'll get empty table, then after I'll select criterias and press 'Load' button data will be loaded.

I know how to add my filter criterias to server params, what I need to do is to load data from server after user click button.

Below is my datatable script:

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"
        }]
});

解决方案

You simply specify the iDeferLoading parameter to datatables, with the number of records your table contains already in the DOM, or 0 if no records.

$(document).ready(function() {
$('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php",
    "iDeferLoading": 0
} );
} );

这篇关于数据库和服务器端处理 - 按需加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！