Как сделать один столбец прокручиваемым в таблице данных jquery, когда столбец переполнен данными? - PullRequest
Новая
       23

Как сделать один столбец прокручиваемым в таблице данных jquery, когда столбец переполнен данными?

0 голосов
/ 05 января 2019

Я использовал таблицу данных jquery, чтобы показать мой список в таблице. Но иногда для одного идентификатора приходится печатать несколько данных в одном столбце. В результате моя колонна стала больше. Поэтому я хочу, чтобы этот столбец можно было прокручивать, если он переполнен данными. enter image description here

В столбце Files у меня есть несколько файлов для одного столбца. Я хочу сделать этот столбец прокручиваемым при наличии нескольких файлов. Является ли это возможным? В моем HTML я написал код java-скрипта для таблицы jquery 

<script>
    $(function () {
        $("#currentAcrTable").DataTable({
            "columnDefs": [

                { "targets": [1,2,3,4,5], "searchable": false },
                { "width": "15%", "targets": 4 }
            ]
        });
        $("#oldAcrTable").DataTable();
    });
</script>

И мой HTML-код для итерации цикла и отображения данных - 

 <tr th:each="acr : ${list}">
                        <td th:text="${acr.govtId}" align="center"></td>
                        <td th:text="${acr.year}" align="center"></td>
                        <td th:text="${acr.assigned_from}" align="center"></td>
                        <td th:text="${acr.assigned_to}" align="center"></td>


                        <td align="center">

                            <div class="scroll_y" style="overflow-x:hidden; overflow-y:scroll;">
                            <span th:each="file: ${acr.filelist}">
                                <a href=""><img th:src="@{/images/pdf-icon.png}" width="15px" height="15px"/></a>
                            </span>
                            </div>

                        </td>
    </tr>

Я добавил <div class="scroll_y" style="overflow-x:hidden; overflow-y:scroll;"> внутри td согласно ответу Джозефа_J. Но без изменений

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Пожалуйста, попробуйте дать этот стиль вашему тд, который вы хотите иметь возможность прокрутки Вы можете дать ему фиксированную высоту в соответствии с вашими требованиями 

style=" height:40px ;  overflow-y: scroll; display: block"

Проверьте эту ссылку для справки

https://codepen.io/singhagam1/pen/MZVrrJ

0 голосов
/ 05 января 2019

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

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

Вот так: 

<td>
  <div style="width:50px; height:50px; overflow-y:scroll;">To much data, this cell needs to scroll.</div>
</td>

В приведенном выше коде я добавил встроенный стиль, чтобы добавить свойства прокрутки для div.

Вы также можете создать класс CSS, содержащий ваши свойства прокрутки. Я считаю, что вы можете использовать свойства dataTables, чтобы определить класс для конкретного столбца.

CSS: 

.scroll_y{

  height:50px;
  width:50px;
  overflow-y: scroll;

}

HTML: 

<td>
  <div class="scroll_y">To much data, this cell needs to scroll.</div>
</td>

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

...