JavaScript - jquery DataTable追加按钮到行+点击事件

时间:2016-09-07 17:35:43

标签: jquery datatables

当数据表构建行时可以附加click事件吗?没有调用外部全局函数并找到关闭tr并获取DATA对象?

$('#example').DataTable({
     columns : [{
        title   : 'msg',
        sClass  : 'col-sm-2',
        render  : function(data, type, row){
            var b = $('<button>the button</button>').click(function(){
                alert(row.msg);
            })
            return b;
        }
     }],
     ajax:{
        type : 'POST',
        url  : 'foo.php',
     }
});

我知道上面的示例dosnt工作,cos渲染函数必须返回字符串,它只是我需要的一个例子。

  • 创建一个元素。
  • 附上点击功能传递&#39; row&#39;对象,没有调用全局函数。

3 个答案:

答案 0 :(得分:3)

简短的回答,不,你不能。我看到你不想要,但我会使用类和事件委托,如下所示:

var myDataTable=$('#example').DataTable({  // note the stored reference to the dataTable
     columns : [{
        title   : 'msg',
        sClass  : 'col-sm-2',
        render  : function(data, type, row){ 
            return '<button class="some-class">the button</button>';
        }
     }],
     ajax:{
        type : 'POST',
        url  : 'foo.php',
     }
});


$(document).on('click', '.some-class', function(){ 
        var $btn=$(this);
        var $tr=$btn.closest('tr');
        var dataTableRow=myDataTable.row($tr[0]); // get the DT row so we can use the API on it
        var rowData=dataTableRow.data();
        console.log(rowData.msg);
});

技术上你可以在渲染每一行后使用rowCallback function附加处理程序,但是你必须使用.find()或类似的东西来回到按钮以上概述的方法更清晰恕我直言。

答案 1 :(得分:0)

您可以使用“ columns.createdCell”来获取所需的内容:

data$COLUMN_MASH<- with(data, ave(COLUMN_MASH, ID_WORKES, FUN = function(i) tail(i, 1)))

data
#   ID_WORKES TABL_NOM NAME ID_SP_NAR KOD_DOR KOD_DEPO COLUMN_MASH     x1 x2
#1  119642709    56220  nov      1048      92    13283           4 0.0000  0
#2  119642709    56220  nov      1049      92    13283           4 0.0000  0
#3  119642709    56220  nov      1050      92    13283           4 0.0000  0
#4  119642709    56220  nov      1065      92    13283           4 0.0000  0
#5  119642709    56220  nov      1066      92    13283           4 0.0000  0
#6  119642709    56220  nov      1085      92    13283           4 0.0000  0
#7  119642709    56220  nov      1086      92    13283           4 0.0000  0
#8  119642709    56220  nov      1087      92    13283           4 0.0000  0
#9  119642709    56220  nov      1088      92    13283           4 0.0625  2
#10 119642709    56220  nov      1086      92    13283           4 0.0000  0
#11 119642709    56220  nov      1087      92    13283           4 0.0000  0

只需将$( '#example' ).DataTable( { columns : [ { data : 'msg', title : 'msg', sClass : 'col-sm-2', createdCell : function( td, cellData, rowData, row, col ){ var b = $( '<button>the button</button>' ).click( function() { alert( rowData.msg ); } ); $( td ).html( b ); } } ], // using data instead of ajax to demonstrate data : [ { msg : 'Message 1!' }, { msg : 'Message 2!' }, { msg : 'Message 3!' } ], /* ajax : { type : 'POST', url : 'foo.php', } */ } ); 传递到b并瞧瞧!

答案 2 :(得分:0)

添加模糊然后焦点允许点击并继续打字

if (dataTable.columns(colunIndex).search() !== e.value) {
    dataTable.columns(colunIndex)
        .search(e.value)
        .draw();
    $(this).blur();
    $(this).focus();
}