Hide some column by default and re-display when required
Hide some column by default and re-display when required
Hi,
I have table with select filter, sorting, search and paging. My requirement is to hide certain columns by default and re-display when required using colvs.
Tried with following logic, it hides columns, but corresponding select filtered values exist. this is one issue,
Another issue is select filter dropdown disabled when i re-display hidden columns.
Could you please help us.
"columnDefs": [
{
"targets": [2,3,6,7,13],
"visible": false
}
]
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Here is the my test case.By default i hide start date, filter is messed up..startdate filter values showing for salary.
Please add header to filling test case.
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
</head>
http://live.datatables.net/rikuboni/19/edit
This is doing the trick - http://live.datatables.net/potidizi/1/edit
I flipped it around to use the column iterator, rather than the header, and then to add into the header. That way, you can tell which ones are visible or not,
Colin
Thanks Colin for quick response.
i am running into problems with the filters not being aligned with the correct columns (because of the hidden columns), and with filter inputs not being initialized correctly on initially hidden columns.
In my case , i made Start date is not visible.("targets": [4])
Thanks
Soma
Please ignore my previous post.Hide columns working with filters aligned properly.
however, when i re-select the hidden columns(Start date), filter is not working for it.
Could you please help here.
Thanks
Soma
See if this thread about colvis and search inputs helps.
Kevin
Tried , but could not able to make it...Let me do some more research and get back to you.
Thanks
Soma
Please provide a link to your page are a test case showing the problems so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Datatables doesn't know about the second header with the search inputs. The column search inputs need updating when the visibility changes. Use the
column-visibilityevent for this.Kevin
http://live.datatables.net/potidizi/1/edit
following code helps select filter aligned with respective columns when we hide columns.
when we want to show hidden columns, select filter is not exist. this is expected because we are using following condition.
if (column.visible()) {
do we have any event for colvis(Column visibility)? if yes, i want to re-execute above condition when event triggers. so filter would be added for hidden columns as well.
Other than this , please suggest me if any other approach to achieve this.
Thanks
Sorry I provided the wrong link above. Use the
column-visibilityevent.Kevin
Thanks kevin fro the column-visibility event. It worked. However it caused other issue to me.
Am using select event in my code, it works until column-visibility not touched.
Once it triggered by selecting hidden columns, then select event stopped working.
Do you have nay idea on this?
Thanks
Soma
It worked by moving select event under column-visibility event.
Appreciate collin and kevin for you support.
Thanks
Soma