有人知道如何在Django框架中实现Jquery Datatables吗?

时间:2017-07-26 16:33:09

标签: django datatables

我正在尝试使用Datatables和Django创建数据表,但是我输了。我得到的网页最多的是json数据。以下是我的模特:

from __future__ import unicode_literals

from django.db import models


class LikeDefectMatrix(models.Model):
    area = models.TextField(db_column='AREA', blank=True, null=False, primary_key=True)  # Field name made lowercase.
    type = models.TextField(db_column='TYPE', blank=True, null=True)  # Field name made lowercase.
    defect_name = models.TextField(db_column='DEFECT_NAME', blank=True, null=True)  # Field name made lowercase.
    update = models.TextField(db_column='UPDATE', blank=True, null=True)  # Field name made lowercase.
    code = models.BigIntegerField(db_column='CODE', blank=True, null=True)  # Field name made lowercase.

    class Meta:
        managed = False
        db_table = 'Like_Defect_Matrix'

以下是我的观点:

from .models import LikeDefectMatrix
from django.http import HttpResponse
from django.core import serializers

# Create your views here.


    def postsjson(request):
        object_list = LikeDefectMatrix.objects.all()
        json = serializers.serialize('json', object_list)
        return HttpResponse(json, content_type='application/json')

这是我的base.html文件:

{% load staticfiles %}
<!DOCTYPE html>
<html lang = "en">
    <head>
        Example
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/jquery.dataTables.min.css'%}" />
        <script src="{% static 'js/jquery.js' %}"></script>
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
    </head>
    <body>
    <div id="page-wrapper">
        <div class="container-fluid">
        {% block body %}
        {% endblock body %}
        </div>
    </div>
</body>
{% block js %}
{% endblock js %}
</html>

最后是我的datatables.html

{% extends "base.html" %}
{% block body %}
        <div class="container">
            <table id="postsTable" class="table">
                 <thead>
                     <tr>
                         <th>area</th>
                         <th>type</th>
                         <th>defect_name</th>
                         <th>code</th>
                         <th>update</th>
                     </tr>
                 </thead>
                 <tbody></tbody>
            </table>
        </div>
{% endblock body %}
{% block js %}
<script>
     $(document).ready(function() {
         $('#postsTable').DataTable( {
             "processing": true,
             "ajax": {
                 "processing": true,
                 "url": "{% url 'my_ajax_url' %}",
                 "dataSrc": ""
             },

             "columns": [
                     { "data": "area" },
                     { "data": "type" },
                     { "data": "defect_name"},
                     { "data": "update" },
                     { "data": "code" }
                 ]
         } );
     } );
 </script>
{% endblock js %}

我一直在寻找这样做的直接方式,但我没有成功。我非常感谢你的帮助。

0 个答案:

没有答案