如何分頁引導卡

我有需要專區內顯示在bootsrap卡的Java對象的列表。如何使用角度js或任何JavaScript來標記bootsrap卡如何分頁引導卡

例如在下面的示例Bootstr我有6張卡片。現在我需要從Spring rest控制器遍歷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

來源

2017-07-15 TechEnthu

我看不到說：「Java的目標代碼，也不要你的意思的Javascript ..不是Java。（修辭） – pokeybit

你試過甚麼？ –

其實我有一個彈簧休息控制器。在視圖中，我正在獲取Java對象列表。例如，說出具有ID和名稱的員工列表。我需要顯示在分頁引導卡Employee對象的該列表中的JSP – TechEnthu

首先，你需要聲明一個控制器，讓你想傳遞給你的卡的型號，

@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>

確保y OU必須在你的視圖的頂部：

<%@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> 
 
\t <!-- 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> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script> 
 
\t <link rel="stylesheet" type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/css/mdb.min.css"> 
 
\t <title> 
 
\t \t 
 
\t </title> 
 
</head> 
 
<body> 
 

 
\t <!--Pagination red--> 
 
\t <nav> 
 
\t  <ul class="pagination pg-red"> 
 

 
\t   <!--Numbers--> 
 
\t   <li class="page-item"><a class="page-link">1</a></li> 
 
\t   <li class="page-item"><a class="page-link">2</a></li> 
 
\t   <li class="page-item"><a class="page-link">3</a></li> 
 
\t   <li class="page-item"><a class="page-link">4</a></li> 
 

 
\t  </ul> 
 
\t </nav> 
 
\t <!--/Pagination red--> 
 

 
    <hr/> 
 
    <h3>Container</h3> 
 
    <hr/> 
 
    <script type="text/javascript"> 
 
    \t $(document).ready(function(){ 
 
      
 
    \t \t //Hide all cards 
 
    \t \t $(".card").each(function(index, value){ 
 
    \t \t \t $('.card').hide(); 
 
    \t \t }) 
 
      
 

 
    \t \t $(".page-link").on('click', function(){ 
 
       
 
    \t \t \t $(".page-link").each(function(index, value){ 
 
    \t \t \t \t $(value).parent().removeClass("active"); 
 
    \t \t \t }); 
 

 
    \t \t \t //Hide all cards 
 
\t  \t \t $(".card").each(function(index, value){ 
 
\t  \t \t \t $('.card').hide(); 
 
\t  \t \t }) 
 
    
 
    \t \t \t $(this).parent().addClass("active"); 
 
    \t \t \t var cardId = "#" + $(this).text(); 
 
    \t \t \t $(cardId).show(); 
 
    \t \t }); 
 

 
    \t }); 
 
    </script> 
 
\t <div class="container"> 
 
\t \t <!--Card--> 
 
\t \t <div id="1" class="card"> 
 

 
\t \t  <!--Card image--> 
 
\t \t  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap"> 
 
\t \t  <!--/.Card image--> 
 

 
\t \t  <!--Card content--> 
 
\t \t  <div class="card-block"> 
 
\t \t   <!--Title--> 
 
\t \t   <h4 class="card-title">This is card 1</h4> 
 
\t \t   <!--Text--> 
 
\t \t   <p class="card-text">First content</p> 
 
\t \t   <a href="#" class="btn btn-primary">Button</a> 
 
\t \t  </div> 
 
\t \t  <!--/.Card content--> 
 

 
\t \t </div> 
 
\t \t <!--/.Card--> 
 

 
\t \t <!--Card--> 
 
\t \t <div id="2" class="card"> 
 

 
\t \t  <!--Card image--> 
 
\t \t  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap"> 
 
\t \t  <!--/.Card image--> 
 

 
\t \t  <!--Card content--> 
 
\t \t  <div class="card-block"> 
 
\t \t   <!--Title--> 
 
\t \t   <h4 class="card-title">This is card 2</h4> 
 
\t \t   <!--Text--> 
 
\t \t   <p class="card-text">Second content</p> 
 
\t \t   <a href="#" class="btn btn-primary">Button</a> 
 
\t \t  </div> 
 
\t \t  <!--/.Card content--> 
 

 
\t \t </div> 
 
\t \t <!--/.Card--> 
 

 
\t \t <!--Card--> 
 
\t \t <div id="3" class="card"> 
 

 
\t \t  <!--Card image--> 
 
\t \t  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap"> 
 
\t \t  <!--/.Card image--> 
 

 
\t \t  <!--Card content--> 
 
\t \t  <div class="card-block"> 
 
\t \t   <!--Title--> 
 
\t \t   <h4 class="card-title">This is card 3</h4> 
 
\t \t   <!--Text--> 
 
\t \t   <p class="card-text">Third content</p> 
 
\t \t   <a href="#" class="btn btn-primary">Button</a> 
 
\t \t  </div> 
 
\t \t  <!--/.Card content--> 
 

 
\t \t </div> 
 
\t \t <!--/.Card--> 
 

 
\t \t <!--Card--> 
 
\t \t <div id="4" class="card"> 
 

 
\t \t  <!--Card image--> 
 
\t \t  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap"> 
 
\t \t  <!--/.Card image--> 
 

 
\t \t  <!--Card content--> 
 
\t \t  <div class="card-block"> 
 
\t \t   <!--Title--> 
 
\t \t   <h4 class="card-title">This is card 4</h4> 
 
\t \t   <!--Text--> 
 
\t \t   <p class="card-text">Fourth content</p> 
 
\t \t   <a href="#" class="btn btn-primary">Button</a> 
 
\t \t  </div> 
 
\t \t  <!--/.Card content--> 
 

 
\t \t </div> 
 
\t \t <!--/.Card--> 
 
\t </div> 
 

 

 
\t 
 

 
</body> 
 
</html>

檢查片斷，問候

來源

2017-07-15 19:46:44

謝謝你現在我使用上面的jstl標籤顯示卡。但我的問題是如何分頁。 – TechEnthu

This is some text within a card block.

– TechEnthu

使用上述引導卡。我怎樣才能在分頁顯示這些卡片 – TechEnthu

如何分頁引導卡

回答

相關問題