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判断对象是否存在的方法,对比分析了纯javascript与jQuery实现判断对象是否存在的功能区别,是非常实用的技巧,需要的朋友可以参考下
2015-02-02
jquery做的一个简单的屏幕锁定提示框
这篇文章主要介绍了使用jquery做的一个简单的屏幕锁定提示框,需要的朋友可以参考下
2014-03-03
jQuery实现简单的图片查看器
这篇文章主要介绍了jQuery实现简单的图片查看器的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-12-12
Jquery使用小技巧汇总
本文给大家汇总介绍了一下Jquery使用小技巧，算是比较全面了，一共26个小店，非常细致,需要的朋友可以参考下
2015-12-12
jquery ajax 请求小技巧实例分析
这篇文章主要介绍了jquery ajax 请求小技巧,结合实例形式分析了jquery ajax请求操作相关配置与使用技巧,需要的朋友可以参考下
2019-11-11
jQuery的ajax中使用FormData实现页面无刷新上传功能
这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。需要的的朋友参考下本文
2017-01-01
jQuery的初始化与对象构建之浅析
之前本人的工作和学习多以原生js 为主，对jQuery 一直都不是很了解，但jQuery 作为当今最优秀的js 类库之一，必须是要花时间好好学习下的，今天正好蛋疼，读了里面一些代码
2011-04-04
浅谈EasyUI中Treegrid节点的删除
本文给大家介绍的是EasyUI中树节点（Treegrid节点）的删除的方法和示例，这里推荐给大家，希望对大家能有所帮助。
2015-03-03
jquery的ajax请求全面了解
jquery中封装了一些ajax请求的方法，很实用，整理出来与大家分享下，感兴趣的朋友可以参考下哈，希望可以帮助到你
2013-03-03
jQuery源码分析之Callbacks详解
这篇文章主要分为以下知识：什么是Callbacks、Callbacks模型、基本模块实现、once和auto(memory)、源码和源码下载，十分的细致全面，这里推荐给大家，有需要的小伙伴参考下吧。
2015-03-03