This topic contains 9 replies, has 4 voices, and was last updated by Jai Jai 8 months ago.

create a checkbox in a datatable


  • softaula
    Participant

    Posts: 25
    Member Reply #15700

    I have an html datatable and I have a checkbox in all the first tds of the trs.

    If I go through the pagination, I lost the checked of the checkboxes.

     

    How can I do it to not lost the checked checkbox?

     

    Thanks

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #15728

    Hi ­čÖé

    Just to confirm, are you referring this question to a new datatable in Metronic v5 or datatable in Metronic v4.7.5? Because we have 2 different version of datatable in both Metronic version.

    My answer here is referring to Metronic v5.

    From default HTML table into mDatatable, it does not support to inherit all properties. Only the content inside each cell <td> only supported. Means all attribute <tr> or <td> will not be available after mDatatable init.

    To use checkbox with mDatatable, you have to use remote or local data as an object. You can check this sample code for datatable with selector checkbox.

    /src/js/demo/default/custom/components/datatables/base/record-selection.js

    If your question is referring to datatable in Metronic v4.7.5, we are using different plugin for it, which is DataTables.net

    Thanks


    softaula
    Participant

    Posts: 25
    Member Reply #15737

    ok, sorry, I thought as I’m creating the topic in the 4.x(old) metronic version, it is assumed that it is in the old version so I’m using html datatables in the old version.

    Could you tell me how to do it?

    If it is not possible, how can I do it to create a list of checkboxes with some pagination? It is not mandatory to have a datatable for me, maybe there is a better way?

    Thanks

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #15752

    Hi ­čÖé

    Just a bit confused, sometimes at Metronic v5 also, some customerw asking about Metronic v4.7.5.

    The Metronic 4.7.5 datatable was DataTables.net, you can check it on their demo site;

    Here it shows how to do checkbox in DataTables.net

    https://datatables.net/extensions/select/examples/initialisation/checkbox.html

    Thanks


    softaula
    Participant

    Posts: 25
    Member Reply #15757

    Ok thanks but it doesn’t work for me because only one checkbox can be selected and I don’t see the way to get the selected checkboxes if there isn’t a input tag.

    So, could you tell me how to add a vertical scroll to a table (not datatable)

    Thanks!

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #15791

    Hi,

    Please check the bootstrap documentation and refer to the scrollable responsive table options:
    http://getbootstrap.com/docs/4.0/content/reboot/#tables

    Thanks.

     


    dotsignal
    Participant

    Posts: 14
    Member Reply #15913

    I have a similar issue, but am using remote data in metronic 5. I set a template on the column like this:

     

    template: function (row) {

    var checked = some_criteria?’checked=”CHECKED”‘:”;

    return ‘<label class=”m-checkbox m-checkbox–bold m-checkbox–state-success”><input ‘ + checked + ‘ type=”checkbox” /><span></span></label>’

    },

     

    Even on the initialization, the checkboxes aren’t checked when “some_criteria” is true. But if i inspect the DOM, it has checked=”CHECKED” in the html. If I manually check one of the checkboxes, and then go to page 2, and then back to page 1, the box I manually checked is no longer checked.

     

    I also tested removing the template and defining the column with this option:

    selector: {class: ‘m-checkbox m-checkbox–bold m-checkbox–state-success’},

    But still the checkboxes I check manually are not kept when going through the different pages.

    I can’t really do it with that option, however, because I need to have some of the checkboxes pre-checked based on data coming back in the row parameters.

    Any suggestions on how to get this to work?

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #15951

    Hi,

    There is a checkbox extension to support this;

    /src/js/demo/default/custom/components/datatables/base/record-selection.js

    You need to enable it by adding this option. This is to enable checkbox extension, an empty object to use the default option.

    extensions: {
    checkbox: {},
    }

    By enabling this, the checkbox state will be kept even you navigate other pages.

    Thanks


    dotsignal
    Participant

    Posts: 14
    Member Reply #16003

    Thanks! This is working for me

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #16006

    All the best for your project. Thanks

You must be logged in to reply to this topic.