数据表列 onClick答案

【问题标题】：Datatable column onClick数据表列 onClick
【发布时间】：2016-07-07 12:10:27
【问题描述】：

我指的是以下 Datatable 示例 -

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

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

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

【问题讨论】：

标签： datatable datatables datatables-1.10

【解决方案1】：

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

$('#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");
});

【讨论】：

"eq" 仅适用于第一行，使用 nth-of-type。例如on('click', 'tr td:nth-of-type(5)',...

【解决方案2】：

您可以在 fnRowCallback 中访问所需元素中的列挂钩和事件处理程序中的点击。这是一个完整的示例，其中包含一个带有 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......
                }
            });
        }
    });

【讨论】：