Is it possible to speed up table loading?

D

DunkanMaklaut2020-08-19 08:38:32

Java

DunkanMaklaut, 2020-08-19 08:38:32

I use DataTables for a rather large table of 1600 rows, and when loading, the browser first shows all 1600 rows and then only loads it using DT in the form in which it should be (as on the official website), and this takes a very long time, Is it possible to speed up this business, or at least not show all 1600 lines before the script loads them? Output code:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page pageEncoding="utf-8"%>
  html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src = "http://code.jquery.com/jquery-1.9.1.js"> </script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script type="text/javascript" >
        <%@include file= "/WEB-INF/js/dataTables.searchBuilder.js"%>
    </script>

    <link href="https://nightly.datatables.net/searchbuilder/css/searchBuilder.dataTables.css?_=a51bf91506bde26d764a44ddd25768db.css" rel="stylesheet" type="text/css" />

    <link href="https://nightly.datatables.net/searchbuilder/css/searchBuilder.dataTables.css?_=a51bf91506bde26d764a44ddd25768db.css" rel="stylesheet" type="text/css" />
    <title>Project team list</title>

</head>
<body>
<div class="container">

    <table id="KipTable">
        <thead>
        <tr><th> ID </th><th> Короткое название </th><th>Полное название</th><th>Статус</th><th> Код проекта </th><th> </th></tr>
        </thead>
        <tbody>
        <c:forEach var="kip" items="${kip}">
            <tr>
                <td><a href='<c:url value="/kip_edit?id=${kip.id}"/>'>${kip.id}</a></td>
                <td>${kip.shortName}</td>
                <td>${kip.fullName}</td>
                <td>${kip.status}</td>
                <td>${kip.code}</td>
                <td>
                    <form method="post" action='<c:url value="/kip_delete" />'  style="display:inline;">
                        <input type="hidden" name="id" value="${kip.id}">
                        <input type="submit"  value="Delete">
                    </form>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</body>
<script id="rendered-js">
    $(document).ready( function () {
        var table = $('#KipTable').DataTable({
            dom: 'Qltip',
            stateSave: true
        });
    });
</script>
</body>
</html>

the server side uses Java 6 + Tomcat 7
on the DT site there is a ServerSide function , but I don’t understand what to do with ajax and how to use it with a Java server, the examples use PHP everywhere which I don’t know

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

O

Orkhan, 2020-08-19
@DunkanMaklaut

Well, for starters, do not give all 1600 rows for the table to the front. It turns out that you give all the lines from the server, and then DT using js separates them into pages.
You need to set up ServerSide pagination and get data by 100-200 pieces using Ajax.
Here is the finished lib for DataTables + Spring:
https://github.com/darrachequesne/spring-data-jpa-...
Here is the ready lib for DataTables + Java
https://github.com/davioooh/datatables-pagination
https ://github.com/darrachequesne/spring-data-jpa-... ://github.com/eveoh/datatables-java