Comment obtenir des données de table dans bootstrap

Comment bootstrap obtient les données de la table : 1. Obtenez-les via l'URL du paramètre de table ; 2. Opérez via la méthode "$.get()" et utilisez les données du paramètre de table pour personnaliser la méthode pour recevoir le format des données.

L'environnement d'exploitation de cet article : système Windows 7, bootsrap version 3.3.7, ordinateur DELL G3

Comment bootstrap obtient-il les données de la table

table bootstrap Deux façons d'obtenir des données

L'obtention de données est généralement utilisée. Il existe deux types, l'un consiste à obtenir des données json via l'URL du paramètre de table et l'autre consiste à les obtenir via $.get(). L'effet des deux implémentations est le même, mais lors de la réception des données. Légèrement différent. Introduisons respectivement la différence entre les deux méthodes

1. Obtenez-la via l'URL du paramètre de table L'URL ici est l'adresse de l'interface backend, et les données finales renvoyées seront directement restituées dans le tableau. Cependant, il y a quelque chose à noter ici, c'est-à-dire que le format json renvoyé par l'interface doit être cohérent avec celui défini dans le tableau. Selon l'exemple suivant, le format de données renvoyé par json est le suivant.

{
    "id": 1,
    "name": "张三",
    "price" : "100"
}

L'extrait de code est le suivant :

<table  id= "table" ></table>
$ ( &#39;#table&#39; ). bootstrapTable ({
url :  &#39;data1.json&#39; ,
columns :  [{
field :  &#39;id&#39; ,
title :  &#39;Item ID&#39;
},  {
field :  &#39;name&#39; ,
title :  &#39;Item Name&#39;
},  {
field :  &#39;price&#39; ,
title :  &#39;Item Price&#39;
} ]
});

Mais si le format json renvoyé est le suivant, le tableau ne peut pas être rendu directement et le formateur dans le paramètre de colonne doit être utilisé pour personnaliser la méthode.

Pour le json ci-dessous, vous devez implémenter des méthodes personnalisées pour l'identifiant, le nom et le prix respectivement. Pour un modèle de développement où le front et le back end sont complètement séparés, utiliser cette méthode pour manipuler les données n’est évidemment pas optimal.

{
    "errcode": "OK",
    "data_list": [
                   {
                        "id": 1,
                                    "name": "张三",
                                    "price" : "100"
                    }
               ]
}

2. En opérant via $.get(), vous pouvez utiliser de manière plus flexible les données renvoyées par l'arrière-plan. Ici, nous utilisons les données du paramètre table pour personnaliser le format de la méthode pour recevoir les données

Extrait de code.

<table  id= "table" ></table>
$.get(&#39;/data/&#39;, function(data){
$ ( &#39;#table&#39; ). bootstrapTable ({
columns :  [{
field :  &#39;id&#39; ,
title :  &#39;Item ID&#39;
},  {
field :  &#39;name&#39; ,
title :  &#39;Item Name&#39;
},  {
field :  &#39;price&#39; ,
title :  &#39;Item Price&#39;
} ]
data: formatData(data)
});
})
// 格式化数据
var formatData = function (data) {
var l = [] ;
for ( var i = 0 ; i < data.data_list.length ; i++) {
           var m = data.data_list[i]
var d = {
&#39;id&#39;: m. id ,
&#39;name&#39;: m. name ,
&#39;price&#39;: m. price ,
}
l. push(d)
}
return l
} ;

Recommander l'apprentissage : "Tutoriel d'utilisation du bootstrap"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!