web-dev-qa-db-ja.com

jQueryデータテーブルテーブルを更新する

これについてはたくさんの質問がありましたが、私のために働くものを見つけることができませんでした。 AJAX呼び出しからの行で満たされている単純でシンプルなHTMLテーブルがあります。その後、DataTableプラグインでテーブルを更新したいのですが、機能しません。HTMLテーブルがあります。次のようになります。

<table id="myTable">
  <thead>
     <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
     </tr>
  </thead>
  <tbody>
  </tbody>
</table>

私のjQueryページロードで

$(document).ready(function(){
        var oTable = $('#myTable').dataTable({
            "aoColumns": [
              { "bSortable": false },
              null, null, null, null
            ]
        });
});

そして最後に私のドロップダウンリストの変更機能

$("#dropdownlist").on("change", function () {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
        var oTable = $('#myTable').dataTable(); // Nothing happens
        var oTable = $('#myTable').dataTable({ // Cannot initialize it again error
                "aoColumns": [
                  { "bSortable": false },
                  null, null, null, null
                ]
            });
        });

追加などは、短縮するように変更されているため、あまり焦点を合わせないでください。

基本的には、テーブルを更新する方法が問題です。AJAXを実行して、新しいデータをテーブルに追加できますが、データテーブルプラグインはそれで更新されません。

.fnDraw（false）;

しかし、それは何もしません

fnReloadAjax（）

テーブルを更新する方法についての手がかりはありますか？

ajaxjqueryjquery-datatables
13
HenrikP

これを試して

最初にテーブルを初期化したため、最初にそのテーブルをクリアします

$('#myTable').dataTable().fnDestroy();

次に、ajaxの成功後に再度初期化する

$('#myTable').dataTable();

このような

$("#dropdownlist").on("change", function () {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
       $('#myTable').dataTable().fnDestroy();
       $('#myTable').dataTable({ // Cannot initialize it again error
                "aoColumns": [
                  { "bSortable": false },
                  null, null, null, null
                ]
            });
        });

[〜＃〜] demo [〜＃〜]

25
Sridhar R

私はこれが古い投稿であることを知っていますが、問題について調査したばかりで、DataTableのマニュアルページでそれを解決する最も簡単な方法を見つけました： https://datatables.net/reference/api/ajax.reload ％28％29 table.ajax.reload（）を呼び出すために必要なすべて;

3
Marco
var table =  $('#product_table').DataTable({
    "bProcessing": true,
    "serverSide": true,
    responsive: true,
    "ajax": {
        url: get_base_url + "product_table", // json datasource
        type: "post", // type of method  ,GET/POST/DELETE
        error: function () {
            $("#employee_grid_processing").css("display", "none");
        }
    }
});

//call this funtion 
$(document).on('click', '#view_product', function () {
  table.ajax.reload();
});
2
Hariharan.P

私はこれに関連することをしました...以下はあなたが必要とするもののサンプルjavascriptです。これに関するデモがあります： http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable;

function updateMember(id = null) {
    if(id) {
        // click on update button
        $("#updatebutton").unbind('click').bind('click', function() {
            $.ajax({
                url: 'webdesign_action/update.php',
                type: 'post',
                data: {member_id : id},
                dataType: 'json',
                success:function(response) {
                    if(response.success == true) {                      
                        $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table

                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table                        
                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        }); // click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}
1
Mwangi Thiga

バージョン1.10.0以降では、 ajax.reload（） apiを使用できます。

_var table = $('#myTable').DataTable();
table.ajax.reload();
_

$('#myTable').DataTable()ではなく$('#myTable').dataTable()を使用することに注意してください

1
Prashant Pokhriyal