Bootstrap datatable not working on adding accordion - php

I have a datatable as follows:
foreach($tickets as $tickets)
{
echo ('<tr>');
echo ('<td>'.$tickets->error.'</td>');
echo ('<td>'.$tickets->hours.'</td>');
echo ('<td>'.$tickets->time.'</td>');
echo ('<td>'.$tickets->date.'</td>');
echo ('</tr>');
}
I added accordion effect to it likewise:
foreach($tickets as $tickets)
{
echo ('<tr data-toggle="collapse" data-target=".demo1">');
echo ('<td>'.$tickets->error.'</td>');
echo ('<td>'.$tickets->hours.'</td>');
echo ('<td>'.$tickets->time.'</td>');
echo ('<td>'.$tickets->date.'</td>');
echo ('</tr>');
echo ('<tr>');
echo ('<td class="hiddenRow">');
echo ('<div class="collapse demo1">Demo1</div>');
echo ('</td>');
echo ('</tr>');
}
and the table has lost it's datatable properties such as search, view as 10/25/50 items per page etc.
Jquery:
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});
$(".clickable-row").click(function() {
window.location = $(this).data("href");
});
I'd like help regarding this issue.


Try using colspan="4" on the second td


Here is fiddle: http://jsfiddle.net/3ghbLrpu/1/
<html>
<head>
<script src="js/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Error</th>
<th>Time Spent</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Error</th>
<th>Time Spent</th>
<th>Time</th>
<th>Date</th>
</tr>
</tfoot>
<tbody>
<tr data-toggle="collapse" data-target=".demo1" class="accordion-toggle">
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td class="hiddenRow" colspan="4">
<div class="collapse demo1">Demo1</div>
</td>
</tr>
</tbody>
</table>
</body>
CSS
.hiddenRow {
padding: 0 !important;
}
Another option is use bootstrap and remove knockoutjs
https://codepen.io/creativedev/pen/XYMRyQ
$(document).ready(function() {
$("#collapseme").click(function() {
if($("#test").hasClass("out")) {
$("#test").addClass("in");
$("#test").removeClass("out");
} else {
$("#test").addClass("out");
$("#test").removeClass("in");
}
});
});
HTML
<table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Error</th>
<th>Time Spent</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr class="" id="collapseme">
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td class="hiddenRow" colspan="4">
<div class="collapse out" id="test">Demo1</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Error</th>
<th>Time Spent</th>
<th>Time</th>
<th>Date</th>
</tr>
</tfoot>
</table>

Related

Datatable error searching in html and php

I always get this error DataTables warning: table id=dataTable - Cannot reinitialise DataTable. For more information about this error, please see here when the page loads.
i find it hard to use the search, pagination and entry functionalities. please i need your help.
<html>
<body>
<table class="table table-striped table-bordered table-hover" id="dataTable" cellspacing="0" style="width="100%">
<thead>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th style="width: 23%">Action</th>
</tr>
</thead>
<?php $sql = "SELECT * FROM users WHERE Status='1' ";
$query = $dbh->prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0){
foreach($results as $result)
{ ?>
<tbody>
<tr>
<td><?php echo htmlentities($result->UserId);?></td>
<td><?php echo htmlentities($result->Username);?></td>
<td><?php echo htmlentities($result->Fullname);?></td>
<td><?php echo htmlentities($result->Position);?></td>
<td><?php echo htmlentities($result->Gender);?></td>
<td><?php echo htmlentities($result->Email);?></td>
<td><?php echo htmlentities($result->Telephone);?></td>
</tr>
</tbody>
<?php }} ?>
<tfoot>
<tr>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</table>
</body>
<script>
$(function () {
$('#dataTable').DataTable()
$('#dataTable').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
})
})
</script>
</html>

First of all you have error here: style="width="100%" needs to be style="width:100%"
Then you call your table twice ('#dataTable').DataTable. As explained in link YOU provided.
There is also good number of examples how to start using that plugin.
Also you had 8 columns in table head and 7 in table body witch produces a error. You need to mach those numbers.
I have also included script into body and just to be sure called it on document ready. It works as seen below.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="dataTable" class="display" style="width:100%">
<thead>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th style="width: 23%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
<tfoot>
<tr>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</table>
<script>
$(document).ready(function() {
$('#dataTable').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
} );
} );
</script>
</body>
</html>
So your code should be:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<table class="table table-striped table-bordered table-hover" id="dataTable" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th style="width: 23%">Action</th>
</tr>
</thead>
<?php $sql = "SELECT * FROM users WHERE Status='1' ";
$query = $dbh->prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0){
foreach($results as $result)
{ ?>
<tbody>
<tr>
<td><?php echo htmlentities($result->UserId);?></td>
<td><?php echo htmlentities($result->Username);?></td>
<td><?php echo htmlentities($result->Fullname);?></td>
<td><?php echo htmlentities($result->Position);?></td>
<td><?php echo htmlentities($result->Gender);?></td>
<td><?php echo htmlentities($result->Email);?></td>
<td><?php echo htmlentities($result->Telephone);?></td>
<td>Missing column!</td>
</tr>
</tbody>
<?php }
?>
<tfoot>
<tr>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</table>
<script>
$(document).ready(function() {
$('#dataTable').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
})
});
</script>
</body>
</html>

