JQuery 的 DataTables Editor 插件和 Django

Posted 2023-05-07

【中文标题】JQuery 的 DataTables Editor 插件和 Django

【英文标题】：JQuery's DataTables Editor plugin and Django

【发布时间】：2016-11-01 11:37:09

【问题描述】：

集成 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 %

【问题讨论】：

您是否考虑过使用 DataTables PHP 库？作者编写了一个服务器端库，它的文档很好（尽管很难找到）。 Link to Documentation

谢谢，实际上我没有考虑过。需要考虑的事情

【参考方案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。它非常快，基本上可以归结为：

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

【讨论】：

感谢您的回复。 DataTables 有一个名为 Editor 的附加插件。该附加组件需要 Ajax。也需要转换为 JSON，这就是我卡住的地方。我可以让 Ajax 独立于 DataTables 和编辑器附加组件（插件）工作，并且我将数据库查询结果转换为 JSON 不是问题，但附加组件不是问题。

您必须记住的是，您的 DataTables 初始化的 ajax 参数是一个 url，在该 url 中发送 POST 以更改字段。使用 DRF 或其他方式设置 API 后，提供用于更新操作的 url，您将能够更新 :)