Utilisation des tables de données du plug-in jQuery tutoriel_jquery

Le plug-in dataTables de jQuery est un excellent plug-in de table qui permet le tri des tables, la pagination du navigateur, la pagination du serveur, le filtrage, le formatage et d'autres fonctions.

Comment afficher les données de la base de données au front-end sous la forme d'un tableau. Il existe de nombreuses façons d'y parvenir. Récemment, j'ai utilisé le plug-in datatables de jquery pour le réaliser et j'ai trouvé que c'était relativement simple. Aujourd'hui, nous allons regarder un exemple pour illustrer l'utilisation de ce plug-in, le principe de base est que la fonction d'affichage lit les données de la base de données, jquery obtient les données via ajax et les affiche sur le front-end. models.py, comme suit :

from django.dbimport models
class MyModel(models.Model):
someAttr = models.CharField()
def __unicode__(self):
return self.someAttr

Ensuite, définissez notre fonction d'affichage :

fromdjango.httpimportHttpResponse
fromdjango.coreimportserializers
from .modelsimportMyModel
defmyModel_asJson(request):
object_list = MyModel.objects.all() 
json = serializers.serialize('json', object_list)
return HttpResponse(json, content_type='application/json')

Étant donné que datatables reçoit des données au format json, les données lues dans la base de données doivent être sérialisées, ce qui correspond à cette phrase :

json = serializers.serialize(‘json', boject_list)

Ajoutez l'url.py suivante :

from django.conf.urlsimport patterns, url
urlpatterns = patterns('myapp.views',
url(regex=r'^$',
view='myModel_asJson',
name='my_ajax_url'),
)

Le dernier est le contenu du fichier modèle :

<tablecellpadding="0" cellspacing="0" border="0" id="example">
<thead>
<tr><th>My Attr Heading</th></tr>
</thead>
<tbody></tbody>
</table>
<scripttype="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"ajax": {
"processing": true,
"url": "{% url 'my_ajax_url' %}",
"dataSrc": ""
},
"columns": [
{ "data": "fields.someAttr },
{ "data": "pk" }
]
} );
} );
</script>

L'url précise le nom de votre fonction d'affichage, et columns précise les colonnes à afficher, pour que les données soient affichées sous forme de tableau, pensez à le styliser vous-même. est recommandé, et datatables charge toutes les données en même temps, le front-end les gère, donc si vous chargez beaucoup d'entrées, il y aura une sensation de pause et le paramètre bServierSide doit être ajouté.

L'éditeur vous présentera ici le didacticiel d'utilisation des tables de données du plug-in jQuery.