JQuery Datatables设置复选框以进行检查

时间:2016-05-16 15:35:24

标签: javascript jquery html datatables

我目前正在使用JQuery数据表来存储信息,并使用MD数组填充它。

但是,如果符合条件,我希望默认情况下将复选框属性设置为:checked。我尝试了各种方法,例如.addclass& .addprop找到任何解决方法,但我无法让它按照我需要的方式运行。

E.G因此,如果禁用值,则不执行任何操作,否则,如果启用,则将复选框值设置为:checked

我附上JSfiddle来复制我遇到的问题。

那时的代码就是:

HTML

<table id="userTable" class="display" width="100%">
  <thead>
    <tr>
      <th>Enable/Disable</th>
      <th>Number</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

使用Javascript / JQuery的

jQuery(function($) {
  data = [
    ['User_488', 'User 1', 'disable'],
    ['User_487', 'User 2', 'disable'],
    ['User_477', 'User 3', 'disable'],
    ['User_490', 'User 4', 'disable'],
    ['1000', 'User 5', 'enable'],
    ['1001', 'User 6', 'enable'],
    ['1002', 'User 7', 'enable'],
    ['1004', 'User 8', 'enable']
  ]

  var t = $('#userTable').DataTable({
    'columnDefs': [{
      'targets': 0,
      'searchable': false,
      'orderable': false,
      'className': 'dt-body-center',
      'render': function(data, type, full, meta) {
        return '<input type="checkbox" class="checkbox_check">';
      }
    }],
    order: []
  });

  function checkbox() {
    t.clear();
    if (data) {
      for (var i = 0; i < data.length; i++) {
        var number = data[i][0];
        var name = data[i][1];
        var statustemp = "";
        var resarr = new Array(statustemp, number, name);
        if (status === "disable" || status == null) {
          t.row.add(resarr).draw(false);
        } else {
          t.row.add(resarr).draw(false);
        }
      }
      t.draw(false);
    }
  };
  checkbox();
});

以前有人遇到过这个问题吗?

2 个答案:

答案 0 :(得分:2)

查看&Graph<&T>

% multirust show override
multirust: default toolchain: stable
multirust: default location: /Users/xxxxxx/.multirust/toolchains/stable

rustc 1.8.0 (db2939409 2016-04-11)
cargo 0.9.0-nightly (8fc3fd8 2016-02-29)

工作JSFiddle

答案 1 :(得分:-1)

订购您的数据,以便您可以将其提供给数据表,然后根据其值

呈现列
jQuery(function($) {
  data = [
    ['disable','User_488', 'User 1' ],
    [ 'disable','User_487', 'User 2'],
    ['disable','User_477', 'User 3'],
    ['disable','User_490', 'User 4'],
    ['enable','1000', 'User 5'],
    ['enable','1001', 'User 6'],
    ['enable','1002', 'User 7'],
    ['enable','1004', 'User 8']
  ]

  var t = $('#userTable').DataTable({
    "data": data,
    'columnDefs': [{
      'targets': 0,
      'searchable': false,
      'orderable': false,
      'className': 'dt-body-center',
      'render': function(data, type, full, meta) {
        if(data === "disable"){
            return '<input type="checkbox" class="checkbox_check">';
        }else{
            return '<input type="checkbox" checked class="checkbox_check">';
        }
      }
    }],
    order: [],
  });
});