如何根據列值對每一行顯示復選框 - JQuery DataTable

Question

我使用下面的代碼在 Jquery 數據表中顯示復選框。

var table = $('#example').DataTable({
  'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
  'columnDefs': [
     {
        'targets': 0,
        'checkboxes': {
           'selectRow': true
        }
     }
  ],
  'select': {
     'style': 'multi',
     'selector': 'td:first-child'
  },     
  'order': [[1, 'asc']]
  });

https://jsfiddle.net/09yLegu3/

我有一個新要求，我希望僅基於列值顯示復選框。我有名為 Office 的列。僅當 Office 值為“東京”時才應顯示復選框。我怎樣才能實現這個 jquery 數據表。 任何人都可以幫助提供示例代碼。

Answer 1

您可以通過在初始化DataTable時調用drawCallback() function 來實現這一點，並在其中檢查每一行是否辦公室的列包含“東京”； 如果是這樣，請從第一列中刪除復選框：

$(document).ready(function() {
  var table = $('#example').DataTable({
    'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
    'columnDefs': [{
      'targets': 0,
      'checkboxes': {
        'selectRow': true
      }
    }],
    'select': {
      'style': 'multi',
      'selector': 'td:first-child'
    },
    'order': [
      [1, 'asc']
    ],
    "drawCallback": function() {
      $("#example tr").each(function() {
        if ($(this).find("td:eq(3)").text() != "Tokyo") {
          $($(this)).find("td:eq(0)").find("input[type='checkbox']").remove();
        }

      });
    }
  });
});

工作小提琴。

Answer 2

我已經執行了這段代碼，它工作正常，正如你所期望的那樣，在你的代碼中你只需要根據下面提到的“office”參數的特定行來設置條件，這將幫助你在綁定時實現數據。

Here is the fiddle link : [https://jsfiddle.net/nzL39dye/3/][1]

Or

 $(document).ready(function() {
       var table = $('#example').DataTable({
          ajax: 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
          columnDefs : [
            { 
             targets : [0],
             render : function (data, type, row) {

              if (row[3] == "Tokyo") 
              {
                return '<input type="checkbox"  selectRow="true" class="dt-checkboxes">'
              }
                else {
                return '';

                }
              }
            }
       ],
          select: {
             style: 'multi',
             selector: 'td:first-child'
          },     
          order: [[1, 'asc']]
       });
    });

   }

該解決方案簡單易懂。

Answer 3

在列渲染期間，您可以阻止復選框渲染。

此外，在創建單元格的列上，您可以禁用復選框。

您的columnDefs變為（為了刪除London的復選框）：

'columnDefs': [
    {
        'targets': 0,
        'checkboxes': {
            'selectRow': true
        },
        'render': function(data, type, row, meta){
            data = '<input type="checkbox" class="dt-checkboxes">'
            if(row[3] === 'London'){
                data = '';
            }
            return data;
        },
        'createdCell':  function (td, cellData, rowData, row, col){
            if(rowData[3] === 'London'){
                this.api().cell(td).checkboxes.disable();
            }
        }
    }
],

 var table = $('#example').DataTable({ 'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json', 'columnDefs': [ { 'targets': 0, 'checkboxes': { 'selectRow': true, 'selectAllCallback': function(nodes, selected, indeterminate) { if (indeterminate == false) { $(nodes).closest('tr').toggleClass('selected', selected ); } }, 'selectCallback': function(nodes, selected) { if (selected == false) { $(nodes).closest('table').find('thead tr').removeClass('selected'); } } }, 'render': function(data, type, row, meta){ data = '<input type="checkbox" class="dt-checkboxes">' if(row[3] === 'London'){ data = ''; } return data; }, 'createdCell': function (td, cellData, rowData, row, col) { if(rowData[3] === 'London'){ this.api().cell(td).checkboxes.disable(); } else { td.classList.add('dt-checkboxes-cell-visible'); } } } ], 'select': { 'style': 'multi', 'selector': 'td:first-child' }, 'order': [[1, 'asc']] });

 table.dataTable thead th.dt-checkboxes-select-all input[type="checkbox"], table.dataTable tbody td.dt-checkboxes-cell-visible input[type="checkbox"] { visibility: hidden; } table.dataTable td.dt-checkboxes-cell-visible, table.dataTable th.dt-checkboxes-select-all { position: relative; } table.dataTable td.dt-checkboxes-cell-visible:before, table.dataTable td.dt-checkboxes-cell-visible:after, table.dataTable th.dt-checkboxes-select-all:before, table.dataTable th.dt-checkboxes-select-all:after { display: block; position: absolute; top: 1.2em; left: 50%; width: 12px; height: 12px; box-sizing: border-box; } table.dataTable td.dt-checkboxes-cell-visible:before, table.dataTable th.dt-checkboxes-select-all:before { content: ' '; margin-top: -6px; margin-left: -6px; border: 1px solid black; border-radius: 3px; } table.dataTable tr.selected td.dt-checkboxes-cell-visible:after, table.dataTable tr.selected th.dt-checkboxes-select-all:after { content: '\2714'; margin-top: -11px; margin-left: -4px; text-align: center; text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css"> <link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css"> <script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script> <script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"></script> <h3><a href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes</a>: <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/select/">Select extension</a></h3> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn</th> <th>Start date</th> <th>Salary Value</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> <hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/select/">See full article on Gyrocode.com</a>