Question

我在回复datatables时遇到问题。当我调整窗口大小并隐藏按钮时，用于知道选择哪一行的代码不起作用：

$('#usersTable tbody').on( 'click', 'button', function () {
        usernameSelected = (userTable.row( $(this).parents('tr') ).data().username);
    } );

问题可能在于父母（'tr'），但是如何在调整表格时获取信息？我使用返回的值来识别单击哪一行的按钮。我的表使用这样的ajax调用：

if ( ! $.fn.DataTable.isDataTable( '#licensesTable' ) ) {
    licenseTable = $('#licensesTable').DataTable({
        responsive: true,
        //disable order and search on column
        columnDefs: [
             {
                 targets: [4,5],
                 orderable: false,
                 searchable: false,
             }
         ],
         //fix problem with responsive table
         "autoWidth": false,
         "ajax": "table",
         "columns": [
             { "data": "user" },
             { "data": "startDate",
                 "render": function (data) {
                     return (moment(data).format("DD/MM/YYYY"));                     
                 }
             },
             { "data": "endDate",
                 "render": function (data) {
                     return (moment(data).format("DD/MM/YYYY"));                     
                 }
             },
             { "data": "counter" },
             { data:null, render: function ( data, type, row ) {
                 return '<button type="button" class="btn btn-primary" id="updadteLicense" data-toggle="modal"'
                 +'data-target="#updateLicenseModal">Update</button>'

             }
             },
             { data:null, render: function ( data, type, row ) {
                 return '<button type="button" class="btn btn-danger" id="deleteLicense" data-toggle="modal"'
                 +'data-target="#deleteLicenseModal">Delete</button>'                                   
             }
             }
        ],
    });
}
else {
    licenseTable.ajax.url("table").load();
}

这是HTML代码相对数据表：

<table id="licensesTable"
class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>User</th>
            <th>Start date</th>
            <th>Expire date</th>
            <th>Max execution</th>
            <th>Delete</th>
            <th>Update</th>
        </tr>
    </thead>
</table>

Answer 1

我不知道这是不是一个好方法，但我通过在按钮上添加id来解决它。

<\ n>在Laravel

   ->addColumn('Datalist',function($loadData){
      return '<center><button id='.$loadData->rowID.' type="button" class="btn-showdata"><i class="fa fa-list"></i></button></center>'; 
   })

在javascript中：

$(this).on('click','#tableid .btn-showdata',function(){
  console.log(this.id);
});

了解具有响应数据表的选定行

1 个答案: