web-dev-qa-db-ja.com

ajaxを使用してページネーションとソートを使用して動的に行をデータテーブルに追加する

私は達成しようとしています https://almsaeedstudio.com/themes/AdminLTE/pages/tables/data.html -"フル機能のデータテーブル"

Tbodyを静的に追加すると、ページ分割と並べ替えは正常に機能しますが、以下に示すようにjqueryを使用してtbodyを追加すると、行は追加されますが、ページ分割と並べ替えは失敗します。

[〜＃〜] html [〜＃〜]

<table id="tblItems">
    <thead>
        <tr>
            <th>code</th>
            <th>Name</th>
            <th>Description</th>
            <th>Image</th>
            <th>Parent</th>
            <th>Location</th>
            <th>Category</th>
        </tr>
    </thead>
</table>

jquery

$(document).ready(function() {
    $('#tblItems').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "sDom": 'lfrtip'
    });
    $('#tblItems').append('<tbody><tr><td>asdsa34id</td><td> asdsa34id </td><td>asdsa34id </td><td> asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td></tr></tbody>');
});

https://jsfiddle.net/techjerk2013/vwpsxhaL/

更新されたコード

応答からのデータはあるが、更新されたコードはテーブルにデータを追加しません。私はdeferRenderをtrueに設定しましたが、それでもデータテーブルは空です。

$(document).ready(function() {
    PopulateItemsTable();
    BindTable();
});

function BindTable() {
    $("#tblItems").DataTable({
        "deferRender": true,
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "sDom": 'lfrtip'
    });
}

function PopulateItemsTable() {
    var txt = "";
    $.ajax({
        type: "POST",
        url: "Item.aspx/Search",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var jsonObject = JSON.parse(response.d);
            if (jsonObject) {
                var len = jsonObject.length;
                if (len > 0) {
                    for (var i = 0; i < len; i++) {
                        if (jsonObject[i].Id) {
                            Id = jsonObject[i].Id;
                        }
                        else {
                            Id = '';
                        }
                        if (jsonObject[i].Name) {
                            Name = jsonObject[i].Name;
                        }
                        else {
                            Name = '';
                        }
                        if (jsonObject[i].Description) {
                            Description = jsonObject[i].Description;
                        }
                        else {
                            Description = '';
                        }
                        if (jsonObject[i].Image) {
                            Image = jsonObject[i].Image;
                        }
                        else {
                            Image = '';
                        }
                        if (jsonObject[i].Parent) {
                            Parent = jsonObject[i].Parent;
                        }
                        else {
                            Parent = '';
                        }
                        if (jsonObject[i].Location) {
                            Location = jsonObject[i].Location;
                        }
                        else {
                            Location = '';
                        }
                        Category = '';

                        txt += "<tr><td>" + Id + "</td><td>" + Name + "</td><td>" + Description + "</td><td>" + Image + "</td><td>" + Parent + "</td><td>" + Location + "</td><td>" + Category + "</td></tr>";
                        $('#tblItems').append('<tbody>' + txt + '</tbody>');
                    }
                }
                else {
                    $("#tblItems").append("No records found");
                }

            }
        },
        failure: function () {
            $("#tblItems").append(" Error when fetching data please contact administrator");
        }
    });
}

回答

以下に回答した人々の助けを借りて、以下のコードは期待どおりに動作します。

<script type="text/javascript">

    var myTable;

    $(document).ready(function () {
        BindItemTable();
        PopulateItemsTable();

    });

    function BindItemTable() {
        myTable = $("#tblItems").DataTable({
            "deferRender": true,
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "sDom": 'lfrtip'
        });
    }

    function PopulateItemsTable() {
        $.ajax({
            type: "POST",
            url: "ItemManagement.aspx/SearchIdList",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var jsonObject = JSON.parse(response.d);
                var result = jsonObject.map(function (item) {
                    var result = [];
                    result.Push(item.Id);
                    result.Push(item.Name);
                    result.Push(item.Description);
                    result.Push(item.Image);
                    result.Push(item.Parent);
                    result.Push(item.Location);
                    result.Push("");
                    return result;
                });
                myTable.rows.add(result);
                myTable.draw();
            },
            failure: function () {
                $("#tblItems").append(" Error when fetching data please contact administrator");
            }
        });
    }
</script>
jquerytwitter-bootstrapdatatablespagination
9
Gopi

行をテーブルマークアップに直接追加しないでください。代わりに、それをDataTableインスタンスに追加してから .draw() メソッドを使用します。とにかく、DataTableインスタンスに追加すると、内部的にtbodyとして追加されます。このような何かをする必要があります

_var mytable = $('#tblItems').DataTable({
    "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "sDom": 'lfrtip'
});
mytable.row.add(['asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id']);
mytable.draw();
_

ここにデモがありますhttps://jsfiddle.net/dhirajbodicherla/vwpsxhaL/1/

さらに参考資料として、ドキュメントから DataTableに行を追加する方法 も読んでください。

更新

rows.add() （複数）を使用して、このようなことを行うことができます

_var jsonObject = JSON.parse(response.d);
var result = jsonObject.map(function(item){
  var result = [];
  result.Push(item.Id); 
  // .... add all the values required
  return result;
});
myTable.rows.add(result); // add to DataTable instance
myTable.draw(); // always redraw
_
_var myTable;
$(document).ready(function() {
  myTable = $("#tblItems").DataTable({
    "deferRender": true,
    "paging": true,
    "lengthChange": false,
    "searching": false,
    "ordering": true,
    "info": true,
    "autoWidth": false,
    "sDom": 'lfrtip'
  });
  PopulateItemsTable();
});

function PopulateItemsTable() {
  $.ajax({
    type: "POST",
    url: "Item.aspx/Search",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
      var jsonObject = JSON.parse(response.d);
      var result = jsonObject.map(function(item){
        var result = [];
        result.Push(item.Id); 
        // .... add all the values required
        return result;
      });
      myTable.rows.add(result); // add to DataTable instance
      myTable.draw(); // always redraw
    }
  });
}
_
10
Dhiraj

プラグインによって提供されるAPIではなくjQueryを使用してテーブルhtmlを変更している場合は、プラグインを再度呼び出して、変更されたhtmlに従ってインスタンス化する必要があります。

$(document).ready(function() {
    $('#tblItems').append('<tbody><tr><td>asdsa34id</td><td> asdsa34id </td><td>asdsa34id </td><td> asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td></tr></tbody>');

    $('#tblItems').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "sDom": 'lfrtip'
    });

});

デモhttps://jsfiddle.net/8hyr08xb/

編集した質問に基づいて更新

これを試して

function PopulateItemsTable() {
    var txt = "";
    $.ajax({
        type: "POST",
        url: "Item.aspx/Search",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var jsonObject = JSON.parse(response.d), html = [];
            if (jsonObject) {
                var len = jsonObject.length;
                if (len > 0) {
                    for (var i = 0; i < len; i++) {
                        if (jsonObject[i].Id) {
                            Id = jsonObject[i].Id;
                        }
                        else {
                            Id = '';
                        }
                        if (jsonObject[i].Name) {
                            Name = jsonObject[i].Name;
                        }
                        else {
                            Name = '';
                        }
                        if (jsonObject[i].Description) {
                            Description = jsonObject[i].Description;
                        }
                        else {
                            Description = '';
                        }
                        if (jsonObject[i].Image) {
                            Image = jsonObject[i].Image;
                        }
                        else {
                            Image = '';
                        }
                        if (jsonObject[i].Parent) {
                            Parent = jsonObject[i].Parent;
                        }
                        else {
                            Parent = '';
                        }
                        if (jsonObject[i].Location) {
                            Location = jsonObject[i].Location;
                        }
                        else {
                            Location = '';
                        }
                        Category = '';

                        html.Push("<tr><td>" + Id + "</td><td>" + Name + "</td><td>" + Description + "</td><td>" + Image + "</td><td>" + Parent + "</td><td>" + Location + "</td><td>" + Category + "</td></tr>");
                    }

                    $('#tblItems')
                       .append('<tbody>' + html.join('') + '</tbody>')
                       .DataTable({
                          "paging": true,
                          "lengthChange": false,
                          "searching": false,
                          "ordering": true,
                          "info": true,
                          "autoWidth": false,
                          "sDom": 'lfrtip'
                   });
                }
                else {
                    $("#tblItems").append("No records found");
                }

            }
        },
        failure: function () {
            $("#tblItems").append(" Error when fetching data please contact administrator");
        }
    });
}
2
ShankarSangoli

私を信じて、私は上記のすべてを行いましたが、長いコード行を書かずに期待どおりに機能することはありませんでした

私にとっての解決策は非常にシンプルで迅速でした。データテーブルを取得してAjaxリクエストを処理するには、データテーブルを使用する前に、まずリクエストを呼び出す必要があります。例

enter image description here

Ajaxを呼び出す前に最初にDataTableを呼び出す必要がないことに注意してください。テーブルは、データをテーブル本体にフィードする必要があります

<tbody class="load-transactions"> and append using jquery for the rest

enter image description here

これを試してみてください。後でありがとう。

0
Delino