Unable to recalculate the total sum of a column on filtering in PHP

I am really struggling with some code. I am trying to get the total of a specific column in a table, my code is below.
It works in terms of providing me the total of the column - but when I filter the table, the total amount remains the same and doesn't change when filtered.
For example, when I load the page - the sum of the transaction_amount column amounts to 99 - but when I filter this to search for a different account in the filter, it still throws 99 as the sum. This is probably really simple, but I have been struggling for some time now. Hoping you can help?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container box">
<h3 align="center">How to Get SUM with Datatable Server-side-processing in PHP</h3>
<br />
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th> Date</th>
<th>Account</th>
<th> Transaction Name</th>
<th> Type</th>
<th>Method</th>
<th>Amount</th>
<th> More</th>
</tr>
</thead>
<?php
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc()) {
?>
<tr class="table table-bordered table-striped" id="row-<?php echo $row["id"]; ?>">
<td style="width: 11%" class="table table-bordered table-striped"><?php echo $row["submitted_date"]; ?></td>
<td style="width: 11%"class="table table-bordered table-striped" > <?php echo $row["posting_account_number"]; ?></td>
<td style="width: 45%"class="table table-bordered table-striped"><?php echo $row["transaction_name"]; ?></td>
<td style="width: 22%"class="table table-bordered table-striped"><?php echo $row["method"]; ?></td>
<td width="11%"class="table table-bordered table-striped"><?php echo $row["type"]; ?></td>
<td class="table table-bordered table-striped"><?php echo $row["transaction_amount"]; ?></td>
<td class="table table-bordered table-striped" align = "" colspan="2">
<a Details </a>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
</tr>
</tfoot>

There are a lot of errors in HTML code in your code ... I wonder how it's running. </head> is written twice. <a> is added inside another <a>. <tr> is not closed. at the end. And other you have not closed the loop. Maybe that's why you could have been facing these issues. Rest, We need to check the filter code to tell in detail.
I have rectified your issues below.
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}
</script>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Date</th>
<th>Account</th>
<th>Transaction Name</th>
<th>Type</th>
<th>Method</th>
<th>Amount</th>
<th>More</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
?>
<tr class="table table-bordered table-striped" id="row-<?php echo $row["id"]; ?>">
<td style="width: 11%" class="table table-bordered table-striped"><?php echo $row["submitted_date"]; ?></td>
<td style="width: 11%"class="table table-bordered table-striped" > <?php echo $row["posting_account_number"]; ?></td>
<td style="width: 45%"class="table table-bordered table-striped"><?php echo $row["transaction_name"]; ?></td>
<td style="width: 22%"class="table table-bordered table-striped"><?php echo $row["method"]; ?></td>
<td width="11%"class="table table-bordered table-striped"><?php echo $row["type"]; ?></td>
<td class="table table-bordered table-striped"><?php echo $row["transaction_amount"]; ?></td>
<!-- action -->
<td class="table table-bordered table-striped" align = "" colspan="2">
Details
</td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
</tr>
</tfoot>
</table>
Updated Answer as per your requirement:
Give a class to the amount and in the js function, add the data of that class only.
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn('.cal_amt');
});
});
function calculateColumn(index) {
var total = 0;
$(index).each(function() {
var value = parseInt($(this).text());
if (!isNaN(value)) {
total += value;
console.log(total);
}
});
$('.show_amt').text('Total: ' + total);
}
</script>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Date</th>
<th>Account</th>
<th>Transaction Name</th>
<th>Type</th>
<th>Method</th>
<th>Amount</th>
<th>More</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
?>
<tr class="table table-bordered table-striped" id="row-<?php echo $row["id"]; ?>">
<td style="width: 11%" class="table table-bordered table-striped"><?php echo $row["submitted_date"]; ?></td>
<td style="width: 11%"class="table table-bordered table-striped" > <?php echo $row["posting_account_number"]; ?></td>
<td style="width: 45%"class="table table-bordered table-striped"><?php echo $row["transaction_name"]; ?></td>
<td style="width: 22%"class="table table-bordered table-striped"><?php echo $row["method"]; ?></td>
<td width="11%"class="table table-bordered table-striped cal_amt"><?php echo $row["type"]; ?></td>
<td class="table table-bordered table-striped"><?php echo $row["transaction_amount"]; ?></td>
<!-- action -->
<td class="table table-bordered table-striped" align = "" colspan="2">
Details
</td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="show_amt">Total:</td>
<td></td>
</tr>
</tfoot>
</table>

if checkbox checked changed, change class on td

