Is there any way to filter my dynamic table using two dropdown? As for now, I only able to filter using only one dropdown. I cannot seem to find the right way so I'm gonna post my original code that successfully filter using one dropdown (because there are too many error in the latest code using two filter). Hope you can give me suggestions on how to solve this.
view.php
<?php
require "../model/model.php";
$month=$_GET['month'];
$sys = getSys(1)->fetch_assoc();
?>
<body>
<div class="row">
<table border="0">
<tr><td>
<select required class="form-control" name="month" id="month">
<option value="">-- Choose Month--</option>
<? echo getDropDownMonth($month) ;?>
</select>
</td></tr>
</table>
<table width="100%" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th width="5%">No.</th>
<th width="20%">Date</th>
<th width="20%">Stock Code</th>
<th width="20%">Price(RM)/KG</th>
<th width="20%">QUANTITY(KG)</th>
<th width="20%">TOTAL(RM)</th>
</tr>
</thead>
<?
$i=1;
$raw = getRawMaterialListCode($month);
while($list_raw_material = $raw->fetch_assoc()) {
?>
<tr class="odd gradeX">
<td><?php echo $i; ?></td>
<td><?php echo $list_raw_material['date_received']; ?></td>
<td><?php echo $list_raw_material['stock_code'].' - '.$list_raw_material['stock_name']; ?></td>
<td><?php echo $list_raw_material['raw_price']; ?></td>
<td><?php echo $list_raw_material['in_per_kg']; ?></td>
<td><?php echo $list_raw_material['total_price']; ?></td>
</tr>
<?php $i++; } ?>
</table>
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
$("#month").change(function(){
var selected_month=$(this).val();
sendType(selected_month);
});
});
function sendType(type)
{
window.location.href="view.php?month="+type;
}
</script>
</body>
model.php
function getRawMaterialListCode($month) {
$conn=db();
$sql = "
SELECT a.*
, c.stock_code
, c.stock_name
FROM avsb_raw_material a
LEFT
JOIN avsb_stock c
ON a.stock_code = c.stock_code
WHERE MONTH(a.date_received) = '$month'
ORDER
BY a.date_received
";
$result = $conn->query($sql);
return $result;
}
Supposedly I'm trying to add second dropdown as filter here:
<div class="row">
<table border="0">
<tr><td>
<select required class="form-control" name="month" id="month">
<option value="">-- Choose Month--</option>
<? echo getDropDownMonth($month) ;?>
</select>
**<select required class="form-control" name="stock_code" id="stock_code">
<option value="">-- Choose Stock--</option>
<? echo getDropDownStock($stock_code) ;?>
</select>**
</td></tr>
</table>
and the new model.php
function getRawMaterialListCode($month,$stock_code) {
$conn=db();
$sql = "
SELECT a.*
, c.stock_code
, c.stock_name
FROM avsb_raw_material a
LEFT
JOIN avsb_stock c
ON a.stock_code = c.stock_code
WHERE MONTH(a.date_received) = '$month'
AND a.stock_code = '$stock_code'
ORDER
BY a.date_received
";
$result = $conn->query($sql);
return $result;
}
Thanks in advance.
EDIT: These code are the closest one I try that did not have any error but the data still not display when filtering using two dropdown.
The url that i get :
http://localhost/stockcontrolsystem/view/view.php?month=10&stock_code=[object%20HTMLSelectElement]
view:
<?
$i=1;
$raw = getRawMaterialListCode($stock_code,$month);
while($list_raw_material = $raw->fetch_assoc()) {
?>
function:
$(document).ready(function() {
$("#month").change(function(){
var selected_month=$(this).val();
reloadMonth(selected_month);
});
$("#stock_code").change(function(){
if($("#month").val()==''){
alert('SELECT MONTH!');
$("#stock_code").val('');
}else{
var selected_stock=$(this).val();
var month = $("#month").val();
reloadStock(selected_stock,month);}
});
});
function reloadMonth(month){
//console.log(month);
location.href = "view.php?month="+month;
}
function reloadStock(selected_stock,month){
//console.log(obj);
location.href = "view.php?month="+month+"&stock_code="+stock_code;
}
ANSWERED! I try inserting what i found here and there and I finally SOLVED it.
$(document).ready(function() {
$("#month").change(function(){
var selected_month=$(this).val();
reloadMonth(selected_month);
});
$("#stock_code").change(function(){
if($("#month").val()==''){
alert('SELECT MONTH!');
$("#stock_code").val('');
}else{
var selected_stock=$(this).val();
var month = $("#month").val();
reloadStock(selected_stock,month);}
});
});
function reloadMonth(month){
//console.log(month);
location.href = "view.php?month="+month;
}
function reloadStock(selected_stock,month){
//console.log(obj);
location.href = "view.php?month="+month+"&stock_code="+selected_stock;
}
Related
I want to filter data in the html table based on 3 dropdown list values (standort, status and infrastructure). --> ddlStandort, ddlStatus, ddlInfrastruktur
My below code is not working, I don't know why.....
JavaScript
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ddlStandort,#ddlStatus,#ddlInfrastruktur").on("change", function () {
var standort = $('#ddlStandort').find("option:selected").val();
var status = $('#ddlStatus').find("option:selected").val();
var infrastructure = $('#ddlInfrastruktur').find("option:selected").val();
SearchData(standort, status, infrastructure)
});
});
function SearchData(standort, status, infrastructure) {
if (standort.toUpperCase() == 'All' && status.toUpperCase() == 'All' && infrastructure.toUpperCase() == 'All') {
$('#table11 tbody tr').show();
} else {
$('#table11 tbody tr:has(td)').each(function () {
var rowStandort = $.trim($(this).find('td:eq(9)').text());
var rowStatus = $.trim($(this).find('td:eq(5)').text());
var rowInfrastructure = $.trim($(this).find('td:eq(10)').text());
if (standort.toUpperCase() != 'All' && status.toUpperCase() != 'All' && infrastructure.toUpperCase() != 'ALL') {
if (rowStandort.toUpperCase() == standort.toUpperCase() && rowStatus == status && rowInfrastructure == infrastructure) {
$(this).show();
} else {
$(this).hide();
}
} else if ($(this).find('td:eq(9)').text() != '' || $(this).find('td:eq(5)').text() != '' || $(this).find('td:eq(10)').text() != '') {
if (standort != 'All') {
if (rowStandort.toUpperCase() == standort.toUpperCase()) {
$(this).show();
} else {
$(this).hide();
}
}
if (status != 'All') {
if (rowStatus == status) {
$(this).show();
}
else {
$(this).hide();
}
}
if (infrastructure != 'All') {
if (rowInfrastructure == infrastructure) {
$(this).show();
}
else {
$(this).hide();
}
}
}
});
}
}
</script>
HTML/PHP
<?php
require("db_conn.php");
$sql = "SELECT * FROM `dspia_ip_state` ORDER BY state_id";
$all_states = mysqli_query($conn,$sql);
?>
<select id="ddlStatus" name="ddlStatus"><br>
<option value="All">Status</option>
<?php
while ($state = mysqli_fetch_array(
$all_states,MYSQLI_ASSOC)):;
?>
<option value="<?php echo $state["state"];
?>">
<?php echo $state["state"];
?>
</option>
<?php
endwhile;
?>
</select>
<?php
require("db_conn.php");
$sql = "SELECT * FROM `dspia_location` ORDER BY location_id";
$all_location = mysqli_query($conn,$sql);
?>
<select id="ddlStandort" name="ddlStandort">
<option value="All">Standort</option>
<?php
while ($location = mysqli_fetch_array(
$all_location,MYSQLI_ASSOC)):;
?>
<option value="<?php echo $location["location"];
?>">
<?php echo $location["location"];
?>
</option>
<?php
endwhile;
?>
</select>
<?php
require("db_conn.php");
$sql = "SELECT * FROM `dspia_infrastructure` ORDER BY infrastructure_id";
$all_infrastructure = mysqli_query($conn,$sql);
?>
<select id="ddlInfrastruktur" name="ddlInfrastruktur">
<option value="All">Infrastruktur</option>
<?php
while ($infrastructure = mysqli_fetch_array(
$all_infrastructure,MYSQLI_ASSOC)):;
?>
<option value="<?php echo $infrastructure["infrastructure"];
?>">
<?php echo $infrastructure["infrastructure"];
?>
</option>
<?php
endwhile;
?>
</select>
the table data is selected from a database
Whole Code
<body>
<div class="row header">
<img id="drv" src="img/neueip/logo_drv_berlin-brandenburg_web.jpg">
<div class= "header-text">
<h2>IP-Adressverwaltung</h2>
</div>
<div class= "header-line">
<h1>|</h1>
</div>
<div class="col-50 rechts">
<?php
if($_SESSION['is_admin'] =='1'){
?>
<div class="verwaltung">
<button class="dropbtn"><b>Verwaltung</b></button>
<div class="dropdown-content">
IP-Adresse
Benutzer
Status
Standort
Betriebssystem
Infrastruktur
</div>
</div>
<?php
}
?>
<img src="img/home/logout.png" class="logout">
<div class= "user">
<h3>| Benutzer: <?php print_r($_SESSION['login_name']); ?> |</h3>
</div>
</div>
<!--
<div class="gesamtPapierkorb">
<img src="img/home/gesamtPapierkorb.png">
</div>
-->
</div>
<div class="reload">
<img src="img/home/refresh.png">
</div>
<div class="filtern">
<?php
$sql = "SELECT * FROM `dspia_ip_state` ORDER BY state_id";
$all_states = mysqli_query($conn,$sql);
?>
<select id="ddlStatus" name="ddlStatus"><br>
<option value="All">Status</option>
<?php
while ($state = mysqli_fetch_array(
$all_states,MYSQLI_ASSOC)):;
?>
<option value="<?php echo $state["state"];
?>">
<?php echo $state["state"];
?>
</option>
<?php
endwhile;
?>
</select>
<?php
$sql = "SELECT * FROM `dspia_location` ORDER BY location_id";
$all_location = mysqli_query($conn,$sql);
?>
<select id="ddlStandort" name="ddlStandort">
<option value="All">Standort</option>
<?php
while ($location = mysqli_fetch_array(
$all_location,MYSQLI_ASSOC)):;
?>
<option value="<?php echo $location["location"];
?>">
<?php echo $location["location"];
?>
</option>
<?php
endwhile;
?>
</select>
<?php
$sql = "SELECT * FROM `dspia_infrastructure` ORDER BY infrastructure_id";
$all_infrastructure = mysqli_query($conn,$sql);
?>
<select id="ddlInfrastruktur" name="ddlInfrastruktur">
<option value="All">Infrastruktur</option>
<?php
while ($infrastructure = mysqli_fetch_array(
$all_infrastructure,MYSQLI_ASSOC)):;
?>
<option value="<?php echo $infrastructure["infrastructure"];
?>">
<?php echo $infrastructure["infrastructure"];
?>
</option>
<?php
endwhile;
?>
</select>
</div>
<input type="text" id="suchleiste" onkeyup="myFunction()" placeholder="Suchen...">
</div>
<div class="IPbutton">
<form action="newip.php" method="post">
<button class="IP" type="submit"><b>+ Neue IP-Adresse</b></button>
</form>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="tabelle">
<div style="overflow-x:auto;">
<table id=table11>
<tr>
<th></th>
<th onclick="sortID()">ID</th>
<th onclick="sortTable(1)">IP-Adresse ↕</th>
<th onclick="sortTable(2)">Hostname ↕</th>
<th onclick="sortTable(3)">MAC-Adresse ↕</th>
<th onclick="sortTable(4)">PW_Neu ↕</th>
<th onclick="sortTable(5)">Status ↕</th>
<th onclick="sortTable(6)">Beschreibung ↕</th>
<th onclick="sortTable(7)">Betriebssystem ↕</th>
<th onclick="sortTable(8)">Admin ↕</th>
<th onclick="sortTable(9)">Standort ↕</th>
<th onclick="sortTable(10)">Infrastruktur ↕</th>
<th onclick="sortTable(11)">Workorder ↕</th>
<th onclick="sortTable(12)">Anmerkungen ↕</th>
</tr>
<?php
if(isset($_GET["del"])){
if(!empty($_GET["del"])){
$main_id = $_GET["del"];
$stmt = $conn->prepare("DELETE FROM dspia_main WHERE main_id = '".$main_id."'");
if($stmt->execute()){
?>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>
<?php
print "Die IP-Adresse wurde gelöscht.";
?>
</strong>
</div>
<?php
}else{
print $conn->error;
}
}
}
$sql = "SELECT * FROM v_dspia_main";
$result = mysqli_query($conn, $sql);
while($dsatz = mysqli_fetch_assoc($result)){
?>
<tbody id="myTable">
<tr>
<th><img src="img/home/stift.png" class="Stift" width="auto" height="30"><a href="home.php?del=<?php echo $dsatz["main_id"] ?>"onclick='return confirmSubmit()'><img src="img/home/mülleimer.png" class="Mülleimer" width="auto" height="33" class="Mülleimer"></th>
<td><?php echo $dsatz["main_id"] ?></td>
<td><?php echo $dsatz["ip_v4"] ?></td>
<td><?php echo $dsatz["hostname"] ?></td>
<td><?php echo $dsatz["mac_address"] ?></td>
<td><?php if($dsatz["pw_new"] == "1") {
echo "Ja";
}else if($dsatz["pw_new"] == "0"){
echo "Nein";
} ?></td>
<td><?php echo $dsatz["state"] ?></td>
<td><?php echo $dsatz["description"] ?></td>
<td><?php echo $dsatz["op_system"] ?></td>
<td><?php echo $dsatz["operator"] ?></td>
<td><?php echo $dsatz["location"] ?></td>
<td><?php echo $dsatz["infrastructure"] ?></td>
<td><?php echo $dsatz["workorder"] ?></td>
<td><?php echo $dsatz["remarks"] ?></td>
</tr>
<?php
}
?>
<colgroup>
<col width="5%">
</colgroup>
</tbody>
</table>
</div>
</div>
Tables =
main_dspia (main table)
v_main_dspia (view to show the table on website)
dspia_ip_state (for the Dropdown state)
dspia_location (for the Dropdown location)
dspia_infrastructure (for the Dropdown infrastructure)
Table with DropDown Filter and Content
dspia_infrastructure
dspia_ip_state
dspia_location
dspia_op_system
dspia_user
Your Javascript code works fine. There is something wrong with your data in php/html.
Check the following example:
<select id="ddlStandort">
<option value="All">All</option>
<option value="TestValue1">TestValue1</option>
<option value="TestValue2">TestValue2</option>
</select>
<br>
<select id="ddlStatus">
<option value="All">All</option>
<option value="Pending">Pending</option>
<option value="Sent">Sent</option>
</select>
<br>
<select id="ddlInfrastruktur">
<option value="All">All</option>
<option value="Cars">Cars</option>
<option value="Motorcycles">Motorcycles</option>
</select>
<br>
<table id="table11">
<thead>
<tr>
<th>Entry Code</th>
<th>--------</th>
<th>--------</th>
<th>--------</th>
<th>--------</th>
<th>Status</th>
<th>--------</th>
<th>--------</th>
<th>--------</th>
<th>Standort</th>
<th>Infrastruktur</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Pending</td>
<td></td>
<td></td>
<td></td>
<td>TestValue1</td>
<td>Cars</td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Sent</td>
<td></td>
<td></td>
<td></td>
<td>TestValue2</td>
<td>Motorcycles</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ddlStandort,#ddlStatus,#ddlInfrastruktur").on("change", function () {
var standort = $('#ddlStandort').find("option:selected").val();
var status = $('#ddlStatus').find("option:selected").val();
var infrastructure = $('#ddlInfrastruktur').find("option:selected").val();
SearchData(standort, status, infrastructure)
});
});
function SearchData(standort, status, infrastructure) {
if (standort.toUpperCase() == 'All' && status.toUpperCase() == 'All' && infrastructure.toUpperCase() == 'All') {
$('#table11 tbody tr').show();
} else {
$('#table11 tbody tr:has(td)').each(function () {
var rowStandort = $.trim($(this).find('td:eq(9)').text());
var rowStatus = $.trim($(this).find('td:eq(5)').text());
var rowInfrastructure = $.trim($(this).find('td:eq(10)').text());
if (standort.toUpperCase() != 'All' && status.toUpperCase() != 'All' && infrastructure.toUpperCase() != 'ALL') {
if (rowStandort.toUpperCase() == standort.toUpperCase() && rowStatus == status && rowInfrastructure == infrastructure) {
$(this).show();
} else {
$(this).hide();
}
} else if ($(this).find('td:eq(9)').text() != '' || $(this).find('td:eq(5)').text() != '' || $(this).find('td:eq(10)').text() != '') {
if (standort != 'All') {
if (rowStandort.toUpperCase() == standort.toUpperCase()) {
$(this).show();
} else {
$(this).hide();
}
}
if (status != 'All') {
if (rowStatus == status) {
$(this).show();
}
else {
$(this).hide();
}
}
if (infrastructure != 'All') {
if (rowInfrastructure == infrastructure) {
$(this).show();
}
else {
$(this).hide();
}
}
}
});
}
}
</script>
First, is not needed to include the db.connection file each time you execute a query, it's suficient to add it at the top file and to prevent duplicate db connection.
i recommend this syntax require_once("db_conn.php");
for your issue it's possible to do it in 2 ways:
method 01
add a filter form with get method and use the $_GET request in your php code
Filter Form
<form method="get">
<select name="filter-1" onchange="this.form.submit()">
<option value="f1-v1">F1V1</option>
<option value="f1-v2">F1V2</option>
<option value="f1-v3">F1V3</option>
</select>
<select name="filter-2" onchange="this.form.submit()">
<option value="f2-v1">F2V1</option>
<option value="f2-v2">F2V2</option>
<option value="f2-v3">F2V3</option>
</select>
<select name="filter-3" onchange="this.form.submit()">
<option value="f3-v1">F3V1</option>
<option value="f3-v2">F3V2</option>
<option value="f3-v3">F3V3</option>
</select>
this mean when one of the selectbox changes the form will be submitted and the url will be changed
https://exemple.com/page.php?filer-1=value&filer-2=value&filter-3=value
PHP Code
<?php
require_once("db_conn.php");
if(isset($_GET['filter-1']) && isset($_GET['filter-2']) && isset($_GET['filter-3']) ) {
$fetchData = $conn->query("SELECT * FROM table WHERE col1 = '".$_GET['filter-1']."' && col2 = '".$_GET['filter-2']."' && col3 = '".$_GET['filter-3']."' ");
}
else {
$fetchData = $conn->query("SELECT * FROM table ");
}
echo '<table>';
foreach($fetchData as $row) {
echo '<tr>';
echo '<td>$row['col1']</td>'; //Filter 1 Value
echo '<td>$row['col2']</td>'; //Filter 2 Value
echo '<td>$row['col3']</td>'; //Filter 3 Value
echo '</tr>';
}
echo '</table>';
?>
This is a simple example
Methode 02
use jquery + ajax to update the table data on filter form select change
I hope that this will help you to solve your problem or at least give you an idea on how to solve it
Good luck
I'm trying to fetch the result based on the user's selection in the select element. All it shows are just the product_price1 when I try to select the other price range, the product price will not be able to change according to my selection. It will only show the first price of the product. I did place the id of each element in the correct way but it still not be able to work properly.
But i do not know where is the mistake i made, it just can't seems to fetch the correct result. Here are my codes:
<table class="table">
<thead class="text-primary">
<th style=" position: sticky;top: 0; background: white";>
Product
</th>
<th style=" position: sticky;top: 0; background: white";>
Name
</th>
<th style=" position: sticky;top: 0; background: white";>
Avaliable Stock
</th>
<th style=" position: sticky;top: 0; background: white";>
Item Price(RM)
</th>
<th style=" position: sticky;top: 0; background: white";>
Insert Product Quantity
</th>
</thead>
<tbody id="products">
<?php
$product_id = $_REQUEST['id'];
$ids = explode(",",$product_id);
$ids = array_splice($ids, 0);
foreach($ids as $product_id){
$sql = "SELECT *, products.id as product_id FROM products
LEFT JOIN sellers ON products.seller_id = sellers.id
WHERE products.id = '".$product_id."'
ORDER BY product_created DESC ";
$query = $conn->query($sql);
{
while ($row = $query->fetch_assoc()) {
$max = $row['product_stock'];
?>
<tr>
<td>
<?php echo $row['product_title']; ?>
</td>
<td>
<?php echo $row['product_stock']; ?> <?php echo $row['product_unit']; ?>
</td>
<td>
<div class="col-md-6">
<input type="number" name="cart_qty" step=".01" class="form-control text-center" required>
</div>
</td>
<td>
<select name="price_range" id="price_range" class="form-control">
<option value="price_range1" selected><?php echo $row['weight_range1']; ?> <?php echo $row['product_unit']; ?></option>
<option value="price_range2"> <?php echo $row['weight_range2']; ?><?php echo $row['product_unit']; ?></option>
<option value="price_range3"><?php echo $row['weight_range3']; ?><?php echo $row['product_unit']; ?></option>
<option value="price_range4"><?php echo $row['weight_range4']; ?> <?php echo $row['product_unit']; ?></option>
</select>
</td>
<td>
<div class="col-12 my-auto">RM
<span id="product_price">
<input type="hidden" name="cart_price" value="<?php echo $row['product_price1']; ?>">
<?php echo $row['product_price1']; ?>
</span>/<?php echo $row['product_unit']; ?>
</td>
</tr>
</div>
</div>
<?php
}
}
}
?>
</tbody>
</table>
I use AJAX method to POST the selection result, here are the codes
<script>
$(document).ready(function() {
$('#price_range').on('change', function() {
var product_id = <?php echo $product_id ?>;
var price_range = this.value;
$.ajax({
url: "includes/fetch-price.php",
type: "POST",
data: {
product_id: product_id,
price_range: price_range
},
cache: false,
success: function(result){
$("#product_price").html(result);
// console.log(price_range);
}
});
});
});
</script>
Here is my fetch-price.php
<?php
require_once "../session.php";
$product_id = $_POST["product_id"];
$price_range = $_POST["price_range"];
$sql = mysqli_query($conn,"SELECT * FROM products where id = '$product_id' ");
$scrow = mysqli_fetch_array($sql);
if($price_range == 'price_range1')
{
echo '<input type="hidden" name="cart_price" value="'.$scrow['product_price1'].'">', $scrow['product_price1'];
}
else if($price_range == 'price_range2')
{
echo '<input type="hidden" name="cart_price" value="'.$scrow['product_price2'].'">', $scrow['product_price2'];
}
else if($price_range == 'price_range3')
{
echo '<input type="hidden" name="cart_price" value="'.$scrow['product_price3'].'">', $scrow['product_price3'];
}
else if($price_range == 'price_range4')
{
echo '<input type="hidden" name="cart_price" value="'.$scrow['product_price4'].'">',$scrow['product_price4'];
}
?>
While observing your code I can see that you have set
<select name="price_range" id="price_range" class="form-control">
inside the while and the real problem here is you have set
id="price_range"
and moving to you JS, in that you have set on change event on price_range
$('#price_range').on('change', function() {
and that selector while trace the id type (#), so as per JS rule in a page there should be unique selector otherwise the DOM events will act funny.
So now solution to your problem.
try to set
class="price_range"
instead of
id="price_range"
and than in your JS set
$('.price_range').on('change', function() {
instead of
$('#price_range').on('change', function() {
I'm sure you will get the desired output :)
I am looking for a tutorial on pagination that only associates with the dependent drop list. In other words, If I made a selection from a dependent drop list with items, {Beavers, Cubs, Scouts, Venturers, Rovers and Leaders}. It will display the associated records and I was able to do that with ajax. However, some of those items have more than 100 records, and I would like to add pagination based on what was selected and can only find the tutorial that has drop list based of total number of record, example {50, 100, 250, 500, 5000 etc}
I have been searching using,
pagination based on the result from a dependent drop list ,
dependent drop list with pagination,
dynamic pagination with a drop list etc
with PHP, MySQL, js and ajax with no success. I am fairly new with this and a tutorial will help me understand better, Can anyone tell me what to look for? thanks
code for AdminPanelFrontEnd.php
<?php
require_once('includes/header.php');
require_once('includes/connection.php');
if(isset($_SESSION['admin']))
{
$query = "SELECT * FROM members";
$result = mysqli_query($con, $query);
}
else
{
header("location:AdminPanelFrontEnd.php");
}
?>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
function load_data(SectionID)
{
$.ajax({
type: "POST",
url: "AdminPanelBackEnd.php",
data: 'SectionID=' + SectionID,
success: function(data){
$("#details").html(data);
}
});
}
</script>
<div class="card-body">
<table class="table table-striped bg-info text-white" id="details" >
<tr>
Add Member
<div class="form-inline float-left ml-1">
<select class="form-control mb-2" id="section" onChange="load_data(this.value);">
<option value="null">Select Section</option>
<?php
$query = "SELECT * FROM sections ";
$result = mysqli_query($con, $query);
while($row=mysqli_fetch_assoc($result))
{
?>
<option value = "<?php echo $row["SectionID"]; ?>"> <?php echo $row["SectionName"]; ?> </option>
<?php
}
?>
</select>
</div>
</tr>
<tr class="bg-info text-white">
<td>Member Name</td>
<td>Member Email</td>
<td>Member Contact</td>
</tr>
</table>
</div>
code for AdminPanelBackEnd.php
<?php
require_once('includes/connection.php');
$query = "SELECT * FROM sections, members WHERE
sections.SectionID ='".$_POST["SectionID"]."' AND
sections.SectionID = members.SectionID ORDER BY MemberName
";
$result = mysqli_query($con, $query);
?>
<table class="text-center bg-info text-white">
<tr>
<td>Member Name</td>
<td>Member Email</td>
<td>Member Contact</td>
</tr>
<?php
while($row=mysqli_fetch_assoc($result))
{
$Member = $row['MemberName'];
$MemberEmail= $row['Email'];
$MemberContact = $row['Contact'];
?>
<tr class="bg-light text-dark">
<td><?php echo $Member ?></td>
<td><?php echo $MemberEmail ?></td>
<td><?php echo $MemberContact ?></td>
</tr>
<?php
}
?>
</table>
As you said, you already did the ajax, so the query string should be included in the paging navigation.
The link for next page should look like ?page=2&category=some_id
The ajax call will replace the whole content and the navigation.
There are libraries supporting that on every framework.
I have an html table where i retrieve data from a database using PHP. The table is quite simple, i have three fields: Name, Quantity and Price. At the end of the table i have an additional field, Subtot, that shows the final cost (SumOfAllItems(Quantity*Price)).
I need to be able to change the "Quantity" value in each row and the "Subtot" should update accordingly. I also need to be able to set min/max value the user can use to update the cell.
I was thinking to add something like a button or any kind of list/input by the "Quantity" value in each row.
I think i need to use javascript but i am not sure, any suggestion is welcome.
Following my code.
Thanks
<table>
<tbody>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
<?php
while($row2 = $result->fetch_assoc())
{?>
<tr>
<td><?php echo $row2["Name"] ?></td>
<td><?php echo $row2["Quantity"] ?></td>
<td><?php echo $row2["Price"]?></td>
</tr>
<?php
$subtot = $subtot + ($row2["Price"] * $row2["Quantity"])
} ?>
<td></td>
<td><b>Subtot.</b></td>
<td><b><?php echo $subtot2 ." Euro"; $tot = $subtot1 + $subtot2;?> </b></td>
</tbody>
</table>
The following should work, however i do not recommend this method (any method btw) without any validation on server side.
You need this on top of your php file:
<?php
$total = 0;
Then your table like:
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price<th>
</tr>
</thead>
<tbody>
<?php while($row2 = $result->fetch_assoc()) { ?>
<tr>
<td><?php echo $row2['name'] ?></td>
<td><input class="row" min="0" onchange="myFunction()" data-price="<?php echo $row2['price'] ?>" type="number" value="<?php echo $row2['quantity'] ?>"/></td>
<td><?php echo $row2['price'] ?></td>
</tr>
<?php
$total += $row2['price'] * $row2['quantity'];
}
?>
<td></td>
<td>
<b>Subtot.</b>
</td>
<td>
<b id="total"><?php echo $total; ?></b>
</td>
</tbody>
</table>
And you need the following script tag:
<script>
function myFunction(){
var total = 0;
var elements = document.getElementsByClassName("row");
for(var i = 0; i < elements.length; i++) {
total += elements[i].value * elements[i].dataset.price;
}
var totalEl = document.getElementById("total");
totalEl.innerHTML = total;
}
</script>
Again.. this is a very simple solution, but it should work.
I'm having some issues with dynamic tables and js code
Here's the table
<table class="table table-bordered table-striped responsive-utilities" id="m1r2">
<thead>
<tr>
<th data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"> <?php echo $lang['m1r7Auditores']; ?> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>">
<select class="select2 m-b-10 select2-multiple" multiple="multiple" data-placeholder="Seleccione" name="m1r7Auditores1[]">
<?php foreach ($auditores as $aud ): ?>
<option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>
<?php endforeach; ?>
</select> -
</th>
</tr>
</tbody>
</table>
And the JS to add more rows is like this
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = document.getElementById('cuantos').value;
var num2 = 1;
var sum = Number(num) + num2;
document.getElementById("m1r2").insertRow(-1).innerHTML = '<tr>' +
'<th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"><select multiple="multiple" name="m1r7Auditores1[]">' +
' <?php foreach ($auditores as $aud ): ?>' +
' <option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>' +
' <?php endforeach; ?>' +
'</select></th>' +
'</tr>';
The result its the first one working like a charm, but then, when I add some rows they came plain (no style, no js) as image shown
Thanks in advance for the help :)!
problem solved! if anyone got the same issue, the js DOM wasnt re declared afte the tr was duplicated, so I just added
$('#select'+ sum +'').multiSelect();
at the end of the code shown above :)