Question

集成DataTables插件非常简单，并且集成编辑器附加组件也非常轻松 - 在某种程度上。但是，客户端/服务器端对我来说是一个熊。

以下是DataTables和Editor的JavaScript。我无法解决的部分是以下代码中的代码片段

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（通过上面的代码片段）传递给后面使用Ajax的Javascript，这是DataTables插件的当前要求。

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

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

JAVASCRIPT（DataTables / Editor）

    $(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的table元素被传递给DataTable，魔术在那里发生; DataTables将基于此分页，订购和允许重新排序。如果您不知道如何构建JSON端点，除非确实需要进行表内编辑，否则您现在可以避免使用它。

如果您确实想要探索构建JSON API，Django Rest Framework是一个很好的选择，可以很好地控制模型的序列化。这意味着您可以使用DRF中的模块化Viewsets和Serializers在单个端点上为给定模型/相关模型集构建所有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)）。或者，将您的查询集转换为有序的dict并将其传递给JsonResponse。

JQuery的DataTables Editor插件和Django

JAVASCRIPT（DataTables / Editor）

HTML

1 个答案: