Datatables Selected button
May 31, 2016 at 9:11 amPosts: 42Member Reply #6421
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:
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:
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:
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, 6 months ago by shopcomp.
May 31, 2016 at 6:35 pmPosts: 4527Support Staff Reply #6428
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.
May 31, 2016 at 7:08 pmPosts: 42Member Reply #6430
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:
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” />
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):
That position is currently occupied by the “Show 5” drop down box in the Metronic example:
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. 🙂
June 1, 2016 at 3:44 amPosts: 4527Support Staff Reply #6434
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>
I hope the above code will be helpful. If you need any further clarifications please let us know.
June 1, 2016 at 8:36 amPosts: 42Member Reply #6436
That did the trick, thank you very much! 🙂
June 2, 2016 at 12:23 pmPosts: 42Member Reply #6442
Fixing the button position was easy (thanks again for the help!).
as described here:
Does Metronic use an older version of datatables? If so, any plans to migrate it to the latest one?
If you are not going to migrate relatively soon, my plan would be to try the technique used in this example:
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).
June 3, 2016 at 2:51 pmPosts: 42Member Reply #6454
That was hopefully the last problem on this topic.
Thanks again for the help!
- This reply was modified 2 years, 6 months ago by shopcomp.
You must be logged in to reply to this topic.