数据表列 onClick

Question

我指的是以下数据表示例 -

https://datatables.net/examples/api/select_single_row.html
该示例捕获整行的 onclick 事件

$('#example tbody').on( 'click', 'tr', function (){}

我希望在单击特定列时捕获事件，说列名称，职位和办公室。我该怎么做？

Answer 1

如果您知道 table 列索引，那么您可能会使用它。

$('#example tbody').on( 'click', 'tr td:eq(0)', function (){
   alert("col1");
});
$('#example tbody').on( 'click', 'tr td:eq(1)', function (){
   alert("col2");
});
$('#example tbody').on( 'click', 'tr td:eq(4)', function (){
   alert("col5");
});

Answer 2

您可以在 fnRowCallback 中访问所需元素中的列挂钩和事件处理程序中的点击。这是一个完整的示例，其中 table 有 2 个额外的列显示接收点击的图标：

$('#example').DataTable({
        dom: 'lfrt',
        paging: false,
        rowBorder: true,
        hover: true,
        serverSide: false,
        rowHeight: 30,
        order: [[ 1, 'asc' ]],
        columns: [
            {
                title: 'Id',
                visible: false,
                searchable: false
            },
            {
                title: 'version',
                visible: false,
                searchable: false
            }                {
                title: Name'
            },
            {
                data: null,
                title: 'Diagram',
                searchable: false,
                sortable: false,
                defaultContent: '<i class="fa fa fa-sitemap icon-btn" data-btnaction="grafo"></i>',
                className: 'text-center'
            },
            {
                data: null,
                title: 'History',
                searchable: false,
                sortable: false,
                defaultContent: '<i class="fa fa-history icon-btn" data-btnaction="appdetail"></i>',
                className: 'text-center'
            }

        ],
        select: false,
        fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            $('td > i', nRow).on('click', function() {
                // if you have the property "data" in your columns, access via aData.property_name
                // if not, access data array from parameter aData, aData[0] = data for field 0, and so on...
                var btnAction = $(this).data('btnaction');
                if (btnAction === 'grafo'){
                } else if (btnAction === 'appdetail'){
                    // do something......
                }
            });
        }
    });

数据表列 onClick

Datatable column onClick

datatable

datatables

datatables-1.10