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>
Related
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>
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>
I'm trying to create DataTable in CodeIgniter with data from MySql. I'm not sure how to create form on DataTable that will handle checkboxes on each row.
HTML
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Price</th>
<th>Discount</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Price</th>
<th>Discount</th>
</tr>
</tfoot>
<tbody>
<?php foreach($data as $d): ?>
<tr>
<td></td>
<td><?=$d->name?></td>
<td><?=$d->price?></td>
<td><?=$d->discount?>%</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
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/
I want to fetch records from database and display it in data tables, but when i run this PHP code in a browser, it only shows records in a simple table. I want this result in jquery data tables for searching and sorting.
javascript function for data tables (uses jquery.dataTables.js)
<script type="text/javascript" language="javascript">
$(document).ready(function() {
('#datatable').DataTable();
})
</script>
mysql function for fetching records
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("runindia",$con);
$query="select *from admin_login";
$rs=mysql_query($query,$con);
?>
<div class="container">
<table class="table table-bordered table-responsive table-hover display" id="datatable">
<thead>
<th> Admin ID</th>
<th> User Name</th>
<th> First Name</th>
<th> Last Name</th>
<th> Email</th>
</thead>
<?php
while($r=mysql_fetch_array($rs))
{ ?>
<tbody>
<tr>
<td><?php echo $r['admin_id'];?></td>
<td><?php echo $r['username'];?></td>
<td><?php echo $r['first_name'];?></td>
<td><?php echo $r['last_name'];?></td>
<td><?php echo $r['email'];?></td>
</tr>
</tbody>
<?php
} //closing while
mysql_close($con);//mysql connection close
?>
</table>
Try keeping 'tbody' out of the loop:
<table class="table table-bordered table-responsive table-hover display" id="datatable">
<thead>
<th> Admin ID</th>
<th> User Name</th>
<th> First Name</th>
<th> Last Name</th>
<th> Email</th>
</thead>
<tbody>
<?php
while($r=mysql_fetch_array($rs))
{ ?>
<tr>
<td><?php echo $r['admin_id'];?></td>
<td><?php echo $r['username'];?></td>
<td><?php echo $r['first_name'];?></td>
<td><?php echo $r['last_name'];?></td>
<td><?php echo $r['email'];?></td>
</tr>
<?php
} //closing while
mysql_close($con);//mysql connection close
?>
</tbody>
</table>
Or try something better like getting the data via an AJAX call in a JSON format
<?php
$con=mysqli_connect("localhost","root","", "runindia");
$query="select * from admin_login";
$rs=mysqli_query($con, $query);
?>
<div class="container">
<table class="table table-bordered table-responsive table-hover display" id="datatable">
<thead>
<th> Admin ID</th>
<th> User Name</th>
<th> First Name</th>
<th> Last Name</th>
<th> Email</th>
</thead>
<?php
while($r = mysqli_fetch_array($rs, MYSQLI_ASSOC))
{ ?>
<tbody>
<tr>
<td><?php echo $r['admin_id'];?></td>
<td><?php echo $r['username'];?></td>
<td><?php echo $r['first_name'];?></td>
<td><?php echo $r['last_name'];?></td>
<td><?php echo $r['email'];?></td>
</tr>
</tbody>
<?php
} //closing while
mysqli_close($con);//mysqli connection close
?>
</table>