I have to add a column in my jquery Data Table, where I must put checkbox buttons. Cause I'm using Bootstrap, I want use it instead classic html checkbox, so I've searched on the web how I can perform my task. I've founded 2 options that are good for me and my boss, but I have some troubles.
The first one is this: Bootstrap 4 Button Checkbox
and I've tried to adapt to my situation. So, in my data table file I've putted:
//This function is used to implement the check all option.
$('[data-toggle="buttons"] .btn').on('click', function () {
// toggle style
$(this).toggleClass('btn-success btn-danger active');
// toggle checkbox
var $chk = $(this).find('[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));
return false;
});
BEFORE the table; and inside the data table I've putted:
{
"data": null,
"render": function ( data, type, full, meta ) {
return '<div data-toggle="buttons">
<label class="btn btn-block btn-success active">
<input type="checkbox" name="select" checked autocomplete="off">Select
</label>';
}
}
Here the problems are 2: first, according with the link, on a click event a button may change from green to red and this does not happen; second, I'm able to select only one checkbox. For example, if I have 4 row and I want select 2 checkbox, I cannot; if I select one and then another, the previous is deselected.
The second way is: jQuery Checkbox Button
Here I've tried to put the code of JS section in an external file and import this in the one with table header, togheter with bootstrap/fonts
for the gliph icons; then I've putted only one button of the above link, this:
<span class="button-checkbox">
<button type="button" class="btn" data-color="primary">Checked</button>
<input type="checkbox" class="hidden" checked />
</span>
inside data table file (on {data: null, render: function()}), but here also I have 2 problems: the button is withe, without glyphs and again, select a new button deselect the previous one. I've noticed that this snippet is for Bootstrap 3; changes are requested to adapt to Bootstrap 4?
In the end: what are my errors?
Aucun commentaire:
Enregistrer un commentaire