Горизонтальная прокрутка в фиксированном столбце DataTables - PullRequest
Новая
       11

Горизонтальная прокрутка в фиксированном столбце DataTables

0 голосов
/ 01 июня 2018

Я работаю с Bootstrap 4 и DataTables.

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

Это мой код 

var table = $('#tabla').DataTable({
  //scrollY: "300px",
  scrollX: true,
  paging: false,
  fixedColumns: {
    leftColumns: 1,
    rightColumns: 1
  }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" />

<div class="container">

<table id="tabla" class="table table-striped table-bordered nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Código Delfos</th>
            <th>Nota de Venta</th>
            <th>Primer Cliente</th>
            <th>Norma</th>
            <th>Potencia</th>
            <th>Tensión Mayor</th>
            <th>Tensión Menor</th>
            <th>Material de arrollamiento mayor</th>
            <th>Material de arrollamiento menor</th>
            <th>Frecuencia</th>
            <th>Grupo de Conexiones</th>
            <th>Regulación</th>
        </tr>
    </thead>
    <tbody>
     
            <tr>
                <td>07-F0CAAEUAFEJ0000B0001</td>
                <td>11756</td>
                <td>DIR.PROV.ENERGIA DE CORRIENTES</td>
                <td>IRAM 2476</td>
                <td>630,00</td>
                <td>33.000</td>
                <td>13.860</td>
                <td>datos</td>
                <td>datos</td>
                <td>datos</td>
                <td>datos</td>
                <td>33000,00( + 5x5,0000% ; - 5x5,00%)</td>
            </tr>
       

    </tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>

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

Что я делаю не так?

Я основал свой код на DataTables Fixed Column для Bootstrap 4

Большое спасибо, и извините за мой ужасный английский

Ответы [ 2 ]

0 голосов
/ 02 августа 2019

Если вы используете BackpackforLaravel bundle, поэтому нужно только изменить конфигурацию в config/backpack/crud.php:

'responsive_table' => false,
0 голосов
/ 01 июня 2018

Это взлом, но вы можете попробовать, 

<style>
    .DTFC_LeftBodyLiner{overflow-y:unset !important}
    .DTFC_RightBodyLiner{overflow-y:unset !important}
</style>
...