I dont know why but search and buttons like pdf,print not appear even though nothing is wrong.
This is my current table:
This is the code:
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">1.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button></form>
<a type="submit" class="btn btn-danger btn-xs">Remove</a>
</div>
</td>
</tbody>
</table>
I delete some of the code in here because its too long
This is what I want to achieve:
Table that have search and buttons
This is my datatable script function:
$(function () {
$("#example1").DataTable({
"responsive": true, "lengthChange": false, "autoWidth": false,
"buttons": ["excel", "pdf", "print"]
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
});
Note: I noticed rowspan is making the table wrong but I really need that rowspan.
CodePudding user response：
You could try this code for search...
<table id="Example" cellspacing="0" width="100%">
Hope, it would help you..
CodePudding user response：
your code of the problem arent in this part.
CodePudding user response：
I made you like an extremely basic version but I think this is what you're going for. Look at the HTML I added and the CSS. I assumed there were many more of these tables. I added a search bar and some potential buttons for linking to an excel, pdf, or print.
.container {
width: 100%;
height: 100%;
background-color: lightblue;
border: solid;
overflow: visible;
}
.d-flex {
display: flex;
flex-direction: column;
}
.nav-comp {
list-style-type: none;
display: flex;
}
li {
background-color: lightgrey;
border: solid;
list-style-type: none;
width: 100px;
text-align: center;
font-weight: bold;
cursor: pointer;
padding: 5px;
margin-right: 10px;
}
input[type=search] {
position: absolute;
top: 2px;
right: 5px;
width: 30%;
text-align: right;
border: solid lightgrey;
border-radius: 10px;
}
table#example1 {
border-bottom: black solid;
margin-bottom: 1rem;
}<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<nav>
<ul class="nav-comp">
<li>Excel</li>
<li>PDF</li>
<li>Print</li>
</ul>
</nav>
<div class="search-bar">
<input type="search" placeholder="Search">
</div>
<div class="container">
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">1.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">2.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">3.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">4.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">5.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">6.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">7.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
<table id="example1" class="table table-bordered table-striped dataTable no-footer">
<thead>
<tr>
<th>No.</th>
<th>Trimester</th>
<th>Role</th>
<th>Before</th>
<th>Due Date</th>
<th>After</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" class="bg-white">8.</td>
<td rowspan="4" class="bg-white">[2110] Trimester 1 - 2021/2022</td>
<td>Coordinator</td>
<td>10/12/2021</td>
<td>12/12/2021</td>
<td>13/12/2021</td>
<td>
<div class="d-flex">
<button type="submit" class="btn btn-warning btn-xs mr-1">Edit</button>
<button type="submit" class="btn btn-danger btn-xs">Remove</button>
</div>
</td>
</tbody>
</table>
</div>