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

xqk2d5yq  于 2023-10-17  发布在  jQuery
关注(0)|答案(4)|浏览(244)

它可以附加点击事件时,数据表是建设行?,而不调用外部全局函数,找到关闭树,并获得数据对象?.

$('#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渲染函数必须返回字符串,它只是一个例子,我需要什么。

  • 创建一个元素。
  • attach click函数传递'row'对象,不调用全局函数。
disbfnqx

disbfnqx1#

简短的回答,不,你不能。我知道你不想这样做,但我会使用类和事件委托,像这样:

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()或类似的方法来返回按钮,上面概述的方法要干净得多。
fzwojiic

fzwojiic2#

你可以使用“columns.createdCell”来获得你想要的:

$( '#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传递给$( td ).html()即可!

blmhpbnm

blmhpbnm3#

添加模糊然后焦点允许点击并继续键入

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

9rbhqvlz4#

let  table = $('#table_patient_request').DataTable()
table.clear().draw();
const response = await   [1,3,4,5,6,7]

const items = response.map((resp,index) => {
  const item = [
    `<button type="button" id="exemplo_${index}" date-isconf="${resp.id}"  class="btn btn-info waves-effect waves-light ml-1 mr-1">exemplo</button>`
  ]

  table.row.add(item).draw()
  table.on('click', `#exemplo_${index}`, function (e) {
    alert('exemplo')
  });
});

相关问题