jquery - ボタンがクリックされたときにデータテーブル（JQuery）を更新する

Question

単純なフォームを作成し、DatatablesjQueryプラグインを使用してその中にいくつかのデータを表示しています。データは、JSON形式で適切な結果を返すphpスクリプト（process.php）によって入力されています。フォームには、テキストボックスの値をprocess.phpに送信するボタンがあります。問題は、ボタンがクリックされたときにprocess.phpスクリプトによって受信された新しいデータでデータテーブルを更新/変更できないことです。

フォームのコード：

<form name="myform" id="myform" action="" method="POST">  
    <label for="id">Enter an id:</label>  
    <input type="text" name="txtId" id="txtId" value=""/> 
    <input type="button" id="btnSubmit" name="btnSubmit" value="Search"> 
</form>

<div id="results">
    <table class="display" id="example">
        <thead>
            <tr>
                <th>id</th>
                <th>Surname</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <!-- data goes here -->
        </tbody>
    </table>
</div>

データテーブルを作成するために、次のJQueryコードを使用しています。

    $(document).ready(function() {
            var oTable = $('#example').dataTable( {
                "sPaginationType": "full_numbers",
                "iDisplayLength": 10,
                //"bServerSide": true,
                "sAjaxSource": "process.php"
            } );

        $("#btnSubmit").click(function(){
            $.ajax({  
                type: "POST",  
                url: "process.php",  
                data: 'txtId=' + $("txtId").val(),  
                success: function(result) {  
                    oTable.fnReloadAjax();
                    oTable.fnDraw();
                }  
            });
        });
    } );

process.phpスクリプト（正常に動作します）は次のとおりです。

<?php
$result="";
if (empty($_REQUEST["txtId"])) {    
    $result = '{"aaData":[["1","Surname1","Name1"]]}';
}
else {
    $result = '{"aaData":[["2","Surname2","Name2"]]}';
}
print $result;
?>

score 4 · Accepted Answer

fnReloadAjax使用する必要があるものです（関数に再描画が組み込まれている可能性があると思います）。ただし、問題は、2回目の.ajax呼び出しを行っても、その呼び出しのデータがデータテーブルにまったく関連付けられておらず、データテーブルにバインドされないことです。

を使用fnReloadAjaxすると、テーブルの初期化で指定したものと同じAjax呼び出しが行われます。したがって、Stefanが述べたように、必要なのはfnServerDataデータテーブル設定でパラメーターを指定することです（ただし、Successこれらの線に沿ったものはすでにデータテーブルによって想定されているため、パラメーターを破棄してください）。次に、ボタンを呼び出しますfnReloadAjax()。

最終的なコードは次のようになります。

$(document).ready(function() {
        var oTable = $('#example').dataTable( {
            "sPaginationType": "full_numbers",
            "iDisplayLength": 10,
            "sAjaxSource": "process.php",
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                $.ajax( {
                    "dataType": 'json', 
                    "type": "POST", 
                    "url": sSource, 
                    "data": 'txtId=' + $("txtId").val(), 
                    "success": fnCallback
                } );
            }
        } );

    $("#btnSubmit").click(function(){ 
        oTable.fnReloadAjax();
    });
} );

score 3 · Accepted Answer

ついに、私は解決策を見つけました！私のJQueryコードには2つの問題がありました：

データテーブルをロードするスクリプトタグの後、$（document）.ready（）ステートメントの前にfnReloadAjax（）コードを追加する必要がありました。
送信ボタンのJQueryコードを変更する必要がありました（AJAX呼び出しは不要で、fnReloadAjax（）のみが必要です）。

Stefanとmbeasleyの両方に感謝します!!

JQueryコードは次のようになりました。

//
// fnReloadAjax() code      
//
    $.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 );
    }


    $(document).ready(function() {

        var oTable = $('#example').dataTable( {
            "sPaginationType": "full_numbers",
            "iDisplayLength": 10,
            //"bServerSide": true,
            "sAjaxSource": "process.php"
        });

        $("#btnSubmit").click(function(){
            oTable.fnReloadAjax("process.php?txtId=" + $("txtId").val());
        });

    } );

score 1 · Accepted Answer

fnServerDataajax POSTを使用する場合は、データブルをセットアップするときにも指定する必要があるようです： http ://datatables.net/ref#fnServerData

を呼び出す必要はなくfnReloadAjax()、のみを呼び出すことも可能ですfnDraw()。 fnReloadAjax()はプラグイン関数なので、以前にロードしたと思います。

score 0 · Accepted Answer

または、テーブルを破棄して再作成することもできます。

var oTable = null;

function reloadTable() {
    if (oTable) {
        oTable.fnDestroy();
    }

    oTable = $('#example').dataTable( {
        "sPaginationType": "full_numbers",
        "iDisplayLength": 10,
        //"bServerSide": true,
        "sAjaxSource": "process.php"
    } );
}

reloadTable();

score 0 · Accepted Answer

0

使用できます。

otable.ajax.reload()

于 2018-08-22T17:28:57.197 に答える

jquery - ボタンがクリックされたときにデータテーブル（JQuery）を更新する

5 に答える 5

Related

Reference