I have a problem with datatables jquery. My dashboard footer is not fit to datatables when the page first load a lot of data (paggging).
Here's the screenshot:
Click for screenshot
After i try to open inspect element, or try to zoom out/in the page, the footer will automatically fit.
The footer should be like this:
Click for screenshot 2
Video record: https://drive.google.com/file/d/1vSjzqGuknJhl_jPtnZTdf5mNYTNlvBmf/view?usp=drivesdk
Thanks before.
My datatables code:
<table id="datatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Nama Trainset</th>
<th>Status Aktif</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
foreach ($trainset_data as $trainset)
{
?>
<tr>
<td align="center" width="80px"><?php echo ++$start ?></td>
<td align="center" ><?php echo $trainset->nm_trainset ?></td>
<td align="center" ><?php echo $trainset->aktif ?></td>
<td style="text-align:center" width="200px">
<?php
echo anchor(site_url('trainset/update/'.$trainset->id_trainset),'Perbarui');
echo ' | ';
echo anchor(site_url('trainset/delete/'.$trainset->id_trainset),'Hapus','onclick="javasciprt: return confirm(\'Apakah Anda yakin akan menghapus data ini?\')"');
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Related
Help needed!
I have done coding using php mvc technique, using wamp server and tried using datatables(only for search functionality).
I have a table display in my Admin index page which fetches data from mysql database. I also have checkbox included at each row so that it can be selected and deleted.
...
<form action="<?php echo URLROOT; ?>/posts" method="post">
<button type="submit" value="Delete" name="delete_multiple_data">Delete Multiple Items</button>
<table id="mtab" class="display table table-striped table-bordered dt-responsive nowrap" style="width:100%">
<thead class="thead-dark">
<tr class="danger">
<tr class="danger">
<th scope="col">ID</th>
<th scope="col">Pack Name</th>
<th scope="col">Select</th>
</tr>
</thead>
<tbody>
<?php foreach($data['posts'] as $post) : ?>
<tr>
<td><?php echo $post->id; ?></td>
<td><?php echo $post->pckname; ?></td>
<td><input type="checkbox" name="delete[]" value="<?php echo $post->id; ?>"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</form>
...
my controller,
...
if(isset($_POST['delete_multiple_data'])){
if(isset($_POST['delete'])){
foreach($_POST['delete'] as $deleteid){
$deletepack = $this->postModel->deletePost($deleteid);
}
}
}
$this->view('posts/index', $data);
...
without table id="mtab"(removing table id="mtab") everything is working fine.
but for search to be enabled in my table id="mtab" i used the below script,
...
<script type="text/javascript">
$(document).ready(function(){
$("#mtab").DataTable({
});
});
</script>
...
if i use this script, it hides my checkboxes totally from display, please help
I have identified the error it was <table class="display table table-striped table-bordered dt-responsive nowrap" style="width:100%">
after I removed nowrap it was working fine, both my checkbox as well as search feature was visible.
Thanks all.....
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>
Heres my code: HTML with Server side to get data from the database. How do I get id from the datatables using checkbox option?
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<h4>
<th></th> <!-- For checkbox column-->
<th>ID Number</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Middlename</th>
<th>Gender</th>
<th>Course</th>
<th>Department</th>
<th>Address</th>
<th>Contact</th>
<th>Birthdate</th>
<th>View</th>
<th>Events</th>
</h4>
</tr>
</thead>
<tbody>
<?php
include 'pgconnect.php';
$mydata = mysqli_query($conn,"SELECT * FROM student") or die(mysql_error());
while($record = mysqli_fetch_assoc($mydata))
{
$id=$record['id'];
?>
<tr>
<td><input type="checkbox"></td>
<td class="id"><?php echo $record['id'] ?></td>
<td class="lname"><?php echo $record['last_name'] ?></td>
<td class="fname"><?php echo $record['first_name'] ?></td>
<td class="mname"><?php echo $record['mid_name'] ?></td>
<td class="sex"><?php echo $record['gender'] ?></td>
<td class="course"><?php echo $record['course'] ?></td>
<td class="dept"><?php echo $record['department'] ?></td>
<td class="add"><?php echo $record['home_address'] ?></td>
<td class="contact"><?php echo $record['contact'] ?></td>
<td class="bdate"><?php echo $record['birthdate'] ?></td>
<td> View Records </td>
<td> <a title='Click here to update record.'href='#edit' data-toggle='modal'><i class="fa fa-pencil fa-fw"></i></a>
<a title='Click here to add record.' href='#'><i class="fa fa-plus fa-fw"></i></a>
<a title='Click here to delete record.' href='delete.php?del=<?php echo $record['id'] ?>'><i class="fa fa-trash-o fa-fw"></i></a></td>
</tr>
<?php
}
?>
</tbody>
</table>
Here's my script:
$(document).ready(function(){
$('#dataTables-example').dataTable();
});
I tried to get the ID but still it didn't works. Hope you can help me.
In your work, you get the ID in table. your should grab it from the checkbox if you use jquery, as in;
<script>
$(document).ready(function(){
document.getElementByID("ckmyid").innerHTML;
});
</script>
Note:add Selector ID in your checkbox, first, say, "ckmyid" so the code will be like this:
<input id="ckmyid" type="checkbox" value="<?php echo $record['id'] ?>">
Based on your structure, you can grab it directly from the link in your view records link if you want to place the ID there,as in;
<td> View Records </td>
I am fetch data from table insdie php script and displaying in table. This php script is called by button click event.
Here is the php code which does this:
while ($row = #mysqli_fetch_array($result))
{
echo '<div class = "c2">
<table class="table table-condensed">
<tbody>
<tr class="active">
<td class="active"></td>
<td class="active">'.$row['date'].'</td>
<td class="success">'.$row['time'].'</td>
<td class="warning">'.$row['username'].'</td>
<td class="danger">'.$row['user_follower_count'].'</td>
<td class="info">'.$constant.'</td>
<td class="active">'.$row['tweet_text'].'</td>
<td class="success">...dfd</td>
</tr>
</tbody>
</div>
';
}
However the content display looks messed.
I have used bootstrap css here
Like
How can I display so that all rows appears with same width in proper manner?
Content is displayed when button is clicked.
Try this:
echo '<div class="c2"><table class="table table-condensed"><tbody>';
while ($row = #mysqli_fetch_array($result))
{
echo '<tr class="active">
<td class="active"></td>
<td class="active">'.$row['date'].'</td>
<td class="success">'.$row['time'].'</td>
<td class="warning">'.$row['username'].'</td>
<td class="danger">'.$row['user_follower_count'].'</td>
<td class="info">'.$constant.'</td>
<td class="active">'.$row['tweet_text'].'</td>
<td class="success">...dfd</td>
</tr>';
}
echo '</tbody></table></div>';
My trying to show product desc in pop up. Mean when i click on product link then one pop up will open and show product desc. but here something is wrong. every product link showing first product desc. My code is Below. Please help me out.
Javascript:
<script language="JavaScript">
function displayPopup(alert_MSG)
{
var theDetail = document.getElementById('flyBox');
theDetail.style.display="block";
}
function closePopup(alert_MSG)
{
var theDetail = document.getElementById('flyBox');
if (theDetail.style.display=="block")
{
theDetail.style.display="none";
}
}
</script>
HTML:
View larger
<div id="flyBox" style="display:none;">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="borderWindow">
<div class="container">
<div id="closeButton"><img src="http://i1122.photobucket.com/albums/l523/Long_Islander/flyBoxClose.png" width="28" height="28" alt="Close Button" border="0" /></div>
<div class="content">
<table width="600" border="0" cellspacing="20" cellpadding="0">
<tr>
<td>
<div id="myMessageBox" name="myMessageBox">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td class="colheadingL"><font color="white">Description</font></td>
</tr>
<tr>
<td ><?php echo $img; ?></td>
<td>Book Name:</td>
<td ><?php echo $row['pname']; ?></td>
<td class="text1">MRP:</td>
<td><?php echo $row['price'];?> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
But pop up is open click on hyperlink. but problem is showing only 1'st record in all product
You don't have loop any in your template script, that is why you see just one record vizualized.
I don't know exactly how your code is organized outside of the snippet you have posted, but assuming your data rows are in $rows array variable, the code will look something like that:
<? foreach($rows as $row) { ?>
<tr>
<td ><?php echo $img; ?></td>
<td>Book Name:</td>
<td ><?php echo $row['pname']; ?></td>
<td class="text1">MRP:</td>
<td><?php echo $row['price'];?> </td>
</tr>
<? } ?>
Try to make IDs of each DIV as Unique.
Below is the sample code, try to use it as per your requirement
<script language="JavaScript">
function displayPopup(id)
{
var theDetail = document.getElementById(id);
theDetail.style.display="block";
}
function closePopup(id)
{
var theDetail = document.getElementById(id);
if (theDetail.style.display=="block")
{
theDetail.style.display="none";
}
}
</script>
<?php for($i=0;$i<4;$i++){?>
<div>
View larger
<div id="flyBox_<?php echo $i;?>" style="display:none;">
<div id="closeButton"><img src="http://i1122.photobucket.com/albums/l523/Long_Islander/flyBoxClose.png" width="28" height="28" alt="Close Button" border="0" /></div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<?php echo "Div ".$i. " Content comes here";?>
</td>
</tr>
</table>
</div>
</div>
<?php }?>