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

【问题标题】：datatables buttons enable/disable example not working数据表按钮启用/禁用示例不起作用
【发布时间】：2016-01-03 05:51:03
【问题描述】：

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

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

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 );
} );

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

action: function ( e, dt, node, config ) {
    window.location.href = '/property?option=modify&id=' + data.id
},

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

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

应该像下面这样...

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

关于获取row id的例子可以参考here

【讨论】：

好的，谢谢！我没看那么远。不过，那个例子是错误的，如果它只启用，为什么说启用/禁用？ :P
启用/禁用位是用于设置的 json，一旦创建元素，它就会从 dom 定位。当数据表初始化时，将有一个函数获取每个按钮和 json 中的设置并在 dom 中创建一个元素
嗯，对，就像编辑器中的按钮一样。嗯，我无法在函数中获取行 ID，我做错了什么？我试过row().id() 和rowId()。
@ChazyChaz 这里有一个例子datatables.net/reference/api/row().id()
是的，我正在阅读它，但我不知道如何在 click 函数中获取选定的行 id 而不是 this。我也不能在内部使用table。我不知道如何从内部访问 json 数据。

【解决方案2】：

我认为您对正在使用的 .id() 函数有些困惑。它不会返回名为 id 的数据字段的值。它返回 id 的 tr 属性。如果不设置，会返回 undefined。

如果您将 DT_RowId 作为数据集的一部分返回，它将自动添加。 {id:5, DT_RowId:"5"}。或者，客户端，在使用之前使用 JQuery 映射函数添加字段。因为使用直整数作为 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" }

        ]

        } );

        } );

【讨论】：