数据表fnDraw不起作用

时间:2012-06-29 18:18:14

标签: jquery json datatables

我正在使用从json文件中获取数据的数据表。

var date=new Date();
var day=date.getDate();
var dataTable = $('#.main_content table').dataTable({
                    "bProcessing": true,
                    "bPaginate": false,
                    "bSort": false,
                    "bServerSide": true,
                    "bjQueryUI": true,
                    "sAjaxSource": 'sources/data.json',
                    "fnServerData": fnServerObjectToArray()
                });

正如您所看到的,我正在使用一个函数从json文件中提取数据。

fnServerObjectToArray = function () {
            return function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "dataType": "json",
                    "success": function (json) {
                        var a = [];
                        var data = json.aoData;
                        for (var i = 0, iLen = data.appointments.length; i < iLen; i++) {
                            var inner = [];
                            inner.push(data.appointments[i].time);
                            if (data.appointments[i].CHT111[day]) {
                                inner.push(data.appointments[i].CHT111[day]);
                                inner.push(data.appointments[i].DOB[day]);
                                inner.push(data.appointments[i].Patient[day]);
                                inner.push(data.appointments[i].Visit_Reason[day]);
                                inner.push(data.appointments[i].Room[day]);
                                inner.push(data.appointments[i].Scheduled[day]);
                            }
                            else {
                                inner.push(data.appointments[i].CHT111.default);
                                inner.push(data.appointments[i].DOB.default);
                                inner.push(data.appointments[i].Patient.default);
                                inner.push(data.appointments[i].Visit_Reason.default);
                                inner.push(data.appointments[i].Room.default);
                                inner.push(data.appointments[i].Scheduled.default);
                            }
                            a.push(inner);
                        }
                        json.aaData = a;
                        fnCallback(json);
                    }
                });
            }
        }

问题是我有一个更改day变量的按钮,然后调用fnDraw()方法,该方法不起作用。

1 个答案:

答案 0 :(得分:2)

根据datatables文档,fnDraw不会重新加载Ajax数据。但是,有一个名为fnReloadAjax的插件可以完全满足您的要求。下面的代码是插件代码,只需将其保存为js文件并在加载数据表js后加载它,但在初始化表之前:

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
    oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];

this.oApi._fnServerParams( oSettings, aData );

oSettings.fnServerData( 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 ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
    {
        oSettings._iDisplayStart = iStart;
        that.fnDraw( false );
    }

    that.oApi._fnProcessingDisplay( oSettings, false );

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

现在,只要您想使用新的过滤数据重新加载表,就可以调用以下代码:

dataTable.fnReloadAjax( 'sources/data.json' );