jQuery 动态添加按钮到数据表行

add button to datatable row dynamically

提问by morne

I have a problem when adding a custom bit of HTML to a datatable cell on loading.

在加载时向数据表单元格添加自定义位 HTML 时遇到问题。

on clicking the tab to open the page, I call on a ajax function to fetch the data.

单击选项卡打开页面时，我调用 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();
            })
    });

// 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();
            })
    });

This bit works fine and I get all the data I require. The problem now is that for the EDITcolumn I want to add a ICON BUTTONto click on to edit the record. I do so using a function addBellsWhistleslike this

这一点工作正常，我得到了我需要的所有数据。现在的问题是，对于该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>");
    }

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

okay, this also work almost perfectly except for one thing. The data table only shows 10 records per page, so when I go to the 2nd or nth page the piece of custom added HTML is not visable.

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

I have tried the following on click of the paginate button (well quite a few things including the the classof the button, idof the button, the a tagof the button) but nothing works.

我在点击分页按钮时尝试了以下操作（很多东西，包括class按钮的，id按钮的，a tag按钮的），但没有任何效果。

Im also using deligationin this case because of dynamically created data

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

e.g.

例如

    $( ".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();
    });

    $( ".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();
    });

its not writing to console, its not calling the message pop-up and it is especially not calling my function (and I just named them separately for dramatic effect).

它不写入控制台，不调用消息弹出窗口，尤其不调用我的函数（为了戏剧效果，我只是将它们分别命名）。

Anyone out there have a idea for me please?

有没有人对我有想法？

PS here is the datatable paginate container as created by datatables

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>

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

回答by morne

Call the fnCreatedRowfunction, which fires after every row is created (callback). Call your method from there to do what is needed. In this case:

调用该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>");
       },
   });

   $('#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>");
       },
   });

回答by satya prakash

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'
                }
            });