I want only td (Test 1) change class(yellow).
How to make only td (Test 1) change color (not entire row).
$('input[name="cek"]').on('change', function() {
$(this).closest('tr').toggleClass('yellow', $(this).is(':checked'));
});
$(document).ready(function() {
$('input:checked[name="cek"]').closest('tr').addClass('yellow');
});
.yellow {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

You can try the below code.
$('input[name="cek"]').on('change', function() {$(this).closest('td').next('td').toggleClass('yellow',$(this).is(':checked'));});
.yellow{
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" >
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

You can do something below
$('input[name="cek"]').on('change', function() {
// $(this).closest('td').toggleClass('yellow',$(this).is(':checked'));
$(this).parents('td').siblings("td:eq(1)").toggleClass('yellow',$(this).is(':checked'));
});
$(document).ready(function() {
$('input:checked[name="cek"]').closest('tr').addClass('yellow');
});
.yellow{
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" >
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

Use parent() with next().
$('input[name="cek"]').on('change', function() {
$(this).parent().next('td').toggleClass('yellow', $(this).is(':checked'));
});
.yellow {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th nowrap>TGL</th>
<th>CEK</th>
<th>TITEL</th>
<th>VAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.12.19</td>
<td nowrap><input type='checkbox' name='cek' /></td>
<td nowrap>Test 1</td>
<td nowrap>1</td>
</tr>
</tbody>
</table>

Pagination and searchbox not display in bootstarp datatable when data fill using ajax jquery

When i display data in bootstrap datatable using ajax jquery then pagination and search box is not display.so how to solve this problem
My html sample code is here.
<div class="row" style="margin-top: 2em;">
<div class="panel panel-white">
<div class="panel-heading clearfix">
</div>
<div class="panel-body">
<div id="live_data" >
//data table display here
</div>
</div>
</div>
And my ajax file code is here
<?php
$output='';
$output.=' <div class="table-responsive">
<table id="example" class="table table-striped table-
bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
</div>';
echo $output;
?>
And my jquery function is here
getcamera();
function getcamera(){
$.ajax({
type:"POST",
url:'../ajaxfiles/ajax_getcamera.php',
success:function(data){
$('#live_data').html(data);
}
});
}
This above code is work properly but search box and pagination is not display
so how to solve that problem???

`getcamera();
function getcamera(){
$.ajax({
type:"POST",
url:'../ajaxfiles/ajax_getcamera.php',
success:function(data){
$('#live_data').html(data);
$('#example').DataTable();// Add this line.
}
});
}`
Above code will work. This is not the best solution.
For good ajax implementation you can see example usages at
https://datatables.net/examples/ajax/simple.html And https://datatables.net/examples/server_side/simple.html

PHP Tables with Pagination bootstrap

I am getting from the database data in a PHP table bootstrap. What I want is to do the pagination now, because the table I get is to long, and I want to have for example 6 rows/page. This is my code with DataTables Plugin but it's not working :/ Can anyone help me?
<html>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.11.1.min.js"></script >
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<div class="container">
<div class="row vertical-center-row">
<div class="col-lg-12">
<div class="row">
<div class="table-responsive">
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-xs-offset-4">
<table id="table" class="table table-striped" cellspacing="0" width="100%">
<h3>Update/Remove Access Rights</h3>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Surname</th>
<th>Nickname</th>
<th> Door Description </th>
</tr>
</thead>
<tbody>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#table').dataTable( {
"pagingType": "full_numbers"
} );
} );
</script>
<?php
$stmt="select id_access_rights,name,surname,nickname, description
from users
join access_rights on users.rfidcode=access_rights.users_rfidcode
join doors
on doors.id_doors=access_rights.doors_id_doors
order by name ";
$result=$conn->query($stmt);
if($result === FALSE) {
die(mysqli_error()); // TODO: better error handling
}
while($row =$result->fetch_assoc()){
$f1=$row['id_access_rights'];
$f2=$row['name'];
$f3=$row['surname'];
$f4=$row['nickname'];
$f5=$row['description'];
?>
<tr>
<td><?php echo $f1 ?>
<td><?php echo $f2 ?>
<td><?php echo $f3 ?>
<td><?php echo $f4 ?>
<td><?php echo $f5 ?>
<td><?php echo "<a href='updateAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Update";?>
<td><?php echo "<a href='deleteAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Remove";?>
</td>
<?php
}
?>
</tr>
</table>
</tbody>
</table>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can make use of Data Tables
Javascript Code
$(document).ready(function() {
$('#example').dataTable();
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
//code.jquery.com/jquery-1.11.1.min.js
//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js
HTML Code
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
CSS Code -
body { font-size: 140%; }
The following CSS library files are loaded for use in this example to provide the styling of the table:
//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css
Please refer this for further details -
https://datatables.net/examples/styling/bootstrap.html

You need to use datatables, javascript plugin.
https://www.datatables.net/

Categories