web-dev-qa-db-fra.com

Comment régler AJAX réponse aux colonnes de la table de données jquery?

Quelqu'un peut-il me dire comment définir la réponse aux données JQuery à chaque colonne de la table.

Voici mon code 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
        });
    }
});});

Ici, la réponse dans String et la réponse est {"UserId" : "Manohar", "Password" : "1234", "Level" : "lev"}.

Ci-dessous, la page jsp.

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

J'ai écrit ce qui précède et je ne reçois pas d'erreur, ni la ligne n'est ajoutée à la table. Pouvez-vous m'aider dans ce domaine?

javascriptjqueryajaxdatatables
5
manohar e

Ici, la solution est de changer la réponse. Auparavant, il s'agissait de {"userid": "manohar", "password": "1234"}, maintenant je l'ai changé en [["manohar", "1234" ]]. Puis dans le fichier js

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

Donc, ici, la réponse est au format String et je l’ai changée en JSON en utilisant JSON.parse () puis transmise ceci en tant que données à la table de données.

2
manohar e

utilisez ceci

$(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
        });
    }
});});

change uniquement jsonObject en data

Essayez une autre méthode, vous pouvez utiliser ASP.NET MVC

$(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

Vous ne devez pas réinitialiser le datatable dans votre méthode de réussite. Une fois que vous avez la réponse à l’objet json, vous devez utiliser row.add () method,

Sol 1: (pour les objets JSON en boucle)

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

Sol 2: (pour les valeurs de chaîne JSON)

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

Le code ci-dessus ajoute une ligne à la fois. Pour ajouter plusieurs lignes à la fois, utilisez rows.add () méthode API

0
Lucky