[text] filter.html

Viewer

copydownloadembedprintName: filter.html
  1. !DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Search usng filtering in the book list</title>
  6.     <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/css/bootstrap.min.css">
  7.     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  8.     <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
  9.     <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.min.js"></script>
  10.     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  11.     <link rel="stylesheet" href="/resources/demos/style.css">
  12.     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  13.     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  14.     <script>
  15.   $( function() {
  16.     $( "#publisheddate" ).datepicker();
  17.   } );
  18.   </script>
  19. </head>
  20. <body>
  21. <nav class="navbar navbar-inverse">
  22.     <div class="container-fluid">
  23.         <h3>Searching using filtering the book list</h3>
  24.     </div>
  25. </nav>
  26. <div class="container">
  27.     <div class="row">
  28.         <form class="form-horizontal" action="filter.html" method="POST">
  29.             <div class="form-group">
  30.  
  31.                 <label class="col-lg-2 control-label">Author: </label>
  32.                 <div class="col-lg-4">
  33.                     <input type="text" class="form-control" name="author" placeholder="Author">
  34.                 </div>
  35.  
  36.                 <label class="col-lg-2 control-label">Title: </label>
  37.                 <div class="col-lg-4">
  38.                     <input type="text" class="form-control" name="title" placeholder="Title">
  39.                 </div>
  40.  
  41.  
  42.                 <label class="col-lg-2 control-label">Description: </label>
  43.                 <div class="col-lg-4">
  44.                     <input type="text" class="form-control" name="description" placeholder="Description">
  45.                 </div>
  46.  
  47.                 <div class="form-group">
  48.                     <label class="col-lg-2 control-label">Published date: </label>
  49.                     <div class="col-lg4">
  50.                         <input  type="text" id="publisheddate" class="form-control">
  51.                     </div>
  52.                 </div>
  53.                 <div class="form-group">
  54.                     <label class="col-lg-2 control-label"></label>
  55.                     <div class="col-lg4">
  56.                         <button onclick="filterBooks(author,title,description,publishedDate)">Search</button>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.         </form>
  61.     </div>
  62. </div>
  63.  
  64. <div>
  65.     <table class="table table-striped table-bordered">
  66.         <thead class="thead-dark">
  67.         <tr>
  68.             <th>Book ID</th>
  69.             <th>Title</th>
  70.             <th>Author</th>
  71.             <th>Genre</th>
  72.             <th>Price</th>
  73.             <th>Publish Date</th>
  74.             <th>Description</th>
  75.             <th>Borrowed</th>
  76.             <th>Borrowed By</th>
  77.         </tr>
  78.         </thead>
  79.         <tbody>
  80.         <tr th:each="book: ${filterBooks}">
  81.             <td th:text="${book.getId}"> Book-ID </td>
  82.             <td th:text="${book.getTitle}">Title </td>
  83.             <td th:text="${book.author}">Author</td>
  84.             <td th:text="${book.genre}">Genre</td>
  85.             <td th:text="${book.price}">Price</td>
  86.             <td th:text="${book.publish_date}">Publish-Date</td>
  87.             <td th:text="${book.description}">Description</td>
  88.             <td th:text="${book.borrowed}">Borrowed</td>
  89.             <td th:text="${book.borrowedBy}">Borrowed-By</td>
  90.             <td><input type="checkbox" field="*{requestedBooks}" value="${book.id}" /></td>
  91.         </tbody>
  92.     </table>
  93. </div>
  94. <div class="btn-group">
  95.     <button onclick="borrowBook(userEmail, bookIds, model)">Borrow</button>
  96.     <button onclick="returnBook(userEmail, bookId)">Return</button>
  97. </div>
  98.  
  99.  
  100. </body>
  101. </html>

Editor

You can edit this paste and save as new:


File Description
  • filter.html
  • Paste Code
  • 20 May-2021
  • 3.86 Kb
You can Share it: