JQuery Datatables Kontrollkästchen aktiviert

Question

Ich verwende derzeit JQuery-Databases, um Informationen zu speichern und mit einem MD-Array zu füllen.

Aber ich möchte standardmäßig die Kontrollkästchen-Eigenschaft auf :checked setzen, wenn die Bedingungen erfüllt wurden. Ich habe verschiedene Möglichkeiten wie .addclass & .addprop ausprobiert, um irgendwelche Problemumgehungen zu finden, aber ich bin nicht im Stande gewesen, es zu erhalten, wie ich es benötige.

E.G Also, wenn der Wert deaktiviert ist, nichts tun, sonst, wenn aktiviert, setzen Sie den Wert des Kontrollkästchens auf :checked.

Ich habe eine JSfiddle angefügt, um das Problem zu replizieren, das ich habe.

Der Code für das heißt dann:

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

Wer vor dieser Frage hatte?

Answer 1

Blick auf die attr:

'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]; 
     } 
    } 
] 

Arbeits JSFiddle

Answer 2

Bestellen Sie Ihre Daten, damit Sie es an die Datentabelle geben kann, und dann machen die Spalte basiert sein Wert

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