Question

我使用带有自定义按钮的数据表。我正在查看examples，也搜索了一下，但我找不到合适的解决方案。

问题在于，当我取消选择该行时，该按钮仍处于启用状态。选择/取消选择行时启用/禁用按钮的正确方法是什么？

   $.get(pageToLoad, function(data) {
     var postsContent = $(data).find(".post:not(:first)");
     $(".feedpost-lastreplys").prepend(postsContent);
   })

另外，如何获取所选行的id值？

var table = $('#example').DataTable( {
    serverSide: true,
    dom: 'Bfrtip',
    ajax: '/get?op=2',
    columns: [
        { data: 'id' },
        // more columns
    ],
    buttons: [
        {
            text: 'New',
            action: function ( e, dt, node, config ) {
                window.location.href = '/property?option=new'
            }
        },
        {
            text: 'Modify',
            action: function ( e, dt, node, config ) {
                window.location.href = '/property?option=modify&id=' + data.id
            },
            enabled: false
        },
        {
            text: 'Delete',
            action: function ( e, dt, node, config ) {
            },
            enabled: false
        }
    ],
    select: true
} );

table.on( 'select', function () {
    var selectedRows = table.rows( { selected: true } ).count();

    table.button( 1 ).enable( selectedRows === 1 );
    table.button( 2 ).enable( selectedRows === 1 );
    table.button( 3 ).enable( selectedRows === 1 );
    //table.button( 1 ).enable( selectedRows > 0 );
} );

Answer 1

您需要为取消选择添加事件处理程序。见https://datatables.net/reference/event/deselect

应该是下面的内容......

table.on( 'deselect', function () {
    table.button( 1 ).disable();
    table.button( 2 ).disable();
    table.button( 3 ).disable();
} );

至于获取行ID，可以找到一个示例here

Answer 2

我认为你对你正在使用的.id（）函数感到有点困惑。它不会返回名为id的数据字段的值。它返回id的tr属性。如果你没有设置它，它将返回undefined。

如果您将DT_RowId作为数据集的一部分返回，它将自动添加。 {id：5，DT_RowId：“5”}。或者，客户端使用JQuery map函数在使用之前添加字段。因为使用直整数作为id，如果它在另一个表或元素中重复，它可能会让你遇到麻烦所以我通常会做这样的事情......

    var mydata =  [{"name": "Tiger Nixon", 
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
     }];

使用extn id，我映射到dt_rowid ...

    $.map(mydata, function (item, key) {
        item["DT_RowId"] = item["extn"]});

然后在我的表中使用该数据......

     $(document).ready(function() {

           $('#example').DataTable( {

              data:mydata,

               "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" }

        ]

        } );

        } );

数据表按钮启用/禁用示例不起作用

2 个答案: