jQuery插件datatables使用教程

 更新时间:2016年04月21日 10:22:34   投稿:mrr  
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。接下来通过本文给大家介绍jQuery插件datatables使用教程,感兴趣的朋友一起学习吧

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

相关文章

  • 基于jquery实现弹幕效果

    基于jquery实现弹幕效果

    这篇文章主要为大家详细介绍了基于jquery实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Jquery AJAX POST与GET之间的区别

    Jquery AJAX POST与GET之间的区别

    本文是对Jquery中AJAX POST与GET之间的区别。进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • jQuery EasyUI tree增加搜索功能的实现方法

    jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。下面通过本文给大家分享jQuery EasyUI tree增加搜索功能,需要的朋友可以参考下
    2017-04-04
  • jQuery Validate表单验证深入学习

    jQuery Validate表单验证深入学习

    这篇文章主要介绍了jQuery Validate表单验证入门知识,该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • Tab页界面,用jQuery及Ajax技术实现

    Tab页界面,用jQuery及Ajax技术实现

    从桌面开发的时代开始,Tab页就是一个优异的界面布局形式,兼有菜单的样式和充分复用有限的界面的优点。
    2009-09-09
  • jQuery Easyui datagrid editor为combobox时指定数据源实例

    jQuery Easyui datagrid editor为combobox时指定数据源实例

    当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,这篇文章主要介绍了jQuery Easyui datagrid editor为combobox时指定数据源实例,有兴趣的可以了解一下。
    2016-12-12
  • AspNet中使用JQuery上传插件Uploadify详解

    AspNet中使用JQuery上传插件Uploadify详解

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用
    2015-05-05
  • 利用Jquery队列实现根据输入数量显示的动画

    利用Jquery队列实现根据输入数量显示的动画

    这篇文章给大家演示了如何利用Jquery队列实现输入不同的数量就显示不同的动画效果,文中给出了实例,让大家更容易理解,有需要的可以参考借鉴。
    2016-09-09
  • jquery 输入框数字限制插件

    jquery 输入框数字限制插件

    jquery 输入框数字限制插件,需要的朋友可以参考下。
    2009-11-11
  • jQuery弹出层插件Lightbox_me使用指南

    jQuery弹出层插件Lightbox_me使用指南

    在使用discuzx中有一个Message以及Dialog方法来显示信息对话框。今天写项目的时候,需要一个信息对话框,所以就着手利用lightbox_me插件来写一个做备用。
    2015-04-04

最新评论