时间:2021-05-26
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。
如何把数据库中的数据以表格的形式展示到前端,实现有很多方法,最近用jquery的datatables插件来实现了发现还是比较简单的,今天我们来看一个例子,来说明这个插件的使用,基本原理是view函数从数据库中读出数据,jquery通过ajax获取数据并在前端展示出来,我们先定义一个models.py,如下:
from django.dbimport modelsclass MyModel(models.Model):someAttr = models.CharField()def __unicode__(self):return self.someAttr然后定义我们的view函数:
fromdjango.httpimportHttpResponsefromdjango.coreimportserializersfrom .modelsimportMyModeldefmyModel_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, urlurlpatterns = 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使用教程小编就给大家介绍到这里,希望对大家有所帮助!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
首先介绍下这两个插件功能 1.DataTables是一个jQuery的表格插件。官方网站及其下载地址:http:/www.datatables.net其主要特点
本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法。分享给大家供大家参考。具体如下:DataTables是一个jQuery
DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下一、初始化在页面中Colu
DataTables是一个jQuery的表格插件,记录一下在Laravel中使用的常用功能和用法,比如ajax获取数据,自定义搜索,效果展现,选项说明等等,有一
参考自官方文档,需要引入jquery.js,jquery.dataTables.js,dataTables.bootstrap.js(可选),由于时间紧,省略了