This topic contains 7 replies, has 2 voices, and was last updated by Sean Sean 2 years, 3 months ago.

Datatables Selected button


  • shopcomp
    Participant

    Posts: 42
    Member Reply #6421

    Hello,

    Thank you again for this great theme. It really looks professional and has lots of functionality!

    My website relies heavily on the datatables component. I see several datatables examples in the Metronic template, but I can’t find an example for the Selected button:

    https://datatables.net/reference/button/

    Basically, I want a “Compare selected items” button to appear disabled by default, but enabled as soon as one or several datatable rows are selected. For example, something that I have currently:

    https://shopineer.com/laptops/

    It doesn’t have to look exactly like that. For example, I see that you have a customized “Add New+” button in one of the Metronic examples:

    http://www.keenthemes.com/preview/metronic/theme/admin_1/table_datatables_managed.html

    Is that the way to go, or should I use something that is closer to the current datatables solution?

    I would really appreciate if you could point me in the right direction. My main concern is that I want a Metronic compatible solution that does not break anything with the rest of the theme. Hence, any advice you can give would be really helpful.

    Best regards, and thanks in advance!

    • This topic was modified 2 years, 3 months ago by  shopcomp.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6428

    Hi,

    Thanks for contacting our support.

    The compare table feature from the above site is totally custom solution. I have checked it and could not find any related demo from the Metronic templates.  Also i checked the buttons extension and it seems there is group selection functionality.  In your case you will need to pass the selected rows IDs to the compare page and generate feature compare table based on selected rows IDs.  So you can use those checkboxes as a selector and read checked checkbox values and post it to the next page.

    If you need any further clarifications please let us know.

    Thanks.


    shopcomp
    Participant

    Posts: 42
    Member Reply #6430

    Hi,

    Thank you for the detailed reply. That programming part makes sense. It is quite similar to what I have already, so it should not be a problem.

    My only remaining question is regarding the web design part of the Compare button. On my current (non-Metronic) site I create the “Compare selected products” button using the datatables internals:

    buttons: [‘selected’]

    which uses the datatables select/buttons css js files:

    <link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/select/1.1.0/css/select.dataTables.min.css” />

    <link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/buttons/1.1.1/css/buttons.dataTables.min.css” />

    <script type=”text/javascript” charset=”utf8″ src=”https://cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js”></script>

    <script type=”text/javascript” charset=”utf8″ src=”https://cdn.datatables.net/buttons/1.1.1/js/dataTables.buttons.min.js”></script>

     

    I noticed that Metronic has its own local version of these datatables files, but I did not find the corresponding select/buttons files in the Metronic assets directory.

    What is the best way to create the a “Compare selected products” datatables button in Metronic?

    Ideally I would want it to appear in the same place as today (upper left of the datatable, at the same height as the search box):

    https://shopineer.com/laptops/

    That position is currently occupied by the “Show 5” drop down box in the Metronic example:

    http://www.keenthemes.com/preview/metronic/theme/admin_1/table_datatables_managed.html

    I know how to remove that drop down box in the datatables configuration, but I don’t know the proper way to have a datatables button appear in that same place in the Metronic theme. Any hint you can give about that would be really helpful.

    I briefly tried to reference the datatables select/buttons css/js files from the Metronic example page and created a button, but it appeared in the upper right corner, above the Action / Settings buttons. Maybe it is possible to configure that somehow? Alternatively, maybe I can use the existing “Add New+” button from the Metronic example and just rename it? Ideally, I would want it to appear a bit lower, at the same height as the datatables search box. Not sure if that is possible?

    Sorry for the lengthy description. If the best / most Metronic compatible solution is obvious to you I would really like to hear about it. 🙂

    Best regards

    • This reply was modified 2 years, 3 months ago by  shopcomp.
    • This reply was modified 2 years, 3 months ago by  shopcomp.
    • This reply was modified 2 years, 3 months ago by  shopcomp.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6434

    Hi,

    Sure, you can follow below steps:

    1) Hide pagination length dropdown by assigning following “dom” parameter in table-datatables-managed.js

    “dom”: “<‘row'<‘col-md-6 col-sm-12’><‘col-md-6 col-sm-12’f>r>t<‘row'<‘col-md-5 col-sm-12’i><‘col-md-7 col-sm-12’p>>”

    2) Modify and adjust the button position with below code:

    <div class=”btn-group” style=”margin-bottom: -102px”>
    <button id=”sample_editable_1_new” class=”btn sbold green”>
    Add New <i class=”fa fa-plus”></i>
    </button>
    </div>

    I hope the above code will be helpful. If you need any further clarifications please let us know.

    Thanks.


    shopcomp
    Participant

    Posts: 42
    Member Reply #6436

    That did the trick, thank you very much! 🙂


    shopcomp
    Participant

    Posts: 42
    Member Reply #6442

    Fixing the button position was easy (thanks again for the help!).

    However, I’m still struggling with the javascript code that detects which datatable rows are selected. My current non-Metronic website uses the following javascript code:

    table.rows(‘.selected’)

    as described here:

    https://datatables.net/examples/api/select_row.html

    but when I try that in the Metronic datatables example I get a javascript error saying that object table does not have a function rows.

    Does Metronic use an older version of datatables? If so, any plans to migrate it to the latest one?

    I don’t have a lot of javascript code, so I can probably port it to the current Metronic datatables version, but in case you are anyway about to migrate it may be better for me to wait for that so that I don’t have to migrate back soon again.

    If you are not going to migrate relatively soon, my plan would be to try the technique used in this example:

    http://www.keenthemes.com/preview/metronic/theme/admin_1/table_datatables_ajax.html

    since I see that you have a solution for it there already (when I click on a row checkbox it says “1 records selected:” in the label in the upper right corner).

    Best regards

     

    • This reply was modified 2 years, 3 months ago by  shopcomp.
    • This reply was modified 2 years, 3 months ago by  shopcomp.

    shopcomp
    Participant

    Posts: 42
    Member Reply #6454

    Hello,

    Just to let you know, I succeeded in porting my javascript code using your example:
    http://www.keenthemes.com/preview/metronic/theme/admin_1/table_datatables_ajax.html

    That was hopefully the last problem on this topic.

    Thanks again for the help!

    Best regards

    • This reply was modified 2 years, 3 months ago by  shopcomp.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6471

    Glad to hear that 🙂 Good luck with your project! 🙂

Tagged: 

You must be logged in to reply to this topic.