1

Datatables と fnReloadAjax プラグイン (以下を参照) を使用して、次のコードを使用してサーバー側スクリプトからテーブルのデータをリロードしようとしています。

$.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings, sNewSource, fnCallback, bStandingRedraw) {
            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);
        };
        $(document).ready(function() {


                $('#reloadDataBtn').click(function() {
                    $('#myTable').fnReloadAjax('mySource2.php');
                });


            $("#myTable").dataTable({ bSort: true,
                "bProcessing": true,
                "sAjaxSource": 'mySource1.php',
                bAutoWidth: true,
                "iDisplayLength": 5, "aLengthMenu": [5, 10, 25, 50, 100], 
                "sPaginationType": "full_numbers",
                "aoColumnDefs": [{ "bSortable": false, "aTargets": [-1, 0]}]
            });
        });

しかし、まだ fnReloadAjax is not a function JS エラーが表示されます。私は何を間違っていますか？

4

2 に答える 2

5

バージョン1.10 の DataTable プラグインでは、関数fnReloadAjaxが廃止されました。代わりにapi().ajax.reload()を使用する必要があります。

$(document).ready(function() {
    var datatable = $('#calls_list_table').dataTable({
        "iDisplayLength": 10,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/calls/data/",
            "type": "POST"                

        }
    });

    $('button').click(function() {
        // use it instead of fnReloadAjax            
        datatable.api().ajax.reload();
    });
});
于 2014-06-18T08:51:42.280 に答える
3

これは、dataTable オブジェクト自体ではなく、jQuery によって返される要素をアドレス指定するためです。

代わりにこれを行います：

var dataTable; //reference to your dataTable

$('#reloadDataBtn').click(function() {
    dataTable.fnReloadAjax('mySource2.php');
    //NOT
    //$('#myTable').fnReloadAjax('mySource2.php');
});

dataTable = $("#myTable").dataTable({ 
  bSort: true,
  "bProcessing": true,
  "sAjaxSource": 'mySource1.php',
  bAutoWidth: true,
  "iDisplayLength": 5, "aLengthMenu": [5, 10, 25, 50, 100], 
  "sPaginationType": "full_numbers",
  "aoColumnDefs": [{ "bSortable": false, "aTargets": [-1, 0]}]
});

fnReloadAjax()適切に呼び出されるようになりました。

于 2013-10-10T12:23:19.807 に答える