Как сделать адаптивными данные, добавив панели слева или справа? ⇐ Jquery

[Anonymous]

В следующем примере в JS я создаю базовую таблицу данных, я легко создаю функции для открытия и закрытия панелей и определяю данные, которыми таблица будет заполнена, с помощью переменной JavaScript.
В CSS я определяю стили для левой и правой панелей (

Код: Выделить всё

sidebarLeft

,sidebarRight), чтобы они заняли свою позицию в соответствующем месте, я добавляю цвет и добавляю стиль для положения и цвета их кнопки закрытия (

Код: Выделить всё

closebtnLeft

, closebtnRight).
Наконец, в разделе HTML я добавляю только левую панель,
основной контейнер, содержащий таблицу, которая будет видна все время, и правую панель.
Как вы можете видеть, если у вас есть достаточный размер экрана для полного отображения таблицы и нажатие кнопки левой или правой панели, таблица не становится адаптивной, сохраняя свой размер до добавления панели.

Код: Выделить всё

$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
],
"searching": false,
"lengthChange": false,
responsive:true
} );
} );

function openNavLeft() {
document.getElementById("mySidebarLeft").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}

function openNavRight() {
document.getElementById("mySidebarRight").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
document.getElementById("example").style.marginRight = "250px";
}

function closeNavLeft() {
document.getElementById("mySidebarLeft").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
function closeNavRight() {
document.getElementById("mySidebarRight").style.width = "0";
document.getElementById("main").style.marginRight= "0";
document.getElementById("example").style.marginRight = "0";
}

var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],

];

Код: Выделить всё

.sidebarLeft {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidebarRight {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidebarRight .closebtnRight {
position: absolute;
top: 0;
left: 25px;
font-size: 36px;
margin-right: 50px;
}

.sidebarLeft .closebtnLeft {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

.sidebarLeft a,.sidebarRight a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidebarLeft a:hover,.sidebarRight a:hover {
color: #f1f1f1;
}

body {
font-family:  "Lato", sans-serif;
}

Код: Выделить всё

[url=javascript:void(0)]×[/url]






[list]
[*]





[/list]











[url=javascript:void(0)]×[/url]

Я хочу, чтобы при добавлении левой или правой панели, если размера таблицы недостаточно для отображения всей информации, настройте таблицу и покажите адаптивный режим для мобильных устройств.



Подробнее здесь: https://stackoverflow.com/questions/620 ... t-or-right