JQuery 的 DataTables Editor 插件和 Django

Question

集成 DataTables 插件非常简单，集成 Editor 插件也非常轻松 - 在某种程度上。但是，客户端/服务器端对我来说是一个负担。

以下是用于数据表和编辑器的 JavaScript。我无法解决的部分是后面代码中的这个 sn-p

var table = $('#theader').DataTable( {
    **bProcessing: true,
    bServerSide: true,
    start: 1,
    dataSrc: "id",
    sAjaxSource: 'load_user_json',**
}

JavaScript后面是与JavaScript相关的html代码。

在 DataTables/Editor 站点上给出的示例在服务器端使用 PHP。我对 PHP 的了解为零，我不知道如何用 Python 替换它以将 JSON（通过上面的代码 sn-p）传回使用 Ajax 的 Javascript，这是 DataTables 插件的当前要求。

一切看起来都很棒。除了让新/编辑/删除操作起作用之外，一切都正常。我从 DataTables/Editor 网站上的以下示例开始。

https://editor.datatables.net/examples/styling/bootstrap.html

---

JAVASCRIPT（数据表/编辑器）

    $(document).ready(function() {
        $(".dropdown-toggle").dropdown();
    });


    $(document).ready(function() {
        $(".dropdown-toggle").dropdown();
    });


            $(document).ready(function edit_users() {

                 var csrftoken = getCookie('csrftoken');

                 var editorUser = new $.fn.dataTable.Editor( {

                    ajax: '',  
                    table: "#theader",
                    fields: [ {
                            label: "ID:",
                            name: "ID"
                     }, {
                            label: "Name:",
                            name: "NAME"
                     }, {
                            label: "CM:",
                            name: "CM"
                     }, {
                            label: "Email:",
                            name: "EMAIL"
                     } ]
                   } );


          if ( !$.fn.dataTable.isDataTable( '#theader' ) ) {

            $.ajaxSetup({
               beforeSend: function(xhr, settings) {
               if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                  xhr.setRequestHeader("X-CSRFToken", csrftoken);
               }
             }
            });

            var table = $('#theader').DataTable( {
                bProcessing: true,
                bServerSide: true,
                start: 1,
                dataSrc: "id",
                sAjaxSource: 'load_user_json',  
                columns: [
                        { data: "ID" },
                        { data: "NAME" },
                        { data: "CM" },
                        { data: "EMAIL" }                  
                 ],
                 select: true
             } );  
          }

        new $.fn.dataTable.Buttons( table, [
            { extend: "create", editor: editorUser },
            { extend: "edit",   editor: editorUser },
            { extend: "remove", editor: editorUser }
        ] );

        table.buttons().container()
            .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

       $('#theader tfoot th').each( function () {
           var title = $(this).text();
           $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
       } );

       table.columns().every( function () {
           var that = this;

           $('input', this.footer() ).on( 'keyup change', function () {
               if ( that.search() !== this.value ) {
                   that
                       .search( this.value )
                       .draw();
               }
           } );
       } );

    } );

HTML

    {% extends "base.html" %}
    {% load crispy_forms_tags %}
    {% load staticfiles %}

    {% block content %}

    {% if queryset %}

    <h2>Current Users</h2>

    <table id="theader" class="table table-bordered table-hover small order-column">

        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>CM</th>
                <th>EMAIL</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>CM</th>
                <th>EMAIL</th>
            </tr>
        </tfoot>

        <tbody>
                {% for row in queryset %}
                <tr id=forloop.counter>         <!-- Needed for DataTables row identification -->
                    <td>{{ row.operator_id }}</td>
                    <td>{{ row.fullname }}</td>
                    <td>{{ row.cm }}</td>
                    <td>{{ row.email }}</td>
                </tr>
                {% endfor %}
        </tbody>
    </table>

    {% else %}
    <h4>No SKUs have been defined</h4>
    {% endif %}

    <script src="{% static 'js/searchable-users-table.js' %}"></script>

    {% endblock %}

Answer 1

首先要做的事；您不必提供 JSON 端点来使用 DataTables.js。您可以呈现一个表并在其上调用 DataTable()。

举个例子：

    $(document).ready(function(){
        $('#theader').DataTable({
            pageLength:25,
            rowReorder:false,
            colReorder:true,
            order: [[1, 'asc'],[0, 'asc']]
        });
    });

id 为theader 的表格元素被传递给DataTable，奇迹发生了； DataTables 将在此基础上进行分页、排序并允许重新排序。如果您不知道如何构建 JSON 端点，您现在可以避免使用它，除非您确实需要进行表内编辑。

如果您确实想探索构建 JSON API，Django Rest Framework 是一个不错的选择，它允许对模型的序列化进行精细控制。这意味着您可以使用 DRF 中的模块化视图集和序列化器在单个端点为给定模型/相关模型集构建所有 CRUD 功能。

但是，对于快速而肮脏的仅检索应用程序，您还可以构建一个视图，在页面加载时通过 JS/JQuery 的 AJAX 函数调用它，并在您的 Django 视图中返回一个JsonResponse。它非常快，基本上可以归结为：

1. 根据某些参数（通过 request.GET、request.POST 或 url 参数提供）检索模型的查询集
2. 根据需要处理。
3. 转换一组值 (my_queryset=SomeModel.objects.filter(something=somevalue).values('field_1','field2'))
4. 序列化为 JSON 并响应，如果不返回字典，则在 JsonResponse kwargs 中设置 safe=False。(return JsonResponse(my_queryset, safe=False))。或者，将您的查询集转换为有序字典并将其传递给 JsonResponse。