Javaで実践！ページング機能の10選手法

import java.util.List;

public class BasicPaging {
  public static void main(String[] args) {
    List<String> allItems = List.of("Item1", "Item2", "Item3", "Item4", "Item5", "Item6");
    int itemsPerPage = 2;
    int currentPage = 1;
    int start = (currentPage - 1) * itemsPerPage;
    int end = Math.min(start + itemsPerPage, allItems.size());
    List<String> pagedItems = allItems.subList(start, end);
    for (String item : pagedItems) {
      System.out.println(item);
    }
  }
}

import java.util.List;
import java.util.stream.Collectors;

public class FilteredPaging {
  public static void main(String[] args) {
    List<String> allItems = List.of("Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig");
    String filter = "a";
    List<String> filteredItems = allItems.stream()
        .filter(item -> item.toLowerCase().contains(filter.toLowerCase()))
        .collect(Collectors.toList());
    List<String> pagedItems = filteredItems.subList(0, Math.min(2, filteredItems.size()));
    pagedItems.forEach(System.out::println);
  }
}

import java.util.*;
import java.util.stream.Collectors;

public class SortedPaging {
  public static void main(String[] args) {
    List<String> allItems = List.of("Banana", "Apple", "Cherry", "Date", "Elderberry", "Fig");
    String sortOrder = "asc";
    List<String> sortedItems = sortOrder.equals("asc")
        ? allItems.stream().sorted().collect(Collectors.toList())
        : allItems.stream().sorted(Comparator.reverseOrder()).collect(Collectors.toList());
    sortedItems.subList(0, 2).forEach(System.out::println);
  }
}

import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
public class AjaxPagingController {
  @RequestMapping("/getPagedData")
  public List<String> getPagedData(@RequestParam int currentPage) {
    List<String> allItems = List.of("Item1", "Item2", "Item3", "Item4", "Item5");
    int start = (currentPage - 1) * 2;
    int end = Math.min(start + 2, allItems.size());
    return allItems.subList(start, end);
  }
}

function loadPage(currentPage) {
  $.ajax({
    url: "/getPagedData",
    type: "GET",
    data: {currentPage: currentPage},
    success: function(data) {
      // 受け取ったデータをDOMに描画
    }
  });
}

import org.springframework.web.bind.annotation.*;
import java.util.*;

@RestController
public class EndlessScrollController {
  @RequestMapping("/loadMore")
  public List<String> loadMore(@RequestParam int lastId) {
    List<String> allData = new ArrayList<>();
    for (int i = 1; i <= 100; i++) { allData.add("Item" + i); }
    int endIndex = Math.min(lastId + 10, allData.size());
    return allData.subList(lastId, endIndex);
  }
}

let lastId = 0;
function loadMore() {
  $.ajax({
    url: "/loadMore",
    type: "GET",
    data: {lastId: lastId},
    success: function(data) {
      data.forEach(function(item) {
        $("#itemList").append("<li>" + item + "</li>");
        lastId++;
      });
    }
  });
}
$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
    loadMore();
  }
});

<ul id="pageList">
  <li th:each="item : ${items}" th:text="${item.name}"></li>
</ul>
<div id="customPagination">
  <button th:if="${prevPage != null}">前へ</button>
  <span th:text="${currentPage}"></span>
  <button th:if="${nextPage != null}">次へ</button>
</div>

#customPagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
#customPagination button {
  margin: 0 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
#customPagination button:hover {
  background-color: #0056b3;
}

@RequestMapping("/customPagination")
public String customPagination(@RequestParam(required = false, defaultValue = "1") int page, Model model) {
  int pageSize = 10;
  int totalItems = 100;
  int startIndex = (page - 1) * pageSize;
  int endIndex = Math.min(startIndex + pageSize, totalItems);
  model.addAttribute("currentPage", page);
  model.addAttribute("prevPage", page > 1 ? page - 1 : null);
  model.addAttribute("nextPage", endIndex < totalItems ? page + 1 : null);
  return "customPagination";
}

SELECT * FROM items
ORDER BY id
LIMIT 10 OFFSET 30;

