将 DataTables 插件与 django 框架集成
Posted
技术标签:
【中文标题】将 DataTables 插件与 django 框架集成【英文标题】：Integrating DataTables plugin with django framework 【发布时间】：2015-10-08 18:34:04 【问题描述】：我是 django 框架和 DataTables 的初学者。目前，我正在尝试使用从服务器返回的数据加载一个 jquery DataTable。我已经使用 django REST 框架构建了一个 api 来将数据传递给 DataTables。但是，我无法从服务器的 json 数据中加载 DataTable。请在下面找到我的代码 sn-ps，如果我遗漏了什么，请告诉我。
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
【问题讨论】：
DataTables 有一种非常特殊的格式，这是它所期望的，我相当肯定你不能将它与 DRF 匹配。 【参考方案1】：解决方案
您需要使用以下初始化代码来匹配您的数据结构：
$('#packages_table').dataTable(
ajax:
url: 'http://127.0.0.1:3434/user/',
dataSrc: ''
,
columns: [
"data": "username",
"data": "first_name",
"data": "email",
]
);
来自dataSrc 选项说明：
请注意，如果您的 Ajax 源只是返回一个数据数组到 显示，而不是对象，将此参数设置为空 字符串。
演示
$(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>【讨论】：
非常感谢您的回答。我按照您的建议尝试了修改，但没有奏效。我认为我非常接近并且缺少一些非常基本的东西。我可以在浏览器中渲染表格，只有数据没有加载。 @valafar，添加了演示以显示代码有效，检查网络选项卡中的连接并确保您收到来自http://127.0.0.1:3434/user/ 的数据。
在我的情况下，ajax 代码没有被执行。我查看了开发者控制台，并没有 XHR 请求。知道我可能错过了什么吗？
@valafar，尝试在dataSrc: '' 之后添加dataType: "jsonp" 作为dataSrc: '', dataType: "jsonp"。
我已经试过了。也尝试使用cache: false,，但效果不佳。我已经用数据表调试小书签结果更新了我的问题。你能检查一次，让我知道它是否看起来不错？【参考方案2】：
Gyrocode.com 关于提及dataSrc 字段是绝对正确的。然而，即使这样也不能作为解决方案。经过大量的试验和错误，我发现我使用的是 1.9.4 版本的 DataTables，而在 1.10 版本中调用 ajax 函数的语法非常不同。
因此，要使其工作，必须将 ajax 字段替换为 sAjaxSource。此link 中涵盖了此转换的详细参考。
但是，最好的解决方案当然是将 DataTables 版本更新到 1.10。
我想提一下 DataTables Debugger 工具，它确实帮助我调试了这个问题，我想把它推荐给将来在调试 DataTables 相关问题时可能会卡住的人。
【讨论】：
以上是关于将 DataTables 插件与 django 框架集成的主要内容，如果未能解决你的问题，请参考以下文章
Django：模型和视图以及 jQuery DataTables，hello world 示例