Change jquery datatable column multi-filters to dropdowns with checkboxes
- or -
Post a project like this2158
$$$
- Posted:
- Proposals: 2
- Remote
- #1992953
- Awarded
Description
Experience Level: Expert
Hopefully a small, quick job, probably requiring a jquery datatables expert.
My jquery datatable has filters on several columns. These filters have multi-selection and are currently displayed as 'select' containers. Everything works well technically, except that the presentation/functionality of the 'select' containers is clunky and unfriendly. My requirement is to replace the select containers with tidy, clean dropdowns with checkboxes.
The simplified fiddle contains the datatable: https://jsfiddle.net/00uzwsk5/4/
Specification of this job:
1) The dropdowns should sit just ABOVE the lower black header line, allowing the column header labels to be level with each other.
2) When the dropdowns are contracted (ie not extended), the dropdown placeholders should show either "Nothing selected" or "Selections made", depending on the user selections inside that dropdown. The "Selections made' placeholder should have a contrasting background colour to the "Nothing selected" placeholder.
3) Inside each dropdown, each of the options must have its own checkbox.
4) When the user clicks on the dropdown, I want the list to extend OVER the datatable below. I don't want the whole table to move downwards with the dropdown.
5) I'd like the dropdown, when extended, to include a 'Select all/none' toggle at the top of the dropdown list (it could be a checkbox)
6) Ideally, minimal additional plugins as this is all a further overhead on the coding, but I accept that I may not have much choice on this.
Note that there's no need to spend much time on styling... I can do that myself. I just want clean, professional dropdowns.
Note that all the sorting functionality, as currently working in the fiddle, needs to be preserved. This includes the way the select containers only fill with data from 'enabled' datatable rows. Also, the way that 'enabled' rows are grouped to the top of the datatable, and 'disabled' rows to the bottom, must also be preserved.
Look forward to hearing from you!
Steven
My jquery datatable has filters on several columns. These filters have multi-selection and are currently displayed as 'select' containers. Everything works well technically, except that the presentation/functionality of the 'select' containers is clunky and unfriendly. My requirement is to replace the select containers with tidy, clean dropdowns with checkboxes.
The simplified fiddle contains the datatable: https://jsfiddle.net/00uzwsk5/4/
Specification of this job:
1) The dropdowns should sit just ABOVE the lower black header line, allowing the column header labels to be level with each other.
2) When the dropdowns are contracted (ie not extended), the dropdown placeholders should show either "Nothing selected" or "Selections made", depending on the user selections inside that dropdown. The "Selections made' placeholder should have a contrasting background colour to the "Nothing selected" placeholder.
3) Inside each dropdown, each of the options must have its own checkbox.
4) When the user clicks on the dropdown, I want the list to extend OVER the datatable below. I don't want the whole table to move downwards with the dropdown.
5) I'd like the dropdown, when extended, to include a 'Select all/none' toggle at the top of the dropdown list (it could be a checkbox)
6) Ideally, minimal additional plugins as this is all a further overhead on the coding, but I accept that I may not have much choice on this.
Note that there's no need to spend much time on styling... I can do that myself. I just want clean, professional dropdowns.
Note that all the sorting functionality, as currently working in the fiddle, needs to be preserved. This includes the way the select containers only fill with data from 'enabled' datatable rows. Also, the way that 'enabled' rows are grouped to the top of the datatable, and 'disabled' rows to the bottom, must also be preserved.
Look forward to hearing from you!
Steven
Steven B.
100% (1)Projects Completed
1
Freelancers worked with
1
Projects awarded
100%
Last project
30 Apr 2018
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies