jquery實現文本框的禁用和啟用
562
2024-02-10
jQuery 的插件 dataTables 是一個優秀的表格插件,提供了針對表格的排序、瀏覽器分頁、服務器分頁、篩選、格式化等功能。
如何把數據庫中的數據以表格的形式展示到前端,實現有很多方法,最近用jquery的datatables插件來實現了發現還是比較簡單的,今天我們來看一個例子,來說明這個插件的使用,基本原理是view函數從數據庫中讀出數據,jquery通過ajax獲取數據并在前端展示出來,我們先定義一個models.py,如下:
from django.dbimport models class MyModel(models.Model): someAttr = models.CharField() def __unicode__(self): return self.someAttr
然后定義我們的view函數:
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')
因為datatables接收的是json格式數據,所以從數據庫中讀出的數據要序列化,就是這句:
json = serializers.serialize(‘json', boject_list)
添加下url.py:
from django.conf.urlsimport patterns, url urlpatterns = patterns('myapp.views', url(regex=r'^$', view='myModel_asJson', name='my_ajax_url'), )
最后就是模板文件內容了:
<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函數名稱,columns指定要顯示的列,這樣數據就以表格的形式展示出來了,要想美觀記得自己要上樣式,推薦bootstrap,datatables是一次把數據全部加載到前端來處理,所以如果你加載的條目非常多,就會有停頓感,必須要加上bServierSide參數。
關于jQuery插件datatables使用教程小編就給大家介紹到這里,希望對大家有所幫助!
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!