jQuery 的插件 dataTables 是一個(gè)優(yōu)秀的表格插件，提供了針對(duì)表格的排序、瀏覽器分頁(yè)、服務(wù)器分頁(yè)、篩選、格式化等功能。
如何把數(shù)據(jù)庫(kù)中的數(shù)據(jù)以表格的形式展示到前端，實(shí)現(xiàn)有很多方法，最近用jquery的datatables插件來(lái)實(shí)現(xiàn)了發(fā)現(xiàn)還是比較簡(jiǎn)單的，今天我們來(lái)看一個(gè)例子，來(lái)說(shuō)明這個(gè)插件的使用，基本原理是view函數(shù)從數(shù)據(jù)庫(kù)中讀出數(shù)據(jù)，jquery通過(guò)ajax獲取數(shù)據(jù)并在前端展示出來(lái)，我們先定義一個(gè)models.py,如下：
from django.dbimport modelsclass MyModel(models.Model):someAttr = models.CharField()def __unicode__(self):return self.someAttr
然后定義我們的view函數(shù)：
fromdjango.httpimportHttpResponsefromdjango.coreimportserializersfrom .modelsimportMyModeldefmyModel_asJson(request):object_list = MyModel.objects.all() json = serializers.serialize('json', object_list)return HttpResponse(json, content_type='application/json')因?yàn)閐atatables接收的是json格式數(shù)據(jù)，所以從數(shù)據(jù)庫(kù)中讀出的數(shù)據(jù)要序列化，就是這句：
json = serializers.serialize(‘json', boject_list)
添加下url.py：
from django.conf.urlsimport patterns, urlurlpatterns = patterns('myapp.views',url(regex=r'^$',view='myModel_asJson',name='my_ajax_url'),)最后就是模板文件內(nèi)容了：
<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>其中url指定你的view函數(shù)名稱(chēng)，columns指定要顯示的列，這樣數(shù)據(jù)就以表格的形式展示出來(lái)了，要想美觀記得自己要上樣式，推薦bootstrap，datatables是一次把數(shù)據(jù)全部加載到前端來(lái)處理，所以如果你加載的條目非常多，就會(huì)有停頓感，必須要加上bServierSide參數(shù)。
關(guān)于jQuery插件datatables使用教程小編就給大家介紹到這里，希望對(duì)大家有所幫助！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
