jQuery插件datatables使用教程


Posted in Javascript onApril 21, 2016

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使用教程小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
JavaScript预解析及相关技巧分析
Apr 21 #Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 #Javascript
JS实现队列与堆栈的方法
Apr 21 #Javascript
JS、jQuery中select的用法详解
Apr 21 #Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 #Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 #Javascript
浅析JS动态创建元素【两种方法】
Apr 20 #Javascript
You might like
德劲1102收音机的打理维修案例
2021/03/02 无线电
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php内存缓存实现方法
2015/01/24 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
DIV菜单层实现代码
2010/11/19 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
layui实现文件或图片上传记录
2018/08/28 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
python3抓取中文网页的方法
2015/07/28 Python
基于Python的关键字监控及告警
2017/07/06 Python
django 环境变量配置过程详解
2019/08/06 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
公司爱心捐款倡议书
2014/05/14 职场文书
社区重阳节活动总结
2015/03/24 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
商标侵权律师函
2015/05/27 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
vscode内网访问服务器的方法
2022/06/28 Servers