使用基于 jQuery 的 Datatables 表格插件

Question

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