Question

我目前有一个显示数据库中所有记录的JSP代码。我想把它拆分成页面，比如说每页10行。我尝试使用bootstrap和datatables在本文中找到的解决方案，但我仍然在一个页面上获取所有行。

这是我试过的代码。

<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字符串传递给视图，然后像这样加载：

    $("#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选项处理其余部分。

Answer 2

我最终使用this示例中的代码来表示客户端分页。

Answer 3

这可以比你想做的更简单。只需添加displaytag jar，下面的链接就会对您从数据库中获取的结果集进行分页。

它简单易用，不必为javascript而工作。也是它的客户端，所以你在那方面做得很好。

Display Tag Library

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

3 个答案: