使用基于 jQuery 的 Datatables 表格插件

发布于 2019-11-29 20:06:18 字数 1964 浏览 957 评论 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'^

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

<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 参数。

, view='myModel_asJson', name='my_ajax_url'), )

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

其中 url 指定你的 view 函数名称,columns 指定要显示的列,这样数据就以表格的形式展示出来了,要想美观记得自己要上样式,推荐 bootstrap,datatables 是一次把数据全部加载到前端来处理,所以如果你加载的条目非常多,就会有停顿感,必须要加上 bServierSide 参数。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。