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 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
vue - props 声明数组和对象操作
Jul 30 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 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容易忘记的知识点分享
2013/04/30 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
公证书样本
2014/04/10 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
结婚保证书
2015/01/16 职场文书
销售员岗位职责范本
2015/04/11 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers