将 DataTables 插件与 Django 框架集成

Question

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

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
    }
]

这是我的调试书签

Answer 1

解决方案

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

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

从dataSrc选项描述来看：

请注意，如果您的 Ajax 源仅返回要显示的数据数组，而不是对象，请将此参数设置为空字符串。

演示版

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

$(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"}
    ]    
  });

});