Question

我终于放弃了。我已经在Datetables网站和这里的stackoverflow上查看了一堆示例，以获得解决方案，并且已经实现了所有这些示例而没有成功。

我有一个页面有2个hjquery ui datepickers（开始和结束日期），我用它来输入我的php和sql然后返回我的json数组，这些数据被输入到我的数据表中。这在第一次尝试时非常出色。

然而，典型用户希望在整个网站停留期间更改这些日期，但是当用户输入新的日期变量并单击go按钮时，数据表不会使用它（希望）从输入

这里是我的代码转储（不是首次加载页面将检索今天的数据）

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback ){
    if ( typeof sNewSource != 'undefined' ){
        oSettings.sAjaxSource = sNewSource;
    }
    this.oApi._fnProcessingDisplay( oSettings, true );
    var that = this;

    oSettings.fnServerData( oSettings.sAjaxSource, null, function(json) {
        /* Clear the old information from the table */
        that.oApi._fnClearTable( oSettings );

        /* Got the data - add it to the table */
        for ( var i=0 ; i<json.aaData.length ; i++ ){
            that.oApi._fnAddData( oSettings, json.aaData[i] );
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw( that );
        that.oApi._fnProcessingDisplay( oSettings, false );

        /* Callback user function - for event handlers etc */
        if ( typeof fnCallback == 'function' ){
        fnCallback( oSettings );
        }
    });
}
var oTable; 

$(document).ready(function() 
{
    $("#datestart").datepicker();
    $("#datestart").datepicker("setDate", new Date());
    $("#dateend").datepicker();
    $("#dateend").datepicker('setDate', new Date());
    oTable = $('#example').dataTable(
    {
        "sDom": '<"toolbar">T<"clear">rt',
        "oTableTools": {
                "sSwfPath": "copy_csv_xls_pdf.swf"
        },
        "bProcessing": true,
        "fnServerParams": function (aoData) {
                aoData.push({"name": "dateStart", "value": $('#datestart').datepicker('getDate').getTime()/1000+28800},{"name": "dateEnd", "value":  $('#dateend').datepicker('getDate').getTime()/1000+28800});
         },
         "sAjaxSource": "SearchResults.php",
         "iDisplayLength": -1,
         "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]     
    })              
        .columnFilter(
        {
            sPlaceHolder: "head:before",
            aoColumns: [
                { type:"date-euro" },
                { type: "number" },
                { type: "number" },
                { type: "number" },
                { type: "text"}
            ]
      });

  $('#btnrun').click(function() 
    {
         if(validateForm())
         {
          $.blockUI({ 
             css: { 
                  border: 'none', 
                  padding: '15px', 
                  backgroundColor: '#000', 
                  '-webkit-border-radius': '10px', 
                  '-moz-border-radius': '10px', 
                  opacity: .5, 
                  color: '#fff' 
                },
                   message: '<h1>Loading report...</h1>', 
            }); 
       setTimeout($.unblockUI, 2000); 
       oTable.fnReloadAjax();
     }
    }); 

 });

Answer 1

很抱歉那些花时间调查的人。我没有意识到我没有粘贴整个fnReloadAjax（）;功能。所以我回到了datetables网站并粘贴了整个方法：

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback,     bStandingRedraw )
{
// DataTables 1.10 compatibility - if 1.10 then versionCheck exists.
// 1.10s API has ajax reloading built in, so we use those abilities
// directly.
if ( $.fn.dataTable.versionCheck ) {
    var api = new $.fn.dataTable.Api( oSettings );

    if ( sNewSource ) {
        api.ajax.url( sNewSource ).load( fnCallback, !bStandingRedraw );
    }
    else {
        api.ajax.reload( fnCallback, !bStandingRedraw );
    }
    return;
}

if ( sNewSource !== undefined && sNewSource !== null ) {
    oSettings.sAjaxSource = sNewSource;
}

// Server-side processing should just call fnDraw
if ( oSettings.oFeatures.bServerSide ) {
    this.fnDraw();
    return;
}

this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];

this.oApi._fnServerParams( oSettings, aData );

oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {
    /* Clear the old information from the table */
    that.oApi._fnClearTable( oSettings );

    /* Got the data - add it to the table */
    var aData =  (oSettings.sAjaxDataProp !== "") ?
        that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;

    for ( var i=0 ; i<aData.length ; i++ )
    {
        that.oApi._fnAddData( oSettings, aData[i] );
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();

    that.fnDraw();

    if ( bStandingRedraw === true )
    {
        oSettings._iDisplayStart = iStart;
        that.oApi._fnCalculateEnd( oSettings );
        that.fnDraw( false );
    }

    that.oApi._fnProcessingDisplay( oSettings, false );

    /* Callback user function - for event handlers etc */
    if ( typeof fnCallback == 'function' && fnCallback !== null )
    {
        fnCallback( oSettings );
    }
}, oSettings );

};

Answer 2

此处在数据表论坛http://datatables.net/forums/discussion/comment/16380

上

要在使用服务器端处理时重新加载数据，只需使用内置API函数fnDraw而不是这个插件

所以，删除插件，然后尝试使用fnDraw，如果还有问题，我们可以对其进行排序

单击按钮后数据表未更新

2 个答案: