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 相关文章推荐
Js动态创建div
Sep 25 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
让table变成exls的示例代码
Mar 24 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
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
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
Vue中props的使用详解
2018/06/15 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
对Python中9种生成新对象的方法总结
2018/05/23 Python
python实现抽奖小程序
2020/04/15 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python实现数值积分方式
2019/11/20 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
工程质量月活动方案
2014/02/19 职场文书
图书馆标语
2014/06/19 职场文书
工作所在部门证明
2014/09/21 职场文书
2019 入党申请书范文
2019/07/10 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
JavaScript 反射学习技巧
2021/10/16 Javascript