mardi 29 août 2017

Bootstrap Checkbox inside jQuery Data Table

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