0

я столкнулся с задачей постраничного вывода записей таблицы. Как выглядит это сейчас: с сервлета передается ArrayList классов Employer (который содержит поля ID, Команда, Имя и т.д.), циклом c:forEach выводится конечная таблица в 1500 строк... На каждой строке есть кнопка Delete, и ссылка на редактирование по нажатию на ID конкретного человека. А также кнопка добавления и поля поиска по таблице(отправляется запрос в БД через сервлет)

Вопрос: Как и с помощью чего можно отрисовывать таблицу по выбраному кол-ву строк, ну т.е. как в интернет магазине: отобразить по 10(20 или 30) строк а остальные раскидать по оставшимся страницам. Если можно то так чтобы капитально это все не переделывать, ибо времени на это уйдет многовато...

UPD1: Код страницы вывода:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <style>
        .CtrlF{
            color: #e03e07;
            position: absolute;
            right: 1130px
        }
    </style>
    <style>
        .searchLayer{
            position: absolute;
            right: 1000px
        }
    </style>

    <style>
        .DateLayer{
            position: absolute;
            right: 300px
        }
    </style>
    <meta charset="utf-8" />
    <title>Employers</title>
</head>
<body>
<style>
    .button {
        background-color: #cdcccc;
        color: black;
        padding: 3px 7px;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
</style>

<div class="searchLayer">
    <form action='<c:url value="/Search" />' class="search">
        <label>Поиск по</label>
        <select name="selectFrom" >
            <option value="ID">ID</option>
            <option value="kip">Команда проекта</option>
            <option value="dis">Дисциплина</option>
            <option value="role">Роль</option>
            <option value="employer">Сотрудник</option>
            <option value="workpl">План. Т/З</option>
            <option value="update">Изменил</option>
            <option value="add">Добавил</option>


        </select>
        <input type="search" name="search" placeholder="Поиск" class="input" />
        <input type="submit" value="search" />
    </form>
</div>
<div class="DateLayer">
    <form action='<c:url value="/Search" />'  class="search">
        <label>Поиск по дате</label>
        <select name="selectFrom" >
            <option value="start">План. старт</option>
            <option value="finish">План. финиш</option>
            <option value="DateAdd">Дата добавления</option>
            <option value="DateUp">Дата изменения</option>
        </select>
        <label>От:</label>
        <input type="date" name="d1" />
        <label>До:</label>
        <input type="date" name="d2" />
        <input type="submit" value="search" />
    </form>
</div>
<a class="button" href='<c:url value="/create" />'>Create new</a><br>
<a class="button" href='<c:url value="/" />'>Отменить сортировку</a>
<label class="CtrlF">Также чтобы найти запись нажмите "Ctrl" + F</label>
<table>
    <table border="1">

        <tr><th><a href = '<c:url value="/SortedID"/>'> ID</a> </th><th><a href = '<c:url value="/KipSorted"/>'> Команда проекта</a> </th><th><a href = '<c:url value="/DisSorted"/>'>Дисциплина</a></th><th><a href = '<c:url value="/RoleSorted"/>'> Роль</a></th><th><a href = '<c:url value="/NameSorted"/>'> Сотрудник</a> </th><th><a href = '<c:url value="/TZSorted"/>'> План. Т/З</a></th><th width="5%"><a href = '<c:url value="/StartSorted"/>'> План. старт</a></th><th><a href = '<c:url value="/FinSorted"/>'> План. финиш</a> </th><th><a href = '<c:url value="/CreateSorted"/>'>Дата добавления </a></th><th><a href = '<c:url value="/UpdateSorted"/>'> Дата изменения</a></th><th><a href = '<c:url value="/WhoUpdateSorted"/>'>Изменил</a></th><th><a href = '<c:url value="/WhoCreateSorted"/>'>Добавил</a></th><th></th></tr>
        <c:forEach var="employer" items="${employers}">
            <tr>
                <td><a href = '<c:url value="/edit?id=${employer.id}"/>'> ${employer.id}</a></td>
                <td>${employer.kip}</td>
                <td>${employer.dis}</td>
                <td>${employer.role}</td>
                <td>${employer.name}</td>
                <td>${employer.workpl}</td>
                <td>${employer.plst}</td>
                <td>${employer.plfin}</td>
                <td>${employer.datecr}</td>
                <td>${employer.dateup}</td>
                <td>${employer.whoup}</td>
                <td>${employer.whocr}</td>
                <td>

                    <form method="post" action='<c:url value="/delete" />'  style="display:inline;">
                        <input type="hidden" name="id" value="${employer.id}">
                        <input type="submit"  value="Delete">
                    </form>
                </td>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

1 ответ 1

1

Конкретно по jsp помочь не могу, но, надеюсь, будет полезно:

  1. Вы можете добавить параметры from и size к запросу, и отдавать не все 1500 значений, а частями. Кнопки страниц с соответствующими параметрами придётся сгенерировать.
  2. Попробуйте использовать DataTables -- удобную библиотеку для пагинации таблиц.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.