javascript - 如何在多个页面中显示从数据库中获取的行？

Question

我目前有一个 JSP 代码，可以显示数据库中的所有记录。我想将其分成几页，假设每页 10 行。我尝试使用 Bootstrap 和数据表在这篇文章中找到的解决方案，但我仍然在一页上获得所有行。

这是我尝试过的代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
.
.
.
.
.
.

<table BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=90% id="table1" class="display">
        <thead>
            <td><b>FGC ID</b></td> 
            <td><b>PERSON</b></td>           
            <td><b>TYPE OF EXPERIMENT</b></td>           
            <td><b>FACTOR</b></td>
            <td><b>TISSUE</b></td> 
            <td><b>CONDITIONS</b></td>           
            <td><b>SAMPLE ID</b></td>           
            <td><b>SAMPLE NAME</b></td> 
            <td><b>DATE</b></td> 
            <td><b>COMMENTS</b></td>           
            <td><b>BROSWER TRACK</b></td>           
            <td><b>BROSWER TRACK</b></td>
        </thead>
        <tbody>
  <c:forEach items="${experimentList}" var="experimentList">    
        <tr>
            <td>${experimentList.FGCID}</td>
            <td>${experimentList.person}</td>
            <td>${experimentList.type}</td>
            <td>${experimentList.factor}</td>
            <td>${experimentList.tissue}</td>
            <td>${experimentList.condition}</td>
            <td>${experimentList.sample}</td>
            <td>${experimentList.name}</td>
            <td>${experimentList.date}</td>
            <td>${experimentList.comments}</td>
    <form action="${pageContext.request.contextPath}/getfiles" method="post">  
            <td><input type="submit" name="track_1" value="positive" /><input type="hidden" name="track1" value="${experimentList.track1}" /></td>
            <td><input type="submit" name="track_2" value="negative" /><input type="hidden" name="track2" value="${experimentList.track2}" /></td>
    </form> 


</tr> 
  </c:forEach> 

    </tbody>


</table>

    <!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- DATA TABES SCRIPT -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js" type="text/javascript"></script>

</center>
</body>
<script type="text/javascript">
   $(function() {
    $("#table1").dataTable({
        "iDisplayLength": 10,
        "aLengthMenu": [[10, 25, 50, 100,  -1], [10, 25, 50, 100, "All"]]
       });
   });
  </script>

Answer 1

我只是将数据作为 AJAX 字符串传递到 View ，然后像这样加载它:

    $("#table1").dataTable({
        "iDisplayLength": 10,
        "aLengthMenu": [[10, 25, 50, 100,  -1], [10, 25, 50, 100, "All"]],
        "data" : ${model.experimentJSON},
        "serverside" : false,
        "paginate": true,
       });
   });

请注意，这不会响应服务器上的更改，但您的示例也不会响应。如果您希望它具有响应能力，则需要使用 ajax 属性，例如:

    $("#table1").dataTable({
        "iDisplayLength": 10,
        "aLengthMenu": [[10, 25, 50, 100,  -1], [10, 25, 50, 100, "All"]]
        "ajax": {
            url: "serverAction",
            type: "POST",
            data: function(d) {
                return {json: JSON.stringift(d)};
            }
        },
        "serverSide:" true,
        "paginate": true
       });
   });

然后您可以让 dataTable 选项处理其余的事情。