Question

这是一个让问题更加清晰的问题的截屏视频......

这是我的第一个项目，我试图让我的头脑围绕AJAX，所以我遇到了一些绊脚石。

我有一个数据表，可以通过AJAX从JSON输出加载用户详细信息。

有一个“停用”按钮可以取消激活用户帐户。

我已将popconfirm id应用于每一行......

            <script type="text/javascript">
                $(document).ready(function() {
                    $('#user_list').DataTable( {
                        stateSave: true,
                        "pageLength": 20,
                        "ajax": {
                            "url": "data/JSON_users_list.php",
                            "dataSrc": "",
                        },

                        "columns": [
                            { "data": "profile_photo_path" },
                            { "data": "namebulk" },
                            { "data": "email" },
                            { "data": "active" },
                            { "data": "id"}
                        ],
                        "columnDefs": [
                            { sClass: "hidden-xs hidden-sm", "targets": [ 0 ] },
                            { sClass: "user-name", "targets": [ 1 ] },
                            { sClass: "hidden-xs hidden-sm", "targets": [ 2 ] },
                            { sClass: "action-links", "targets": [ 3 ] },
                            { "width": "1%", "targets": 0 },
                            {
                            "targets": [ 4 ],
                            "visible": false,
                            "searchable": false
                        }
                        ],
                        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                              $('td:eq(0)', nRow).html('<div style="background: url(\''+aData.profile_photo_path+'\');" class="image-circle-50" id="'+aData.id+'-img"></div>');
                              $('td:eq(1)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" class="name edit" id="showmenu"><span id="'+aData.id+'-first_name">'+aData.first_name+'</span> <span id="'+aData.id+'-last_name">'+aData.last_name+'</span></a><span id="'+aData.id+'-username">'+aData.username+'</span>');

                              $('td:eq(3)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" id="showmenu" class="edit"><i class="linecons-pencil"></i>Edit</a><a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a>');

                              return nRow;
                        },
                    } );

                    var myTable = $('#user_list').DataTable();

                    yadcf.init(myTable, [
                        {column_number : 0, filter_type: 'none'},
                        {column_number : 1, filter_type: 'text'},
                        {column_number : 2, filter_type: 'text'}
                    ]);


                } );
            </script>

这是应该初始化popconfirm

的特定行

 <a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a>

popconfirm JS可以在这里找到：https://github.com/Ifnot/PopConfirm

以下是在ID为“deactivate”的任何内容上初始化popconfirm的代码：

    <script type="text/javascript">
        $(document).ready(function() {

            // Custom Title, Content and Placement
            $("#deactivate").popConfirm({
                title: "Are you sure?",
                content: "All previous records of this user will be maintained on the system for consistency",
                placement: "left",
                noBtn: "Cancel"
            });
        });
    </script>

我尝试将其更改为：

$（'＃main-content'）。ready（function（）{

和

$（'body'）。ready（function（）{

确保初始化出现在身体或主要内容DIV中的任何内容，但仍然没有运气....

我在这里错过了一些简单的东西，还是本身就不会像这样工作的popconf？

由于

Answer 1

您是否在脚本标记中添加了此文件：页面中的jquery.popconfirm.js？（参见https://github.com/Ifnot/PopConfirm上的自述文件）

Answer 2

我认为剧本本身在这方面本质上存在缺陷，我尝试了另一个http://flwebsites.biz/jConfirm/，这完美无缺

Answer 3

我知道这是一个老问题，但是将来我将把这个问题留给任何遇到此问题的人。

Popconfirm在这种情况下不起作用，因为DataTables是异步的，因此在调用$(document).ready()时并不一定要完成它。

您需要使用initComplete回调，当数据已完全加载时调用该回调。

以下是文档：https://datatables.net/reference/option/initComplete

在这种情况下，您将必须执行以下操作：

$('#user_list').DataTable({

  // Your initialization code

  "initComplete": function(settings, json) {
    $("#deactivate").popConfirm({
        title: "Are you sure?",
        content: "All previous records of this user will be maintained on the system for consistency",
        placement: "left",
        noBtn: "Cancel"
    });
  }
});

JQuery数据表。在AJAX加载后无法使JQuery函数工作

3 个答案: