Question

我试图以这种方式在每行表格之前添加一个元素：

 $('tbody tr').each (function(){
     var htm =$(this).html();
     var tdm = "<td><button>Add</button></td>" ; 
     $(this).html(tdm+htm);
     });

但是当我首先添加一个带有jquery的元素时，它会出现然后很快消失。可能数据表有一个删除外部元素注入的机制。类似的问题是here，但不起作用。任何帮助表示赞赏。

更新这是数据表初始化代码

$(document).ready(function() {
   var table =  $('#example').dataTable( {
        "ajax": "?r=group/subscribe",

        "columns": [

            { "data": "id" },
            { "data": "uid" },
            { "data": "first_name" }
        ], 
        "columnDefs": [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button>Click!</button>"
        } ],
    initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select ><option value=""></option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );

更新由@Bala Sakthis回答，现在按钮出现但不在行之前，而是为表之前的每个按钮创建一个新行。这些信息可能会有所帮助！

Answer 1

请参考以下代码，在其中一列中添加Button（在所有行中）：

{
    "data": "Status",
    "render": function (data, type, row, meta) {
            return $('<button>')
                        .attr('class', 'btn btn-danger')
                        .text('Add')
                        .wrap('<div></div>')
                        .parent()
                        .html();
    }
}

按钮单击事件的逻辑可写在此处：

$(document).ready(function () {
    $('#example tbody').on('click', 'button', function () {
        // Add Logic for Button Click Event
    });
});

并查看以下链接，在表HEADER中添加按钮。 http://www.datatables.net/forums/discussion/3914/adding-buttons-to-header-or-footer

请检查JSFiddle以获取更新的代码。

Answer 2

所以你想在第一个实例中添加一个不在那里的单元格？

"columns": [
    {
        "title": "Button",
        "render": function (data, type, row, meta) {
            return $('<button></button>',{
                'class', 'btn btn-danger',
                'text': 'Add'
            }).prop("outerHTML");
        }
    },{ 
        "data": "id" 
    },{ 
        "data": "uid" 
    },{ 
        "data": "first_name" 
    }
]

如果您使用此替换columns数组并删除columnDefs和initComplete，这对您有用吗？

在DataTable行中添加自定义元素

2 个答案: