在具有单元格值的数据表中按条件显示按钮

Question

我有一个使用 Datatables 的表，最后一列显示为默认值 0，但它也可以显示值 >=1 意味着，只要它具有 0 值，它不应该做任何事情，但是一旦它 >=1，我希望显示一个按钮，该按钮从数据表中选择一个值，然后打开一个模态。

不知道如何完成这个按钮。

下面是我的数据表代码，包括。 html.

// Manual Modal
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

// Datatables Code
$(document).ready(function() {
  $('#DTResTableList_1').DataTable({
    "ajax": {
      url: 'data.inc.php',
      method: 'POST',
      dataType: 'json',
      contentType: 'application/json; charset=utf-8',
      dataSrc: ""
    },
    paging: false,
    scrollY: 400,
    select: true,
    'columns': [{
        'data': 'TABLE_NUMBER'
      },
      {
        'data': 'STATION'
      },
      {
        'data': 'GUESTS'
      },
      {
        'data': 'T_STATUS'
      },
      {
        'data': 'MINUTES_SEATED'
      },
      {
        'data': 'MINUTES_OVERDUE'
      }
    ]
  });
  setInterval(function() {
    $('#DTResTableList_1').DataTable().ajax.reload(null, false); // user paging is not reset on reload
  }, 5000);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <table class="table table-sm table-striped table-hover" id="DTResTableList_1" style="width: 100%;">
    <thead>
      <tr>
        <th class="" data-toggle="tooltip" data-placement="top" title="Table Number">Table</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Waiterstation">Station</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Guests on Table">G</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Table Stauts">Status</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Minutes Seated">Minutes</th>
        <th class="" data-toggle="tooltip" data-placement="top" title="Overdue">Button</th>
      </tr>
    </thead>
  </table>
</div>

Answer 1

好的，这里更接近您的要求。如果员工未满 40 岁，则此处将按钮放在最后一列。同样，代码获取该行的数据，然后显示员工的姓名。请注意我是如何在 columnDefs 中使用渲染的。

http://jsbin.com/gobonec/edit?js,output

$(document).ready(function () {



var table = $('#example').DataTable({
        "data": dataStore.data,
        "columns": [
        { "data": "name" },
        { "data": "age" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" },
        { "data": null },
        ],
        columnDefs: [{
        // puts a button in the last column
        targets: [-1], render: function (a, b, data, d) {
            if (data.age < 40) {
                return "<button type='button'>Go</button>";
            }
            return "";
        }
    }],

});
table.on("click", "button",
                function () {
                    alert(table.rows($(this).closest("tr")).data()[0].name);

                });

});

Answer 2

来自DataTables Callbacks：

fnCreatedRow：

此函数在创建 TR 元素时调用（并且所有 TD 子元素都已插入），或者如果使用 DOM 源进行注册，则允许对 TR 元素进行操作（添加类等）。

也就是说你可以在创建DataTable的时候添加这样一个选项：

"fnCreatedRow": function( nRow, aData, iDataIndex ) {
    if (+aData.MINUTES_OVERDUE > 0) {
        $(nRow).find('td:last')
                .replaceWith('<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" val="'
                + aData.MINUTES_OVERDUE  + '">Launch demo modal</button>');
    }
},

并将您的模式显示.bs.modal 处理程序更改为：

$('#myModal').on('shown.bs.modal', function (e) {
    $('#myInput').val($(e.relatedTarget).attr('val')).focus();
});

说明： 每当创建一行时：

• 测试最后一个元素的内容
• 如果大于 0，则将表格单元格替换为具有包含感兴趣值的属性的按钮

每当模态显示时：

• 从相关按钮中获取属性并将其放入输入字段中

shown.bs.modal 的事件处理程序必须在文档内部准备就绪。

Answer 3

我有一个使用行内选择器和按钮扩展的解决方案。在我的示例中，如果用户年龄超过 40 岁，则该按钮将被禁用和隐藏。如果他们更年轻，则显示并启用。点击按钮获取数据对象并使用它来显示人名

http://live.datatables.net/kudotiqu/1/edit

  $(document).ready( function () {
      var table = $('#example').DataTable({select:"single",dom:"tB",
                                   buttons:[{text:"Do It", 
                                             extend:"selected",
                                             action:function( e, dt, node, config){
                                             alert(  dt.rows({selected:true}).data()[0][0]);}}]
       });
     table.on( 'select', function ( e, dt, type, indexes ) {
            var s = dt.settings();                                          
           var g = dt.rows(indexes).data()[0] ;  
           if(parseInt(g[3]) > 40)  {
             s.buttons().enable(false);
             $(s.buttons()[0].node).css("display","none");
           } 
           else {
               s.buttons().enable(true);
             $(s.buttons()[0].node).css("display", "");
            } 
         } );

    });