JQuery Datatablesチェックボックスをチェックしました

Question

現在、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(); 
}); 

は、誰もが前にこの問題を持っていましたか？ attrで

Answer 1

ルック：

'columns': [ 
    { 
     "title": "Enable/Disable", 
     "render": function(data, type, row, meta){ 
      var checkbox = $("<input/>",{ 
       "type": "checkbox" 
      }); 
      if(row[2] === "enable"){ 
       checkbox.attr("checked", "checked"); 
       checkbox.addClass("checkbox_checked"); 
      }else{ 
       checkbox.addClass("checkbox_unchecked"); 
      } 
      return checkbox.prop("outerHTML") 
     } 
    },{ 
     "title": "Number", 
     "render": function(data, type, row, meta){ 
      return row[0]; 
     } 
    },{ 
     "title": "Name", 
     "render": function(data, type, row, meta){ 
      return row[1]; 
     } 
    } 
] 

ワーキングあなたが列をデータテーブルにそれを与えると、その後にレンダリングできるようJSFiddle

Answer 2

注文あなたのデータをもと彼の値

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: [], 
    }); 
});