我有一个 Java 对象列表，需要在 div 内的 Bootstrap 卡中显示。如何使用 Angular JS 或任何 JavaScript 对 Bootsrap 卡进行分页
例如下面的例子Bootstr我有6张卡。现在我需要迭代 Spring Rest Controller 中的 Java 对象列表，并使用分页在卡片中显示。
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default bootcards-summary">
<div class="panel-heading">
<h3 class="panel-title">Company Management</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#finances" onclick="comp('#finances')">
<i class="fa fa-3x fa-dollar"></i>
<h4>Finances <span class="label label-info">431</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#clients" onclick="comp('#clients')">
<i class="fa fa-3x fa-users"></i>
<h4>Clients <span class="label label-warning">432</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#files" onclick="comp('#files')">
<i class="fa fa-3x fa-files-o"></i>
<h4>Files <span class="label label-info">65</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#tasks" onclick="comp('#tasks')">
<i class="fa fa-3x fa-check-square-o"></i>
<h4>Tasks <span class="label label-warning">109</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#socialmedia" onclick="comp('#socialmedia')">
<i class="fa fa-3x fa-share-alt"></i>
<h4>Social Media <span class="label label-warning">110</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#growth" onclick="comp('#growth')">
<i class="fa fa-3x fa-bar-chart"></i>
<h4>Growth <span class="label label-info">110</span></h4>
</a>
</div>
</div>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="finances">
<div class="bootcards-chart-canvas" id="financesChart"></div>
</div>
<div class="table-responsive cards hidden" id="clients">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Products</th>
<th>Paid</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johan Millner</td>
<td>2</td>
<td>500</td>
</tr>
<tr>
<td>Jena Torey</td>
<td>3</td>
<td>750</td>
</tr>
<tr>
<td>Jesus Da Silva</td>
<td>7</td>
<td>1750</td>
</tr>
<tr>
<td>Robert Ramsey</td>
<td>1</td>
<td>250</td>
</tr>
<tr>
<td>Ben Rosenberg</td>
<td>5</td>
<td>1250</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>18</strong></td>
<td><strong>4500</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="files">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Files</th>
<th>Forecast</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Estimated Earning</td>
<td>$1.8M</td>
<td>Under Norm</td>
</tr>
<tr>
<td>Future Plan</td>
<td>$12M</td>
<td>2016-2020</td>
</tr>
<tr>
<td>This Year Plan</td>
<td>$0.7M</td>
<td>Under Norm</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="tasks">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Task</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td>Expand the existing offices</td>
<td>On Progress</td>
</tr>
<tr>
<td>Start working on the new plan</td>
<td>To Do</td>
</tr>
<tr>
<td>Implement Jira</td>
<td>To Do</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="socialmedia">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Nr.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Facebook</td>
<td>2700</td>
</tr>
<tr>
<td>Twitter</td>
<td>3300</td>
</tr>
<tr>
<td>Instagram</td>
<td>2200</td>
</tr>
<tr>
<td>Email Marketing</td>
<td>1000</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>9200</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="growth">
<div class="bootcards-chart-canvas" id="growthChart"></div>
</div>
<div class="panel-footer">
<small>Sample Company</small>
</div>
</div>
</div>
</div>
</div>div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default bootcards-summary">
<div class="panel-heading">
<h3 class="panel-title">Company Management</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#finances" onclick="comp('#finances')">
<i class="fa fa-3x fa-dollar"></i>
<h4>Finances <span class="label label-info">431</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#clients" onclick="comp('#clients')">
<i class="fa fa-3x fa-users"></i>
<h4>Clients <span class="label label-warning">432</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#files" onclick="comp('#files')">
<i class="fa fa-3x fa-files-o"></i>
<h4>Files <span class="label label-info">65</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#tasks" onclick="comp('#tasks')">
<i class="fa fa-3x fa-check-square-o"></i>
<h4>Tasks <span class="label label-warning">109</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#socialmedia" onclick="comp('#socialmedia')">
<i class="fa fa-3x fa-share-alt"></i>
<h4>Social Media <span class="label label-warning">110</span></h4>
</a>
</div>
<div class="col-xs-6 col-sm-4">
<a class="bootcards-summary-item" href="#growth" onclick="comp('#growth')">
<i class="fa fa-3x fa-bar-chart"></i>
<h4>Growth <span class="label label-info">110</span></h4>
</a>
</div>
</div>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="finances">
<div class="bootcards-chart-canvas" id="financesChart"></div>
</div>
<div class="table-responsive cards hidden" id="clients">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Products</th>
<th>Paid</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johan Millner</td>
<td>2</td>
<td>500</td>
</tr>
<tr>
<td>Jena Torey</td>
<td>3</td>
<td>750</td>
</tr>
<tr>
<td>Jesus Da Silva</td>
<td>7</td>
<td>1750</td>
</tr>
<tr>
<td>Robert Ramsey</td>
<td>1</td>
<td>250</td>
</tr>
<tr>
<td>Ben Rosenberg</td>
<td>5</td>
<td>1250</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>18</strong></td>
<td><strong>4500</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="files">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Files</th>
<th>Forecast</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Estimated Earning</td>
<td>$1.8M</td>
<td>Under Norm</td>
</tr>
<tr>
<td>Future Plan</td>
<td>$12M</td>
<td>2016-2020</td>
</tr>
<tr>
<td>This Year Plan</td>
<td>$0.7M</td>
<td>Under Norm</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="tasks">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Task</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td>Expand the existing offices</td>
<td>On Progress</td>
</tr>
<tr>
<td>Start working on the new plan</td>
<td>To Do</td>
</tr>
<tr>
<td>Implement Jira</td>
<td>To Do</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive cards hidden" id="socialmedia">
<table class="table table-hover">
<thead>
<tr class="active">
<th>Name</th>
<th>Nr.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Facebook</td>
<td>2700</td>
</tr>
<tr>
<td>Twitter</td>
<td>3300</td>
</tr>
<tr>
<td>Instagram</td>
<td>2200</td>
</tr>
<tr>
<td>Email Marketing</td>
<td>1000</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td><strong>9200</strong></td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-default bootcards-chart cards hidden" id="growth">
<div class="bootcards-chart-canvas" id="growthChart"></div>
</div>
<div class="panel-footer">
<small>Sample Company</small>
</div>
</div>
</div>
</div>
</div>
例如 enter link description here 中的一个示例
最佳答案
首先，您需要声明一个 Controller 来获取要传递到卡片的模型，
@RequestMapping(method=RequestMethod.GET)
public ModelAndView getEmployees(){
return new ModelAndView("HereYouUsersView", "EmployeeListObject", EmployeeListObject);
}
然后在您看来，您需要迭代卡片以填充数据，如下所示:
<c:forEach items="${EmployeeListObject}" var="user">
<tr>
<td><c:out value="${user.nombre}"></c:out></td>
<td><c:out value="${user.correo}"></c:out></td>
<td><c:out value="${user.telefono}"></c:out></td>
<td><c:out value="${user.id}"></c:out></td>
</tr>
</c:forEach>
确保您位于 View 顶部:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
[编辑]
<div class="pagination">
<c:forEach items="${EmployeeListObject}" var="user" varStatus="loop">
<a href="#${loop.index}">Page ${loop.index}</a>
</c:forEach>
</div>
然后在你的卡片中:
<c:forEach items="${EmployeeListObject}" var="user" varStatus="loop">
<div id="${loop.index}" class="card">
//your card data here
<div>
</c:forEach>
[JQuery 示例]
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script>
<link rel="stylesheet" type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/css/mdb.min.css">
<title>
</title>
</head>
<body>
<!--Pagination red-->
<nav>
<ul class="pagination pg-red">
<!--Numbers-->
<li class="page-item"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
</ul>
</nav>
<!--/Pagination red-->
<hr/>
<h3>Container</h3>
<hr/>
<script type="text/javascript">
$(document).ready(function(){
//Hide all cards
$(".card").each(function(index, value){
$('.card').hide();
})
$(".page-link").on('click', function(){
$(".page-link").each(function(index, value){
$(value).parent().removeClass("active");
});
//Hide all cards
$(".card").each(function(index, value){
$('.card').hide();
})
$(this).parent().addClass("active");
var cardId = "#" + $(this).text();
$(cardId).show();
});
});
</script>
<div class="container">
<!--Card-->
<div id="1" class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">This is card 1</h4>
<!--Text-->
<p class="card-text">First content</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
<!--Card-->
<div id="2" class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">This is card 2</h4>
<!--Text-->
<p class="card-text">Second content</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
<!--Card-->
<div id="3" class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">This is card 3</h4>
<!--Text-->
<p class="card-text">Third content</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
<!--Card-->
<div id="4" class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">This is card 4</h4>
<!--Text-->
<p class="card-text">Fourth content</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
</body>
</html>检查片段， 问候
关于javascript - 如何对 Bootstrap 卡进行分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45121994/