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里使用Dom操作Xml
Sep 20 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
vue综合组件间的通信详解
Nov 06 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
js实现移动端吸顶效果
Jan 08 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
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python实现分数序列求和
2020/02/25 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
初中军训感想
2015/08/07 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python