web-dev-qa-db-ja.com

ajaxの成功後にデータテーブルをリロードする

私はJQuery DataTableを使用しています。私はajaxでjsonファイルのデータテーブルonclickにデータを送信します。最初の結果。これは、データテーブル内のデータの最初の表示です。

The first Click

すべての次のクリック私は正しいデータのみを取得します：この例では、それらは下の画像に表示されている1つの結果ですが、他のすべて（情報、表示、ページネーション）は最初の画像に表示されている最初の検索に属しています： enter image description here

2番目の例では、ページネーションの任意のページをクリックすると、最初のページの結果のコンテンツが表示されます。これは私の関数ONclickです。

    $ ( '#ButtonPostJson' ).on('click',function() {

             $("tbody").empty();
             var forsearch = $("#searchItem").val();

    $.ajax({
        processing: true,
        serverSide: true,
        type: 'post',
        url: 'searchData.json',
        dataType: "json",
        data: mysearch,
       /* bRetrieve : true,*/

        success: function(data) {
            $.each(data, function(i, data) {
                var body = "<tr>";
                body    += "<td>" + data.name + "</td>";
               ..........................
               ..........................
                body    += "</tr>";
                $('.datatable-ajax-source table').append(body);

            })
        ;
            /*DataTables instantiation.*/
     $('.datatable-ajax-source table').dataTable();
    },

        error: function() {
            alert('Processus Echoué!');
        },
        afterSend: function(){
    $('.datatable-ajax-source table').dataTable().reload();
 /* $('.datatable-ajax-source table').dataTable({bRetrieve : true}).fnDestroy();    
    $(this).parents().remove(); 
$('.datatable-ajax-source table').dataTable().clear();*/
    }
    });
    });

私は何でも試してみて、何を見逃しているかわからない。私はこのjqueryをデータテーブルに使用します：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

ありがとう。

javascriptjqueryajaxdatatabledatatables
5
MedKostali

ボタンをクリックすると、テーブル本体を空にして、ajaxでデータテーブルを再度開始する必要がなくなります。

ドキュメント準備機能をすでに開始しているので、ajaxを再度呼び出す必要があります。

ただ使う

$("#Table_id").ajax.reload();

以下のリンクを確認してください。

https://datatables.net/reference/api/ajax.reload（）

これで解決しない場合はお知らせください

2
Punit Gajjar

このリンク jQuery DataTablesのデータを更新しています

非常に役に立ち、私は自分の問題を解決するためにそれから刺激を受けます。

1
MedKostali

私はこの単純な関数を作成しました：

function refreshTable() {
  $('.dataTable').each(function() {
      dt = $(this).dataTable();
      dt.fnDraw();
  })
}
1
Sibin John Mattappallil

以下のコードを使用してください..それは完全に機能し、現在のページを失うことなくページ付けを維持します

$（ "＃table-example"）。DataTable（）。ajax.reload（null、false）;

0
salithlal

.reload（）は、パラメーターを渡すまで正しく機能しません

var  = $("#example").DataTable() ;
datatbale_name.ajax.reload(null, false );
0
M Abdullah

そのまま使う

$('#product_table').DataTable().ajax.reload();
0
Waqar Sharif

私も同じ問題を抱えていました。これを扱うプロジェクトで書いた関数を見つけました。これが私が作ったシンプルな2列のテーブルです。

<table id="memberships" class="table table-striped table-bordered table-hover"  width="100%">
        <thead>
            <tr>
                <th>Member Name</th>
                <th>Location</th>
            </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Member Name</th>
            <th>Location</th>
          </tr>
        </tfoot>
      </table>

これは、それを取り込むためのスクリプトです。

function drawTable(){
var table = $('#memberships').DataTable();

table.destroy();

value = $("#memberName").val();
console.log("member name-->>" + value);
$('#memberships').DataTable({
responsive:true,
pageLength: 50,
ajax:{
    "url": `//BACKEND API CALL`,
    "type":"get",
    "dataSrc": 'members'//my data is in an array called members
},
columns: [
  {"data": "name_display" },
  {"targets": 0,
    "data": "membershipID",
    "render": function ( data, type, full, meta ) {
      return '<button type="button" class="btn btn-info btn-block" 
      onclick="editMember(' + data + ')">Edit Member</button><button 
      type="button" class="btn btn-danger btn-block" 
      onclick="deleteMember(' + data + ')">Delete</button>';
    }
  }
 ]
});
$.fn.dataTable.ext.errMode = 'none';
}

私の列レンダー機能は無視できます。返されたデータに基づいて2つのボタンが必要でした。キーは、関数内のtable.destroyでした。 tableという変数にテーブルを作成しました。この同じ関数を何度も使用できるようにしたので、この初期化時に正しく破棄します。初めて空のテーブルを破棄します。その後の呼び出しごとにデータが破棄され、ajax呼び出しからデータが再入力されます。

お役に立てれば。

0
sixstring

$("#Table_id").ajax.reload();は機能しませんでした。

私は実装しました-

var mytbl = $("#Table_id").datatable();
mytbl.ajax.reload;
0
Adarsh Madrecha