Show a "switch" button in the table that represent a bool result

Jamryl

Hello everyone.

I need to show a boolean value in the table (wether a product is discounted or not).
In html with bootstrap 5 I used to render it as a switch button with that code:
<input class="form-check-input form-check form-switch d-flex justify-content-center" disabled type="checkbox" id="flexSwitchCheckDefault" value="true">

So the question is, can I achieve the same kind of result with Datatables?

Thanks for your help. I look on the forum but could not find what I was looking for.

colin

Yep, that would be possible. You would use columns.render to display that boolean any way you choose. This example should help, especially the progress column, as that's doing something very similar,

Colin

Jamryl

Thank you Colin. I'm successfully showing the switch button. But I cannot show the proper state. I know I must cast my bool result in the value field but what I did dosen't sems to work .

{ data: 'isDiscounted', "render": function (data, type, row, meta) { return type === 'display' ? '<input class="form-check-input form-check form-switch d-flex justify-content-center" role="switch" disabled type="checkbox" id="flexSwitchCheckDefault" value="' + data + '"/>' : data; }, "width": "5%" },

Jamryl

Ok nevermind mycode was wrong.
That looks much better but still it doesn't show the proper state.

{
                data: 'isDiscounted',
                "render": function (data) {
                    return `<div class="form-check form-switch">
                               <input class="form-check-input" role="switch" disabled type="checkbox" id="flexSwitchCheckDefault" value="${data}">
                           </div>`
                },
                "width": "5%"
            },

allan

If you want to show state with an input element, you'll need to set its state. Since the render function returns a string, what you need to do is use rowCallback. This example shows exactly that being done.

Allan

Jamryl

Hey Allan, thanks for your help. I try to use "rowCallback" but I can't make it work.
Here's my code.

$(document).ready(function () {
    loadDataTable();
})

function loadDataTable() {
    dataTable = $('#tblData').DataTable({
        responsive: true,
        "ajax": { url:'/admin/product/getall' },
        "columns": [
            { data: 'name', "width": "15%" },
            { data: 'desc', "width": "25%" },
            { data: 'price', "width": "5%" },
            {
                data: 'isDiscounted',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return  `<div class="form-check form-switch">
                                    <input class="form-check-input editor-isDiscounted" role="switch" disabled type="checkbox" id="flexSwitchCheckDefault">
                                </div>`;
                    }
                    return data;
                },
                className: 'dt-body-center'
            },
            { data: 'discountValue', "width": "5%" },
            { data: 'discountPrice', "width": "5%" },
            { data: 'category.name', "width": "15%" },
            {
                data: 'id',
                "render": function (data) {
                    return `<div class="w-auto btn-group" role="group">
                        <a href="/admin/product/upsert?id=${data}" class="btn btn-success mx-2"> <i class="bi bi-pencil-square"></i>Edit</a>
                        <a class="btn btn-danger mx-2">  <i class="bi bi-trash-fill"></i>Delete</a>
                        </div >`
                },
                "width": "10%"
            },
        ],
        rowCallback: function (row, data) {
            if (data == "true") {
                $('input.editor-isDiscounted', row).prop('checked', data.isDiscounted== 1);
            }
            
        }
    });

    $('#tblData').on('change', 'input.editor-isDiscounted', function () {
        editor
            .edit($(this).closest('tr'), false)
            .set('isDiscounted', $(this).prop('checked') ? 1 : 0)
            .submit();
    });
}

Jamryl

Good I make it work! Thanks for your help! I just had to delete the if condition