When the table is empty, Datatables works and shows no data available ( with pages and search etc..) But when a single row is inserted, Datatables breaks.
I am getting the data to the table using PHP and has used this method in the past and worked fine.
I am assuming that since it works with empty tables, the problem is not with the linking of scripts etc.
Any help would be great, thank you.
I have tried to see if there is a problem within the HTML by correcting tags etc but I cant seem to identify the problem.
<div class="tab-pane active" id="queries">
<hr>
<table id="table1" class="table table-striped ">
<thead>
<tr class="sticky" >
<th>Date of Complaint</th>
<th>Reference</th>
<th>Name</th>
<th>Surname</th>
<th>Subject</th>
<th> </th>
</tr>
</thead>
<?php
//process $result
echo "<tbody>";
while ($row = mysqli_fetch_assoc($queriesresult2)) {
;
echo "<tr>";
echo "<td>".$row['Data1']."</td>";
echo "<td>".$row['Data2']."</td>";
echo "<td>".$row['Data3']."</td>";
echo "<td>".$row['Data4']."</td>";
echo "<td>".$row['Data5']."</td>";
echo "<td><a class=\"btn btn-danger\" href=\"editQUERY?id=".$row['id']."\">Edit</a></td>";
echo "</tr>";
}
echo "</tbody>";
?>
</table>
<hr>
</div>
I see you use bootstrap dataTables. Try this code, it should work and you will have your search bars:
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<div class="tab-pane active" id="queries">
<hr>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($queriesresult2)) { ?>
<tr>
<td><?= $row['data1'] ?></td>
<td><?= $row['data2'] ?></td>
<td><?= $row['data3'] ?></td>
<td><?= $row['data4'] ?></td>
<td><?= $row['data5'] ?></td>
<td><a class="btn btn-danger" href="editQUERY?id="<?= $row['id'] ?>">Edit</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable( {} );
} );
</script>
</body>
</html>
Related
hello i created a datatabe to to load my datas sort them and using the search functionality but it dose not work i tried it been 5 days and i am stuck here i do not know what i am missing or what i done wrong this is my codes if any one can help me i would be thankful
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tbody>
<?php
endwhile;
}
?>
</div>
</table>
these are my bootstrap and scripts that i use
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
also this is my data table code
<script type="text/javascript">
$(document).ready(function() {
$('#datas').dataTable( { "ordering": true } );
} );
</script>
the datatable is created but it does not work like the search or the sorting this is picture of what it likes
i am using bootstrap 4
You are missing <tr> both on your <thead> and <tbody>
<thead style="color:black;">
<th>Product</th>
</thead>
should be:
<thead style="color:black;">
<tr>
<th>Product</th>
<tr>
</thead>
and inside you tbody while:
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td>...</td>
</tr>
<?php endwhile; ?>
You're also closing your </tbody> on every while loop:
</tbody>
<?php
endwhile;
?>
</div> //where are you opening this div? Seems it should not be here
</table>
change to:
<?php endwhile; ?>
</tbody>
</table>
This changes should make your DataTable work as expected.
Malformed html, loops wrong, missing tr tag, etc. Should be something like this.
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tr>
?>
<?php endwhile; ?>
<?php } ?>
</tbody>
</table>
</div>
even if i cancel my confirmation the form is still submitted
what is the problem? i think my jquery is wrong pls help
my button outside the form
<li><a id="recieve_btn" href="javascript:void(0)" class="btn animated infinite pulse" onclick="if(!confirm('Are you sure?')) return false;"><span class="glyphicon glyphicon-transfer"></span> Recieve</a></li>
my form
<form id="frm-list" action="<?php echo base_url('home/recieve') ?>">
<table class="table table-condensed display dataTable dt-checkboxes-select" id="list" style="width: 100%;">
<thead>
<tr>
<th>No</th>
<th>Family Name</th>
<th>Given Name</th>
<th>Middle Initial</th>
<th>Birthdate</th>
<th>Module Enrolled</th>
<th>Action</th>
</tr>
</thead>
<tbody class="datatable">
<?php foreach ($result as $trainee): ?>
<tr>
<td><?php echo $trainee->no ?></td>
<td><?php echo $trainee->lname ?></td>
<td><?php echo $trainee->fname ?></td>
<td><?php echo $trainee->mi ?></td>
<td><?php echo $trainee->bdate ?></td>
<td><?php echo $trainee->module ?></td>
<td>
Update
</td>
</tr>
<?php endforeach ?>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Family Name</th>
<th>Given Name</th>
<th>Middle Initial</th>
<th>Birthdate</th>
<th>Module Enrolled</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</form>
my jquery for submitting the form
$(document).on('click', '#recieve_btn', function(){
$('#frm-list').trigger('submit');
});
Don't mix inline Java Script code with jQuery, try below instead:
$(document).on('click', '#recieve_btn', function() {
//$('#frm-list').trigger('submit');
if (confirm('Are you sure?')) {
console.log('confirmed');
return true;
} else {
console.log('unconfirmed');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a id="recieve_btn" href="javascript:void(0)" class="btn animated infinite pulse"><span class="glyphicon glyphicon-transfer"></span> Recieve</a></li>
Please try this code. it may help you.
$(document).on('click', '#recieve_btn', function() {
if (confirm('Are you sure?')) {
$('#frm-list').trigger('submit');
} else {
return false;
}
});
I'm new to Javascript. I'm trying to implement Ajax system in my coursework in order to update the html table without updating the whole page. My HTML table is basically the table from my database, so Ajax should update the MySQl table, but how can I refresh the actual table on webpage? Another question is can I use different .php files for each action and just call them with ajax? How can I display the forms in the message box for adding the row or should I just redirect to a new page where the will be the forms for a new row?
Here is my table:
<?php
include("audentificate.php");
include ('db.php');
$query = "SELECT * FROM Trains";
$result = mysqli_query($conn, $query);
?>
<html>
<head>
<link href = "style.css" rel = "stylesheet" type = "text/css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Departures table for workers </title>
</head>
<body>
<div class="table" align="center">
<div style = "background-color:#FFFFFF; padding:20px;"><b>Departures Table for workers</b></div>
<table border="1" align="center" width="700">
<thead>
<tr>
<th>Change row</th>
<th>ID</th>
<th>Train Company</th>
<th>Destination</th>
<th>Time</th>
<th>Platform</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<tr>
<td><input id = 'tick' type="checkbox" name="name1" /> </td>
<td><?php echo $row['id']?></td>
<td><?php echo $row['Traincompany'] ?></td>
<td><?php echo $row['Destination'] ?></td>
<td><?php echo $row['Time'] ?></td>
<td><?php echo $row['Platform'] ?></td>
<td><?php echo $row['Date'] ?></td>
</tr>
<?php endwhile ?>
</tbody>
</table>
<p class="message">Logout from userLogout
</div>
</body>
</html>
<table id="tbl" class = "table table-striped table-bordered" style="border-top:0px;">
<thead>
<tr>
<th></th>
<th><p style="text-align:center;">Answered</p></th>
<th><p style="text-align:center;">Post</p></th>
<th><p style="text-align:center;">Views</p></th>
</tr>
</thead>
<tbody>
<?php
$res = $db->viewquestion();
$ask_id= '';
foreach ($res as $key => $value) {
$ask_id = $value['iask_id'];
?>
<tr>
<td>
<div align="left" width="400">
<?php echo '<a href="askpriest?iask_title='.$value['iask_title'].'">'?>
<img src="./<?php echo $value['image']; ?>" style="border-radius:50%;float:left" width="20%" height="20%" class="pull-left">
<h5><strong class="font-1-2" style="color:#59960b;border-radius:50%;float:left"><?php echo $value['iask_title']?></strong></h5>
<br><p class="font-1-2" style="color:#000000;border-radius:50%;font-size:12px;float:left">by:<?php echo $value['firstname'].' '.$value['lastname'].' '. $value['date_send'].'<br> in '.$value['iask_topic'] ?> </p>
</a>
</div>
</td>
<td>
<?php
if($value['iask_answered']==1){
?>
<p align="center" style="padding-top:20px;"><span class="fa fa-check" style="color:#59960b;"></span></p>
<?php
}else{
?>
<p align="center" style="padding-top:20px;font-size:30px;"><span style="color:#59960b;"></span></p>
<?php
}
?>
</td>
<td>
<p class="font-1-5" style="padding-top:25px;text-align:center;" width="80"><?php echo $value['iask_post']?></p>
</td>
<td>
<p class="font-1-5" style="padding-top:25px;text-align:center;"><?php echo $value['iask_view']?> </p>
</td>
</div>
</tr>
<?php
}
?>
</tbody>
</table>
so i have this table and im trying to use the datatable js..
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" //code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tbl').DataTable();
});
</script>
but unfortunately nothing happens on the table.. i tried searching on web and they said that the and should be equal.. so i tried to count how many is the and and they are equal.. i dont have any idea how to fix this since the only answer i get was to and should be equal.. hel
Your table has the id equal with "tbl" so the code should be
$(document).ready(function() {
$('#tbl').DataTable();
});
You can use jquery data-table like:
html:
<table id="data_table">
<thead>
<tr>
<th>Emp Code</th>
<th>First Name</th>
<th>Last Name</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<!-- Dynamic Body -->
</tbody>
</table>
Jquery:
$(document).ready(function() {
var data = [];
data.push(
[1,"Sasha","Brenna","0800 1111"],
[2,"Sage","Mia","(01012) 405872"],
[3,"Chelsea","Allistair","076 0578 0265"],
[4,"Uta","Savannah","070 1247 5884"],
[5,"Remedios","Berk","0995 181 0007"],
[6,"Ruby","Wayne","0800 1111"],
[7,"Faith","Fredericka","(01709) 099879"],
[8,"Myra","Harrison","070 4241 9576"],
[9,"Drake","Miriam","0800 733635"],
[10,"Reed","Shannon","076 8597 5067"]
);
$('#data_table').DataTable( {
data: data,
});
});
Working Fiddle
I am going to be placing a value in a custom data type. I am using stripe checkout and am trying to have it so a span text content, so that I can turn that value/text into a variable.
HTML:
<!--Totals-->
<div class="col-xs-12 col-sm-6 pull-right">
<p class="lead">Amount Due <?php echo '$date'; ?> + <?php echo '$paymentdatesetting'?></p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th style="width:50%">Subtotal:</th>
<td id='subtotal'>$subtotal</td>
</tr>
<tr>
<th>Tax ($tax-country)</th>
<td><?php echo '$total-tax'; ?></td>
</tr>
<tr>
<th>Shipping:</th>
<td><?php echo '$shipping'; ?></td>
</tr>
<tr>
<th>Total:</th>
<td>$<span id='total'>100</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--/Totals-->
Ignore the php code that is mostly sudo code that is to remind me of things.
JS and stripe checkout code:
<script type="text/javascript">
var totalvalue = document.getElementById("#total").textContent="newtext";
</script>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js"
class="stripe-button"
data-key="pk_test_HwlcQ0e8VwlFkQJu46vynuPT"
data-amount= totalvalue
data-name="SeaitManageit"
data-description="Inovice"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency= invoicecurency>
</script>
</form>