I'm making a website which is responsive so I'm working with datatables since it is responsive I want to change the datatable appearance in different @media screens. What I want to do is when I'm in desktop version the table will be in a normal state and for tablet form I want it to be in FIXED COLUMNS and when in mobile version I want it to be like
Responsive Table like so. What is best approach for this? Do I need to create multiple table or just use a script? Please let me know.
Add a comment
|
3 Answers
This should do the trick. You need to destroy the first DataTable before initializing it again.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
destroy : true,
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
destroy : true,
responsive: true
});
}
}
Comments
I would suggest using a single script to change the look of the table based on media screen properties. Below is an example script that would load different views of a table based on screen width.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
responsive: true
});
}
}
Responsive and Fixed Column code is taken from datatables website links you have provided. This piece of code should fire on window resize and when loading as explained here.
1 Comment
sri
I think you are not reinitialising here. You are only doing either/or by using if else!!
You can use bootstrap's class as shown in given link http://getbootstrap.com/2.3.2/scaffolding.html#responsive
