数据表重新加载不成功

Question

我正在使用以下 CDN 版本的数据表 (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js)
在页面底部加载如下：

<script type="application/javascript"
            src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
 </script>
 <script type="text/javascript">
        $(document).ready(function() {
            // On page load: datatable
            var plugins_table=$('.plugins_table').DataTable({
                "ajax":"indexAjax.php?p=listPluginsforSite",
                "columns":[
                    {"data":"plugin_name"},
                    {"data":"plugin_site_version"},
                    {"data":"plugin_uptodate_status"},
                    {"data":"plugin_activate_choice"},
                    {"data":"plugin_install_choice"}
                ],
                "language": {
                processing: "Traitement en cours...",
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher _MENU_ Plugins",
                info: "Affichage du Plugin _START_ &agrave; _END_ sur _TOTAL_ ",
                infoEmpty: "Affichage du Plugin 0 &agrave; 0 sur 0 ",
                infoFiltered: "(filtr&eacute; sur _MAX_ Plugins au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun Plugins &agrave; afficher",
                emptyTable: "Aucune donnée disponible dans le tableau",
                paginate: {
                    first: "Premier",
                    previous: " Pr&eacute;c&eacute;dent",
                    next: "Suivant  ",
                    last: "Dernier"
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
                paging: true,
                autoWidth: false,
                responsive: true,
                pagingType: "full_numbers",
            });
        // This event is triggered by a button with class '.activate_state' on each row...
        $('#plugins_table tbody').on('click', '.activate_choice', function () {
            var plugin_id=$(this).data("id") ;
            var plugin_active_state=$(this).data("active-state");
            var request   = $.ajax({
                url:          'indexAjax.php?p=togglePluginActiveState',
                data:         {plugin_id:plugin_id,active_state:plugin_active_state},
                dataType:     'json',
                type:         'post'
            });
            request.done(function(response){
            if (response.result == 'success') {
                // Reload datable: NEITHER commented solutions work !
                //plugins_table.api().ajax.reload();
                //plugins_table.DataTable().ajax.reload();
            }
        });
        });
        });
    </script>

当我对页面进行“手动”重新加载/刷新时，表格/页面会使用正确的数据/更改重新刷新，但是在成功调用 ajax 后我无法让 API 重新加载表格...

Answer 1

在第一行中，您使用的是api()，但只有在使用.dataTable() 语法初始化数据表时才需要这样做（注意小“d”）。因为您使用的是 .DataTable 语法（大写“D”），所以您已经在使用 DataTables api。

在第二行中，您尝试重新初始化数据表，但 plugins_table 已经作为数据表存在。相反，像这样刷新它：

plugins_table.ajax.reload();

Answer 2

出于某种原因，按照以下方式重命名数据表对我有用：

$('.plugins_table').DataTable().ajax.reload();

代替上一个：

plugins_table.DataTable().ajax.reload();

其中 'plugins_table' 是表的初始命名变量。

我有兴趣解释这种“行为...！”