String sql = "SELECT * FROM items ORDER BY id LIMIT ? OFFSET ?";
try (PreparedStatement ps = conn.prepareStatement(sql)) {
  ps.setInt(1, limit);
  ps.setInt(2, offset);
  try (ResultSet rs = ps.executeQuery()) {
    while (rs.next()) {
      // Itemへ変換
    }
  }
}

public int getTotalItemCount() {
  int count = 0;
  String sql = "SELECT COUNT(*) FROM items";
  try (PreparedStatement ps = conn.prepareStatement(sql);
       ResultSet rs = ps.executeQuery()) {
    if (rs.next()) { count = rs.getInt(1); }
  }
  return count;
}

spring.datasource.h2.url=jdbc:h2:mem:testdb
spring.datasource.h2.username=sa
spring.datasource.h2.password=password

spring.datasource.mysql.url=jdbc:mysql://localhost:3306/testdb
spring.datasource.mysql.username=root
spring.datasource.mysql.password=root

@Controller
public class PagingController {
  @GetMapping("/items")
  public String showItems(@RequestParam(required = false, defaultValue = "1") int page, Model model) {
    List<String> items = IntStream.rangeClosed(1, 100).mapToObj(String::valueOf).collect(Collectors.toList());
    List<String> pagedItems = items.subList((page - 1) * 10, Math.min(page * 10, items.size()));
    model.addAttribute("items", pagedItems);
    model.addAttribute("currentPage", page);
    return "items";
  }
}

<div>
  <ul>
    <li th:each="item : ${items}"><span th:text="${item}"></span></li>
  </ul>
</div>
<div>
  <a th:href="@{/items(page=${currentPage - 1})}">前へ</a>
  <a th:href="@{/items(page=${currentPage + 1})}">次へ</a>
</div>

@Controller
public class ModalPagingController {
  @GetMapping("/products")
  public String showProducts(Model model) {
    List<String> products = IntStream.rangeClosed(1, 50).mapToObj(String::valueOf).collect(Collectors.toList());
    model.addAttribute("products", products);
    return "products";
  }
  @GetMapping("/product/details")
  public String productDetails(@RequestParam int id, Model model) {
    model.addAttribute("detail", "Product Details for ID: " + id);
    return "productDetails";
  }
}

@Controller
public class SearchPagingController {
  @GetMapping("/search")
  public String search(@RequestParam(required = false) String query,
                       @RequestParam(required = false, defaultValue = "1") Integer page,
                       Model model) {
    List<String> allResults = mockSearch(query);
    int start = (page - 1) * 10;
    int end = Math.min(start + 10, allResults.size());
    model.addAttribute("results", allResults.subList(start, end));
    return "searchResults";
  }
}

@Controller
public class MultiColumnSortPagingController {
  @Autowired
  private YourRepository repository;
  @GetMapping("/multiColumnSort")
  public String multiColumnSort(@RequestParam String sort1, @RequestParam String sort2, @PageableDefault Pageable pageable, Model model) {
    Sort sort = Sort.by(Sort.Order.asc(sort1), Sort.Order.desc(sort2));
    Pageable request = PageRequest.of(pageable.getPageNumber(), pageable.getPageSize(), sort);
    Page<YourEntity> page = repository.findAll(request);
    model.addAttribute("data", page.getContent());
    return "multiSort";
  }
}

int pageSize = 10;
int offset = (currentPage - 1) * pageSize;

String sql = "SELECT * FROM table LIMIT ? OFFSET ?";
PreparedStatement pstmt = connection.prepareStatement(sql);
pstmt.setInt(1, pageSize);
pstmt.setInt(2, offset);
ResultSet rs = pstmt.executeQuery();

$(document).ready(function(){
  var pageNum = 1;
  function fetchData() {
    $.ajax({
      url: '/api/data?page=' + pageNum,
      type: 'GET',
      success: function(data) {
        $("#content").append(data);
      }
    });
  }
  fetchData();
  $("#nextButton").click(function(){
    pageNum++;
    fetchData();
  });
});

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前へ</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">次へ</a></li>
  </ul>
</nav>

let allData = [];
let currentPage = 1;
let pageSize = 10;

function paginateData() {
  const offset = (currentPage - 1) * pageSize;
  const paginatedData = allData.slice(offset, offset + pageSize);
  updateDOM(paginatedData);
}

function updateDOM(data) {
  // DOM更新処理をここに置く
}