Как сделать отзывчивым данные, добавив панели слева или справа? - PullRequest
Новая
       4

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

0 голосов
/ 30 мая 2020

В следующем примере в JS я создаю базовую c таблицу данных, я легко создаю функции для открытия и закрытия панелей и определяю данные, которыми будет заполнена таблица, с помощью 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;
}
<!--sidebar left-->
<div id="mySidebarLeft" class="sidebarLeft">
  <a href="javascript:void(0)" class="closebtnLeft" onclick="closeNavLeft()">×</a>
</div>

<!--main card-->
<div id="main" class = "card bg-light">
                    <div class="pt-3">
                        <div class = "row pull-right">
                            <div class = "col-12 ">
                                <ul class = "flex-lg-row d-flex flex-column mb-0 p-0">
                                    <li class = "d-inline px-lg-1">
                                      <button class="btn fas fa-arrow-left openbtn" onclick="openNavLeft()">
                                        </button>
                                      <button class="btn fas fa-arrow-right openbtn" onclick="openNavRight()"> 
                                        </button> 
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class = "clearfix"></div>
                    </div>
                    <div class = "card-block px-3 pb-0">
                        <table id="example" class="table table-hover display responsive no-wrap" width="100%"></table>                    
                        </div>
                </div>
                
<!--sidebar right-->
<div id="mySidebarRight" class="sidebarRight">
  <a href="javascript:void(0)" class="closebtnRight" onclick="closeNavRight()">×</a>
</div>



<!-------------------------------- CDN's css-------------------------------------->

<!-- Bootstrap & fontawesome css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
<!-- Datatable css -->
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" />
<link rel = "stylesheet" href = "https://cdn.datatables.net/autofill/2.3.0/css/autoFill.dataTables.min.css" />
<link rel = "stylesheet" href = "https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.dataTables.min.css" />
<link rel = "stylesheet" href = "https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css" />
<!-------------------------------- CDN's js-------------------------------------->
<!-- Boostrap & fontawesome js-->       
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Datatable js -->
<script type = "text/javascript" src = "https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/autofill/2.3.0/js/dataTables.autoFill.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>

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

прикрепленное фото того, что я хочу сделать

1 Ответ

0 голосов
/ 30 мая 2020

Попробуйте пересчитать ширину, используемую отзывчивым, после изменения в меню навигации 

table.responsive.recalc()


var table;
$(document).ready(function() {
    table = $('#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 recalc() {
  table.responsive.recalc();
}

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

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

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



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;
}
<!--sidebar left-->
<div id="mySidebarLeft" class="sidebarLeft">
  <a href="javascript:void(0)" class="closebtnLeft" onclick="closeNavLeft()">×</a>
</div>

<!--main card-->
<div id="main" class="card bg-light">
  <div class="pt-3">
    <div class="row pull-right">
      <div class="col-12 ">
        <ul class="flex-lg-row d-flex flex-column mb-0 p-0">
          <li class="d-inline px-lg-1">
            <button class="btn fas fa-arrow-left openbtn" onclick="openNavLeft()">
                                        </button>
            <button class="btn fas fa-arrow-right openbtn" onclick="openNavRight()"> 
                                        </button>
          </li>
        </ul>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="card-block px-3 pb-0">
    <table id="example" class="table table-hover display responsive no-wrap" width="100%"></table>
  </div>
</div>

<!--sidebar right-->
<div id="mySidebarRight" class="sidebarRight">
  <a href="javascript:void(0)" class="closebtnRight" onclick="closeNavRight()">×</a>
</div>



<!-------------------------------- CDN's css-------------------------------------->

<!-- Bootstrap & fontawesome css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
<!-- Datatable css -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/autofill/2.3.0/css/autoFill.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css" />
<!-------------------------------- CDN's js-------------------------------------->
<!-- Boostrap & fontawesome js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Datatable js -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.3.0/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
...