动态地向数据表行添加按钮

Question

在加载时将自定义位HTML添加到数据表单元格时出现问题.

单击选项卡打开页面,我调用ajax函数来获取数据.

// CLICK on the tab to open the User Manager -> Load all records into DataTable
    $("#admin_details").click(function(){
        // Send through the function to perform in the $_GET variable
        $.ajax({
            url: './inc/AdminScripts.php?argument=loadAllRecords'
        })
            .done(function(html) {
                var t = $('#users_table').DataTable();
                t.clear();
                var obj = eval(html);

                // ADD acquired data items to the DataTable
                $.each(obj, function(key,value) {
                    t.row.add( [
                        value.edit,
                        value.name,
                        value.surname,
                        value.username,
                        value.email,
                        value.language,
                        value.securityQuestion,
                        value.securityAnswer,
                        value.administrator,
                        value.status,
                        value.id
                    ] ).draw();
                });
                addBellsWhistles();
            })
    });

这个位工作正常,我得到了我需要的所有数据.现在的问题是,对于EDIT列,我想添加一个ICON BUTTON单击以编辑记录.我这样做使用函数addBellsWhistles这样

    function addBellsWhistles(){
        $('#users_table tr').children("td:nth-child(1)").append("<div class='col1d'><button class='editBut'><img src='img/property32.png'></button></div>");
    }

好吧,除了一件事,这也几乎完美.数据表每页只显示10条记录,因此当我转到第2页或第n页时,自定义添加的HTML片段是不可见的.

我已经尝试了下面的点击分页按钮(很多东西,包括class按钮,id按钮,a tag按钮)但没有任何作用.

我也在deligation这种情况下使用动态创建的数据

例如

    $( ".dataTables_paginate a" ).on( 'click', '.paginate_button', function () {
        console.log('paging');
        $(".confirmUploadError .confirm_text").html("Loading records. Please wait.");
        $(".confirmUploadError").fadeIn(250).delay(300).fadeOut(650);
        addBellsWhistles();
    });

它没有写入控制台,它没有调用消息弹出窗口,特别是没有调用我的函数(我只是将它们分别命名为戏剧效果).

有人对我有好主意吗？

这里的PS是由datatables创建的datatable paginate容器

       <div class="dataTables_paginate paging_simple_numbers" id="users_table_paginate">
           <a class="paginate_button previous disabled" aria-controls="users_table" data-dt-idx="0" tabindex="0" id="users_table_previous">Previous</a>
               <span>
                   <a class="paginate_button current" aria-controls="users_table" data-dt-idx="1" tabindex="0">1</a>
                   <a class="paginate_button " aria-controls="users_table" data-dt-idx="2" tabindex="0">2</a>
               </span>
           <a class="paginate_button next" aria-controls="users_table" data-dt-idx="3" tabindex="0" id="users_table_next">Next</a>
       </div>

Answer 1

调用fnCreatedRow函数,该函数在创建每一行后触发(回调).从那里调用您的方法来完成所需的操作.在这种情况下:

   $('#users_table').dataTable( {
       "fnCreatedRow": function( nRow, aData, iDataIndex ) {
           $('td:eq(0)', nRow).append("<div class='col1d'><button class='editBut'><img >src='img/property32.png'></button></div>");
       },
   });