web-dev-qa-db-ja.com

AJAX jqueryデータテーブル列への応答を設定する方法は？

Jqueryデータへの応答を各テーブル列に設定する方法を誰かに教えてもらえますか？.

これが私のjavascriptコードです：

$(document).ready (function() {
$.ajax({
    url: 'userController?action=list',
    success : function(response) {
        var jsonObject = $.parseJSON(response); 
        alert(jsonObject.Password);
        alert(jsonObject.UserId);
        $('#usertable').dataTable( {
            data : jsonObject,
            columns: [
                      {'jsonObject' : 'UserId'},
                      {'jsonObject' : 'Password'},
                      {'jsonObject' : 'Level'},               
                      ],
            searching : false
        });
    }
});});

ここでは、文字列での応答と応答は{"UserId" : "Manohar", "Password" : "1234", "Level" : "lev"}です。

以下はjspページです。

<table id="usertable">
<thead>
    <tr>
        <th>User Id</th>
        <th>Password</th>
        <th>Level</th>
    </tr>
</thead>

上記を記述しましたが、エラーが発生することも、行がテーブルに追加されることもありません。皆さん、これで私を助けてくれませんか？

javascriptjqueryajaxdatatables
5
manohar e

ここでの解決策は、応答を変更することです。以前は{"userid"： "manohar"、 "password"： "1234"}でしたが、現在は[["manohar"、 "1234"]]に変更しています。次に、jsファイルで

$.ajax({
    url: 'userController?action=list',
    success : function(data, textStatus, jqXHR) {
        var table_data = JSON.parse(data);
        var table = $('#usermaintenancetable').DataTable( {
            data: table_data
}); } });

したがって、ここでは応答は文字列形式であり、JSON.parse（）を使用してJSONに変更し、これをデータとしてデータテーブルに渡しました。

3
manohar e

これを使って

$(document).ready (function() {
$.ajax({
    url: 'userController?action=list',
    success : function(response) {
        var jsonObject = $.parseJSON(response); 
        alert(jsonObject.Password);
        alert(jsonObject.UserId);
        $('#usertable').dataTable( {
            data : jsonObject,
            //data : response,
            columns: [
                      {"data" : "UserId"},
                      {"data" : "Password"},
                      {"data" : "Level"}              
                      ],
            searching : false
        });
    }
});});

jsonObjectのみをdataに変更します

別の方法を試してくださいuはASP.NETMVCを使用できます

$(document).ready(function () {
   $.get("/userController/list", function (data) {
        //  console.log(data);
        if (data != null) {
             $('#usertable').dataTable({                           
                       data: data,
                       columns: [
                                 {"data" : "UserId"},
                                 {"data" : "Password"},
                                 {"data" : "Level"}              
                                ],
                      searching : false
                      });
                    }
                })
            });
0
Vidhyadhar Galande

Successメソッド内でデータテーブルを再初期化しないでください。 jsonオブジェクトの応答を取得したら、 row.add（） メソッドを使用する必要があります。

解決策1 :( JSONオブジェクトをループするため）

success:function(data, textStatus, jqXHR) {
    $.each(data, function (i,item) {
        var rowNode= [ item.UserId, item.Password, item.Level]
        dataTable.row.add(rowNode).draw();
    }); 
}

ソル2 :( JSON文字列値の場合）

success:function(data, textStatus, jqXHR) {
        var jsonData = JSON.parse(data);
        var rowNode= [ jsonData.UserId, jsonData.Password, jsonData.Level]
        dataTable.row.add(rowNode).draw();
}

上記のコードは、一度に1行ずつ追加します。一度に複数の行を追加するには、 rows.add（） APIメソッドを使用します

0
Lucky