2016-05-16 5 views
0

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

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?

Antwort

2

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

+0

Vereinfachtes 'wenn/else': https://jsfiddle.net/annoyingmouse/kshrqoLm/4/ – annoyingmouse

-1

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

Ihr Code funktioniert nicht https://jsfiddle.net/cmedina/kshrqoLm/5/ – CMedina

+0

wurde mit dem korrekten Kontrollkästchen Wert bearbeitet .... – Vanojx1

Verwandte Themen