DataTable上的JQuery选择器仅在警报后才起作用

时间:2018-05-05 18:17:54

标签: javascript jquery datatables

我有以下(简化的)JQuery代码:

$(document).ready(function() {

    var table = $('#bot_table').DataTable( {
        "ajax": "/static/Dashboard/pos.txt",
        "paging":   false,
        "searching": false,
        "columns": [
            { "data": "name_of_instance"},
            { "data": "bt" },
            { "data": "updated" },
            { "data": "pos" },
            { "data": "l_s" },
            { "data": "l_t" },
            { "data": "p_l" },
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            }
        ],
    } );


 $("td").html(function(){
    var elem =  $(this).html().replace("DELETE INSTANCE", "<button id = \"gen_del_instance\" type=\"button\" class=\"btn\"><span class=\"glyphicon glyphicon-trash\"></span> <u>DELETE INSTANCE</u></button>")
    return elem
});

一想到,加载DataTable后,下面的选择器将找到字符串的任何实例,并用一个按钮替换它。

但这不起作用。只有在alert()之前的$("td")之前,它才有效。选择器。

我的理解是,DOM调用后DataTable()未更新,并且在alert()之后被强制更新。

有没有办法实现我想要的行为?

1 个答案:

答案 0 :(得分:0)

解决方案是:

var table = $('#bot_table').DataTable( {
        "ajax": "/static/Dashboard/positions.txt",
        "paging":   false,
        "searching": false,
        "columns": [
            { "data": "name_of_instance",
               "render": function ( data, type, row ) {
                var new_data = data.replace("DELETE INSTANCE", "<button id = \"gen_del_instance\" type=\"button\" class=\"btn\"><span class=\"glyphicon glyphicon-trash\"></span> <u>DELETE INSTANCE</u></button>");
                return new_data;
            }},
            { "data": "bot" },
            { "data": "updated" },
            { "data": "position" },
            { "data": "l_s" },
            { "data": "l_t" },
            { "data": "p_l" },
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            }
        ],
    } );

谢谢@charlietfl