Verwendung von jQuery-Plug-in-Datentabellen, Tutorial_jquery

jQuerys Plug-in dataTables ist ein hervorragendes Tabellen-Plug-in, das Tabellensortierung, Browser-Paging, Server-Paging, Filterung, Formatierung und andere Funktionen bietet.

So zeigen Sie die Daten in der Datenbank in Form einer Tabelle an. Es gibt viele Möglichkeiten, dies zu erreichen. Kürzlich habe ich das Datatables-Plugin verwendet, um dies zu realisieren, und festgestellt, dass es relativ einfach ist. Heute werden wir uns ein Beispiel ansehen, um die Verwendung dieses Plug-Ins zu veranschaulichen. Das Grundprinzip besteht darin, dass die Ansichtsfunktion Daten aus der Datenbank liest, JQuery die Daten über Ajax abruft und sie im Frontend anzeigt models.py, wie folgt:

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

Dann definieren Sie unsere Ansichtsfunktion:

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')

Da datatables Daten im JSON-Format empfängt, müssen die aus der Datenbank gelesenen Daten serialisiert werden, was dieser Satz ist:

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

Fügen Sie die folgende URL.py hinzu:

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

Das letzte ist der Inhalt der Vorlagendatei:

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

Die URL gibt den Namen Ihrer Ansichtsfunktion an und columns gibt die anzuzeigenden Spalten an, sodass die Daten in Form einer Tabelle angezeigt werden. Wenn Sie möchten, dass sie schön ist, denken Sie daran, sie selbst zu formatieren wird empfohlen, und datatables lädt alle Daten auf einmal. Wenn Sie also viele Einträge laden, entsteht ein Pausengefühl, und der Parameter bServierSide muss hinzugefügt werden.

Der Herausgeber stellt Ihnen hier das Tutorial zur Verwendung von jQuery-Plug-In-Datentabellen vor. Ich hoffe, es wird Ihnen hilfreich sein!