如何在 Ajax 中调用 Datatables draw() 方法？

Question

我正在尝试使用 AJAX 在我的 Django 应用程序中实现 datatables draw() 方法。我已经实现了 datatables 和 AJAX，它们工作正常。但是，每当我创建一个新对象并调用 draw() 方法以便数据 table 可以刷新 table 并以正确的方式显示新创建的数据时，我都会面临很多挑战。如果我添加 draw() 方法，table 根本不会被填充，除非我刷新页面。

main.js

//datatables
$(document).ready(function() {
    $('table').on('click', ".dropdownDatatableButton" ,function() {
      $( this ).toggleClass( "active");
    });

    function csrfSafeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    };

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

    var csrftoken =  jQuery("[name=csrfmiddlewaretoken]").val();

    var table = $('#boardsTable').DataTable({
        "autoWidth": false,
        "info": false,
        "lengthChange": false,
        "processing": true,
        "hover": true,
        "serverMethod": 'post',
        "searching": true,
        "ajax": "/boards/api/data/?format=datatables",
        "pagingType": "full_numbers",
        "order": [[ 0, "asc" ]],
        language: {
            search: "",
            "zeroRecords":  '<img class=' + '"dataTables-error-image"' + 'src=' + "'/static/media/images/empty-search.jpg'"
                            + '/>' + '<p class=' + '"dataTables-error-text"' + '>'
                            + 'No boards were found that match your search' + '<p/>',

            "loadingRecords": '<div class="spinner-border m-5" role="status">'
            + '<span class="sr-only d-block">Loading...</span> </div>'
            + '<p class="d-block text-center mt-3">Pulling board information...' + '</p>',

            "processing": '<p class="d-block text-center datatables-processing-text">Please wait...' + '</p>',

            "emptyTable":  '<img class=' + '"dataTables-error-image"' + 'src=' + "'/static/media/images/new.jpg'"
                            + '/>' + '<p class=' + '"dataTables-error-text font-weight-bold"' + '>'
                            + 'No boards to show right now' + '<p/>'
                            + '<p class=' + '"dataTables-empty-table-description"' + '>'
                            + 'When you start working on recruitment campaigns, we’ll list all your boards here.'
                            + '<p/>'
                            + '<a class="dataTables-error-create-btn show-only-on-mobile" data-bs-toggle="modal"'
                            + 'data-bs-target="#createBoardModal" data-bs-backdrop="static"'
                            + 'data-bs-keyboard="false">' + 'Create a board' + '<a/>',
            },

        initComplete : function() {
            $("#boardsTable_filter").detach().appendTo('.filter-form');
        },

        "drawCallback": function(settings) {
            var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
            pagination.toggle(this.api().page.info().pages > 1);
        },

        "columns": [
            {data: null,
                render: function ( data, type, row ) {
                // show the board avatar and make merge it with `data: name`
                    return '<a class="datatable-board-link" href="' + data.url.toLowerCase() + '/manage' + '">'
                    + '<img class="datatable-board-link-img" ' + 'src="' + data.avatar + '" ' + 'width="30px" '
                    + 'height="30px" ' + 'alt="board avatar" />' + data.name + '</a>' ;
                }
            },

            {data: null,
                render: function ( data, type, row, meta ) {
                    // show the URL which are accessible to candidates
                   return '<a class="new-tab-board-link" href="' + data.lead.username + '/'
                   + data.url + '" target="_blank">' + '/' + data.url
                   + '<span class="material-icons">open_in_new</span>' + '</a>';
               }
            },

            { data: "lead",
                render: function ( data, type, row, meta ) {
                    // show the lead recruiter avatar and combine the first and last names into a single table field
                    return '<a class="datatable-profile-link"' + 'href="'
                    + 'http://127.0.0.1:8080/people/teams/' + data.id + '/' + data.username.toLowerCase() +'"'
                    + 'target="_blank"' + '>' + '<img class="datatable-profile-link-img" ' + 'src="'+ data.avatar
                    + '" ' + 'width="30px" ' + 'height="30px" ' + 'alt="' + data.name + ' ' + "'s avatar" + '"'
                    + '/>' + data.name + '</a>';
                },
            },

            { data: null,
                render: function ( data, type, row, meta ) {
                    return '<div class="dropdown datatables-dropdown" id="datatablesDropdown">'
                    + '<span class="material-icons btn dropdownDatatableButton" id="dropdownDatatableButton"'
                    + 'type="button"' + 'data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'
                    + 'more_horiz</span>'
                    + '<div class="dropdown-menu dropdown-menu-right datatables-dropdown-inner"'
                    + ' aria-labelledby="dropdownDatatableButton">'
                    + '<ul>'
                    + '<li><a href="' + data.url.toLowerCase() + '/settings' + '">Board settings</a></li>'
                    + '<li><a class="btn btn-link btn-sm text-left">Delete</a></li>'
                    + '</ul>'
                    + '</div>'
                    + '</div>';
                },
            },
        ],

        "columnDefs": [
            {"width": "10%", "targets": 3, "orderable": false},
        ],
    });

    table.columns().iterator('column', function (ctx, idx) {
        $(table.column(idx).header()).append('<span class="sort-icon"/>');
    });

    // call the AJAX post method
    $("#createBoardViaModalForm").on('submit', function (e) {
        var spinner = $('#loader');
        for ( instance in CKEDITOR.instances ) {
            CKEDITOR.instances[instance].updateElement();
        }
        e.preventDefault();
        spinner.show();
        var serializedData = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: "post/ajax/board/",
            data: serializedData,
            success: function (data) {
                if($('input[type="checkbox"]').prop("checked") == true){
                    //some codes
                    ...
                    //take some serialised data and populate the table
                    // THIS IS WHERE THE ISSUE STARTS
                    var data = JSON.parse(data["data"]);
                    var fields = data[0]["fields"];
                    $("#boardsTable tbody").prepend(
                        `<tr>
                        <td>${fields["name"]||""}</td>
                        <td>${fields["url"]||""}</td>
                        <td>${fields["lead"]||""}</td>
                        </tr>`
                    );
                    // invoke datables draw() method to refresh the table
                    table.draw();
                    setTimeout(function(){
                        spinner.hide();
                    }, 1000);
                    console.log("Checkbox is checked. Modal will not be closed");
                }
                else if($('input[type="checkbox"]').prop("checked") == false){
                    // some codes
                    ...
                    table.draw();
                    // more codes
                }
            },
            error: function (jqXHR, textStatus, errorText) {
                let data = jqXHR.responseJSON;
                // more codes
                console.log('There are some errors on the submitted form. Check the data errors array')
                console.log(data)
            }
        })
    });

    //clear up the error logs when a user enters a value in the highlighted input field
});

Answer 1

我用的是datatables reload API.

table = $("#boardsTable").DataTable().ajax.reload();

Answer 2

在你的AJAX成功函数中，你可以这样画：

             success: function(data) { 
                    console.log(data);
                    if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                        var table = $('#boardsTable').DataTable();
                        table.rows.add(data.d.results).draw();
                    }
                }

如何在 Ajax 中调用 Datatables draw() 方法？

How do I call Datatables draw() method in Ajax?

javascript

django

ajax

datatables