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)

以下是来自网址的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

<强>解

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

List<int> values = new List<int>();
str.Split('\t').ToList().ForEach(i =>
               values.Add(Int32.Parse(i)));

来自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"}
    ]    
  });

});

Answer 2

Gyrocode.com提到dataSrc字段是绝对正确的。然而，即使这不是一个解决方案。经过大量的试验和错误，我发现我使用的是DataTables 1.9.4版本，而在1.10版本中，语法与调用ajax函数非常不同。

因此，为了使其有效，ajax字段必须由sAjaxSource替换。此link中介绍了此转化的详细参考。但是，最好的解决方案当然是将DataTables版本更新为1.10。

我想提一下DataTables Debugger工具，它真的帮助我调试了这个问题，我想向将来调试DataTables相关问题的人们推荐它。

将DataTables插件与django框架集成

2 个答案: