I want to hide some columns in datatable when page change size (responsive). I would like to show/hide some columns depending on curremt size.
Thank you.
1
-
Use Responsive extension, see my answer below.Gyrocode.com– Gyrocode.com2017-07-21 10:49:46 +00:00Commented Jul 21, 2017 at 10:49
Add a comment
|
3 Answers
It is very simple.
var tbl = $('your_datatable_selector');
// Work with column 2
tbl.DataTable().column(2).visible(false); // or true, if you want to show it
1 Comment
Hameed Syed
This might be more helpful, csharp-video-tutorials.blogspot.in/2015/08/…
Use Responsive extension to show/hide columns dynamically based on screen size.
Optionally you can determine which columns will be hidden first using responsivePriority option, see Column priority for more details.
Alternatively you can assign special classes to th elements to define column behavior, see Class logic for more details.
You just need to include additional CSS/JS files and use responsive option as shown below.
$('#example').DataTable( {
responsive: true
} );
Comments
{
var table = $(`'#screenFieldsTable'`).DataTable();
// Hide two columns
table.columns( [10,11] ).visible( false );
}
1 Comment
Jeremy Caney
Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach?