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/
Related
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>
I am trying to sort the output of the echo data that i am trying to bring from mysql database. There are different rows in the table and i want to sort by one of the rows named city. But it is showing data has last in first out. The code is here:
<?=APP::getElement()->triggerMessage(); ?>
<div class="panel">
<?php include_once(APP_HTML.'sub_menu.php');
$data=$model->data['data'];
// echo"<pre>";
// print_r($data);
?>
</div>
<?php include_once('search.php'); ?>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">All County</div>
<form name="List" id="List" class="form-horizontal" role="form" method="post" action="<?php echo $base_url.'delete';?>">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th><input type="checkbox" id="checkAll" name="checkAll" class="selectAll" /></th>
<th>County Name</th>
<!--<th> Parent County</th>
<th> County Status</th>-->
<!--<th> Product Type</th>
<th> Model No.</th>
<th> Image</th>
<th> Description</th>-->
<!-- <th>Country Name</th> -->
<th>Added Date</th>
<th>Updated Date</th>
<!-- <th>Weightage</th> -->
<th>Status</th>
<th width="12%">Action</th>
</tr>
</thead>
<tbody>
<?php
$pagination=$model->data['pagination'];
foreach($data as $row){
// echo $row['project_name'];
?>
<tr>
<td><input type="checkbox" id="id" name="id[]" class="checkID" value="<?php echo $row['id']; ?>"/></td>
<td><?php echo $row['city'] ?></td>
<td><?php echo $row['added_date']; ?></td>
<td><?php echo $update = empty($row['updated_date'])?'N/A':$row['updated_date']; ?></td>
<td><?php echo APP::getElement()->getStatus($row['status']); ?></td>
<td>
<?php $fields=array('update','delete','status'); ?>
<?=APP::getElement()->getActionButton($fields,$row);?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</form>
</div>
<?php echo $pagination; ?>
please help.
Try to put ORDER BY in your SQL query.
Documentation
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>
Hi i want to implement DataTable in the table to populate data from my db in my php page, the below code i used, but its not working, not getting the data table, instead i am getting the normal table only -
<head>
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.7/media/css/jquery.dataTables.min.css">
<script src="../DataTables-1.10.7/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.7/extensions/Responsive/css/dataTables.responsive.css">
<script src="../DataTables-1.10.7/extensions/Responsive/js/dataTables.responsive.js" type="text/javascript"></script>
</head>
<div id="example_wrapper" class="dataTables_wrapper" role="grid">
<div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">
<?php
$sql="select product_id,product_name,original_price,offer_price,product_rating,image_main,stock_in_hand from niad_products order by product_id desc";
$result=$linkID1->query($sql);
$c=#mysqli_num_rows($result);
if($c>=1){?>
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
<div id="printable">
<table id="example" class="display" cellspacing="0" width="100%" style="color:#FFF">
<thead>
<tr>
<th>Image</th>
<th>Product Name</th>
<th>Original Price</th>
<th>Offer Price</th>
<th>Rating</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<?php while($row=mysqli_fetch_array($result)){?>
<tr>
<td>
<?php echo "<img width='100' height='100' src=../product-images/".$row['image_main'] ." />"; ?></td>
<td>
<?php echo $row['product_name']; ?>
</td>
<td>
<?php echo $row['original_price']; ?>
</td>
<td>
<?php echo $row['offer_price']; ?>
</td>
<td>
<?php echo $row['product_rating']; ?>
</td>
<td>
<?php echo $row['stock_in_hand']; ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<?php } else {echo "No records";} ?>
</div>
</div>
Can anyone guide me with my mistake. It will be very helpful. Thanks
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