我是 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，我在其中定义了 View 集、序列化器和路由器，如下所示。
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
最佳答案
解决方案
您需要使用以下初始化代码来匹配您的数据结构:
$('#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>关于django - 将 DataTables 插件与 Django 框架集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31502909/