动态地将按钮添加到数据表行

Posted 2023-05-07

【中文标题】动态地将按钮添加到数据表行

【英文标题】：add button to datatable row dynamically

【发布时间】：2014-09-20 22:41:23

【问题描述】：

在加载时向数据表单元格添加自定义 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 这里是由数据表创建的数据表分页容器

       <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>

【问题讨论】：

我相信 columns.render() link 提供了你需要的功能。

@MarcoBorchert -> 我相信你是对的。我没想到的一件事是，它现在为表格中的每个单元格在单元格 (0,0) 中添加了一个图标。例如110 ICONSand 在所有第 0 列单元格中... :% 所以谢谢它的工作，只是需要一些工作。

【参考方案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>");
       ,
   );

【参考方案2】：

This Code is working for me here i am adding button to get next set records or search record from server.  



ObjTableId.button().add(3, 
                action: function () 
                   // your code goes here !
                ,
                text: 'Button text',
                className: "css_class_name",
                attr: 
                    title: 'title',
                    id: 'btnId'
                
            );