将 DataTables 插件与 django 框架集成

Question

我是 django 框架和数据表的初学者。目前，我正在尝试使用从服务器返回的数据加载 jquery DataTable。我已经使用 django REST 框架构建了一个 api 来将数据传递给 DataTables。但是，我无法从服务器的 json 数据中加载数据表。请在下面找到我的代码片段，如果我遗漏了什么请告诉我。

index.html 如下所示。

<table id="packages_table" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>User Name</th>
                <th>First Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
     </table>
<script type="text/javascript">
    $(document).ready(function () {
        $('#packages_table').dataTable({
            ajax: 'http://127.0.0.1:3434/user/',
            columns: [
                { "data": "username"},
                { "data": "first_name"},
                { "data": "email"},
            ]
        });
    });
</script>

urls.py，我在这里定义了视图集、序列化程序和路由器，如下所示。

class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ('username', 'first_name', 'email', 'is_staff')

# ViewSets define the view behavior.

class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all()
    serializer_class = UserSerializer


# Routers provide an easy way of automatically determining the URL conf.
router = routers.DefaultRouter()
router.register(r'user', UserViewSet)

# Wire up our API using automatic URL routing.
urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^$', include(datagrid_urls)),
    #configure to use the browsable API by adding REST framework's login and logout views
    url(r'^', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
]  + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

下面是来自 url 的 json 数据。

[
    {
        "url": "http://127.0.0.1:3434/user/2/",
        "username": "morgoth",
        "first_name": "morgoth",
        "email": "duke.valafar@gmail.com",
        "is_staff": true
    },
    {
        "url": "http://127.0.0.1:3434/user/3/",
        "username": "anna",
        "first_name": "",
        "email": "anna@anna.com",
        "is_staff": false
    },
    {
        "url": "http://127.0.0.1:3434/user/4/",
        "username": "adam",
        "first_name": "",
        "email": "ada@abc.com",
        "is_staff": false
    }
]

这是我的 debug bookmarklet

Answer 1

解决方案

您需要使用以下初始化代码来匹配您的数据结构：

$('#packages_table').dataTable({
    ajax: {
        url: 'http://127.0.0.1:3434/user/',
        dataSrc: '' 
    },
    columns: [
        { "data": "username"},
        { "data": "first_name"},
        { "data": "email"},
    ]
});

来自dataSrc选项说明：

Note that if your Ajax source simply returns an array of data to display, rather than an object, set this parameter to be an empty string.

演示

$(document).ready(function() {
  // AJAX emulation for demonstration only
  $.mockjax({
    url: 'arrays.txt',
    responseTime: 200,
    response: function(settings) {
      this.responseText = [
        {
          "url": "http://127.0.0.1:3434/user/2/",
          "username": "morgoth",
          "first_name": "morgoth",
          "email": "duke.valafar@gmail.com",
          "is_staff": true
        }, {
          "url": "http://127.0.0.1:3434/user/3/",
          "username": "anna",
          "first_name": "",
          "email": "anna@anna.com",
          "is_staff": false
        }, {
          "url": "http://127.0.0.1:3434/user/4/",
          "username": "adam",
          "first_name": "",
          "email": "ada@abc.com",
          "is_staff": false
        }
      ]
    }
  });

  var table = $('#packages_table').DataTable({
    ajax: {
      url: "arrays.txt",
      dataSrc: ""
    },
    columns: [
        { "data": "username" },
        { "data": "first_name"},
        { "data": "email"}
    ]    
  });

});

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">

  <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
  <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>

</head>

<body>
  <table id="packages_table" class="display">
    <thead>
      <tr>
        <th>User Name</th>
        <th>First Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Answer 2

Gyrocode.com 提到 dataSrc 字段是绝对正确的。然而，即使这样也不能作为解决方案。经过反复试验，我发现我使用的是 DataTables 1.9.4 版，而在 1.10 版中调用 ajax 函数的语法非常不同。

因此，要使其正常工作，ajax 字段必须替换为 sAjaxSource。此 link 中包含对此转换的详细参考。但是，最好的解决方案当然是将 DataTables 版本更新到 1.10。

我想提一下 DataTables Debugger 工具，它确实帮助我调试了这个问题，我想把它推荐给那些将来在调试 DataTables 相关问题时可能会遇到困难的人。

将 DataTables 插件与 django 框架集成

Integrating DataTables plugin with django framework

django

datatable

datatables

django-rest-framework