тормоза с датой при добавлении горизонтальной прокрутки + фиксированный столбец - PullRequest
Новая
       10

тормоза с датой при добавлении горизонтальной прокрутки + фиксированный столбец

0 голосов
/ 02 мая 2019

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

HTML-код для этого следующий 

<table class="table display nowrap">
<thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
        <th>e</th>
        <th>f</th>
        <th>g</th>
        <th>h</th>
        <th>i</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
  </tbody>
</table>

и код jquery 

    $('.table').DataTable( {
          "searching": false ,  
          "paging": false ,
          fixedColumns: {
             leftColumns: 1
          },         
          scrollX: true,
    });

Таким образом, когда я запускаю комбинацию этих 2 кодов с использованием библиотеки данных, результат будет следующим

снимок экрана с результатом

1 Ответ

0 голосов
/ 03 мая 2019

Я не могу воспроизвести проблему, как вы сообщили. Ниже приведен код, который я пробовал. Кажется, вас устраивает то, что вы ищете. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataTable demo</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
    <style>
        /* Ensure that the demo table scrolls */
        th, td {
            white-space: nowrap;
        }

        div.dataTables_wrapper {
            width: 200px;
            margin: 0 auto;
        }
    </style>
    <script>
        $(document).ready(function() {
            var table = $('.table').DataTable( {
                scrollY:        "600px",
                scrollX:        true,
                scrollCollapse: true,
                paging:         false,
                fixedColumns:   {
                    leftColumns: 1,
                    // rightColumns: 1
                }
            } );
        } );
    </script>
</head>
<body>
<table class="table display nowrap">
    <thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
        <th>e</th>
        <th>f</th>
        <th>g</th>
        <th>h</th>
        <th>i</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>
    <tr>
        <td>a data</td>
        <td>b data</td>
        <td>c data</td>
        <td>d data</td>
        <td>e data</td>
        <td>f data</td>
        <td>g data</td>
        <td>h data</td>
        <td>i data</td>
    </tr>

    </tbody>
</table>
</body>
</html>

Надеюсь, это поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...