使用基于 jQuery 的 Datatables 表格插件 - 文章教程

使用基于 jQuery 的 Datatables 表格插件

发布于 2019-11-29 字数 2235 浏览 893 评论 0

如何把数据库中的数据以表格的形式展示到前端,实现有很多方法,最近用 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'),
)

最后就是模板文件内容了:

<table cellpadding="0" cellspacing="0" border="0" id="example">
  <thead>
    <tr><th>My Attr Heading</th></tr>
  </thead>
  <tbody></tbody>
</table>
 
<script type="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 参数。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0