I am attempting to implement the TableSort: http://tablesorter.com, then later I will be implementing the pagination.
However, nothing is appearing to happen after implementation. I follwed the steps on the tablesorter webpage.
Any suggestions?
<!DOCTYPE html>
<html>
<head>
<script src="/libs/js/jquery-3.1.1.js" type="text/javascript">
</script>
<script src="/libs/js/jquery-3.1.1.min.js" type="text/javascript">
</script>
<script src="/libs/js/jquery.tablesorter.js" type="text/javascript">
</script>
<script src="/libs/js/jquery.tablesorter.pager.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<title></title>
</head>
<body>
<?php
$page_title = 'All Product';
require_once('includes/load.php');
// Checkin What level user has permission to view this page
page_require_level(2);
$products = join_product_table();
?><?php include_once('layouts/header.php'); ?>
<div class="row">
<div class="col-md-12">
<?php echo display_msg($msg); ?>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<div class="pull-right">
<a class="btn btn-primary" href="add_product.php">Add New</a>
</div>
</div>
<div class="panel-body">
<table class="table table-bordered" id="myTable">
<thead>
<tr>
<th class="text-center" style="width: 50px;">#</th>
<th>Photo</th>
<th>Product Title</th>
<th class="text-center" style="width: 10%;">Category</th>
<th class="text-center" style="width: 10%;">Instock</th><!--<th class="text-center" style="width: 10%;"> Buying Price </th>
<th class="text-center" style="width: 10%;"> Saleing Price </th>-->
<th class="text-center" style="width: 10%;">Product Added</th>
<th class="text-center" style="width: 100px;">Actions</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $product):?>
<tr>
<td class="text-center"><?php echo count_id();?></td>
<td><?php if($product['media_id'] === '0'): ?><img alt="" class="img-avatar" src="uploads/products/no_image.jpg"> <?php else: ?> <img alt="" class="img-avatar" src="uploads/products/%3C?php%20echo%20$product['image'];%20?%3E"> <?php endif; ?></td>
<td><?php echo remove_junk($product['name']); ?></td>
<td class="text-center"><?php echo remove_junk($product['categorie']); ?></td>
<td class="text-center"><?php echo remove_junk($product['quantity']); ?></td><!--<td class="text-center"> <?php echo remove_junk($product['buy_price']); ?></td>
<td class="text-center"> <?php echo remove_junk($product['sale_price']); ?></td>-->
<td class="text-center"><?php echo read_date($product['date']); ?></td>
<td class="text-center">
<div class="btn-group">
<a class="btn btn-info btn-xs" data-toggle="tooltip" href="edit_product.php?id=%3C?php%20echo%20(int)$product['id'];?%3E" title="Edit"><span class="glyphicon glyphicon-edit"></span></a> <a class="btn btn-danger btn-xs" data-toggle="tooltip" href="delete_product.php?id=%3C?php%20echo%20(int)$product['id'];?%3E" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
</div>
</td>
</tr><?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div><?php include_once('layouts/footer.php'); ?>
</body>
</html>
Resulting image with test data.
Edit, browser console:
Related
I have been trying to dynamically add a new dropdown list form using javascript. I have no idea how I should proceed with it. What I have rightnow is a html form page with a javascript that allows me to add a new row of text input form. html Form
Here is my current code for this page.
<?php
include('session.php');
?>
<?php
$ItemID = "ItemID";
$ItemName = "ItemName";
$UnitPrice = "UnitPrice";
$sql = "SELECT ItemID,ItemName,UnitPrice FROM Item";
$result = $db->query($sql);
$sql2 ="SELECT BranchID,BranchLocation FROM Branch";
$result2 = $db->query($sql2);
$sql4 ="SELECT MemberID FROM Membership";
$result4 = $db->query($sql4);
?>
<html>
<head>
<title>Add Sales</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>Add new Sales Record</h1>
</div>
<div class="container">
<button class="w3-button w3-black w3-round-large">Back</button>
</div>
<div class="container" align="right">
<table class="table-sm">
<tbody>
<tr class="table-primar">
<th scope="col" style="padding-right: 50px;">ItemID</th>
<th scope="col" style="padding-right: 50px">ItemName</th>
<th scope="col">UnitPrice</th>
</tr>
<?php
while($rows = $result->fetch_assoc()) {
?>
<tr class="contents">
<td><?php echo $rows[$ItemID]; ?></td>
<td><?php echo $rows[$ItemName]; ?></td>
<td><?php echo $rows[$UnitPrice]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<hr>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form action="addsales.php" method="post">
<table class="">
<table class="table table-bordered table-hover">
<thead>
<tr >
<th class="text-center">
Branch ID
</th>
<th class="text-center">
MemberID
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="branchid">
<option selected></option>
<?php
while($rows2 = $result2->fetch_assoc()){
?>
<option value="<?php echo $rows2["BranchID"];?>"><?php echo $rows2["BranchLocation"];?></option>
<?php
}
?>
</select>
</td>
<input type="hidden" value="<?php echo $login_session; ?>" name='employeeid' class="form-control"/>
<td>
<select name="memberid">
<option selected></option>
<?php
while($rows4 = $result4->fetch_assoc()){
?>
<option value="<?php echo $rows4["MemberID"];?>"><?php echo $rows4["MemberID"];?></option>
<?php
}
?>
</select>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
ItemID
</th>
<th class="text-center">
Amount
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<input type="text" maxlength ="10" name='item[0][itemid]' placeholder='ItemID' class="form-control"/>
</td>
<td>
<input type="number" name='item[0][amount]' placeholder='Amount' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<input class="w3-button w3-black w3-round-large" type="submit" name='submit' value="Submit"/>
</form>
<button id="add_row" class="w3-button w3-black w3-round-large" style="position: absolute; right: 20px;">New row</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr' + i).html("<td><input name='item["+i+"][itemid]' placeholder='ItemID' maxlength='10' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][amount]' placeholder='Amount' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
</script>
</body>
</html>
I want to change the javascript code so that instead of adding a new text input form, it will add a select form with options from the database. Something similar to this.
<td>
<select name="memberid">
<option selected></option>
<?php
while($rows4 = $result4->fetch_assoc()){
?>
<option value="<?php echo $rows4["MemberID"];?>"><?php echo $rows4["MemberID"];?></option>
<?php
}
?>
</select>
</td>
I am really new to all this php and javascript, so my code may look a bit off. Thank you for your help in advance.
I have made a form that users can click to add news rows.
<?php
include('session.php');
?>
<?php
$ItemID = "ItemID";
$ItemName = "ItemName";
$UnitPrice = "UnitPrice";
$sql = "SELECT ItemID,ItemName,UnitPrice FROM Item";
$result = $db->query($sql);
?>
<html>
<head>
<title>Add Sales</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>Add new Sales Record</h1>
</div>
<div class="container">
<button class="w3-button w3-black w3-round-large">Back</button>
</div>
<div class="container" align="right">
<table class="table-sm">
<tbody>
<tr class="table-primar">
<th scope="col" style="padding-right: 50px;">ItemID</th>
<th scope="col" style="padding-right: 50px">ItemName</th>
<th scope="col">UnitPrice</th>
</tr>
<?php
while($rows = $result->fetch_assoc()) {
?>
<tr class="contents">
<td><?php echo $rows[$ItemID]; ?></td>
<td><?php echo $rows[$ItemName]; ?></td>
<td><?php echo $rows[$UnitPrice]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<hr>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
ItemID
</th>
<th class="text-center">
Amount
</th>
</tr>
</thead>
<tbody>
<form action="addsales.php" method="POST">
<tr id='addr0'>
<td>
<input type="text" name='itemid' placeholder='ItemID' class="form-control"/>
</select>
</td>
<td>
<input type="text" name='amount' placeholder='Amount' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</form>
</tbody>
</table>
</div>
</div>
<button id="add_row" class="w3-button w3-black w3-round-large" style="position: absolute; right: 130px;">New row</button>
<button class="w3-button w3-black w3-round-large">Save</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr'+(i-1)).find('input').attr('disabled',true);
$('#addr' + i).html("<td><input name='itemid" + i + "' placeholder='ItemID' class='form-control input-md'/></td><td><input type='text' name='amount" + i + "' placeholder='Amount' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
</script>
</body>
</html>
What I want to do is to change the itemid field to a drop down list that comes from a database query. I have managed to do it for the first row field. But, the problem I encoutered later is that I do not know how to make the list appear again on the new rows that I inserted using javascript. I have tried to somhow display the list using javascript but it did not work. Unfortunately I have deleted those code and are left with the snippet that I included.
Thank you for your time.
I need to Highlight columns that have different values.
If the value on $b['nama'] and $c['nama'] is not the same i need to highlight the <tr>. I wanted the system admin to easily see which of the field is having different values so the admin can decide to approve user edit request or to reject the request.
<?php
error_reporting(0);
$b = $data->row_array();
$c = $data2->row_array();
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">User requested changes</h6>
</div>
<div class="card-body">
<table id="tabel" class="table table-bordered table-striped" style="width: 75%">
<thead>
<tr>
<th>Variable</th>
<th>Current data</th>
<th>Requested changes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nama</td>
<td>
<?php echo $b['nama']; ?>
</td>
<td>
<?php echo $c['nama']; ?>
</td>
</tr>
<tr>
<td>NIP Baru</td>
<td>
<?php echo $b['nipBaru']; ?>
</td>
<td>
<?php echo $c['nipBaru']; ?>
</td>
</tr>
<tr>
<td>NIP lama</td>
<td>
<?php echo $b['nipLama']; ?>
</td>
<td>
<?php echo $c['nipLama']; ?>
</td>
</tr>
<tr>
<td>Gelar depan</td>
<td>
<?php echo $b['gelarDepan']; ?>
</td>
<td>
<?php echo $c['gelarDepan']; ?>
</td>
</tr>
<tr>
<td>Gelar belakang</td>
<td>
<?php echo $b['gelarBelakang']; ?>
</td>
<td>
<?php echo $c['gelarBelakang']; ?>
</td>
</tr>
<tr>
<td>Tempat lahir</td>
<td>
<?php echo $b['tempatLahir']; ?>
</td>
<td>
<?php echo $c['tempatLahir']; ?>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Approve</button>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Reject</button>
</div>
</div>
</div>
Check if those two values are different and apply a class to the row
<tr<?php if ($b['nama'] != $c['nama']) { echo ' class="highlight"'; } ?>>
<td>Nama</td>
<td>
<?php echo $b['nama']; ?>
</td>
<td>
<?php echo $c['nama']; ?>
</td>
</tr>
then use CSS to highlight the cells
.highlight td {
background: yellowgreen;
}
try this code
you can change the bgcolor value or you can create css class and inside of if you echo the class='my_class'
<?php
error_reporting(0);
$b = $data->row_array();
$c = $data2->row_array();
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">User requested changes</h6>
</div>
<div class="card-body">
<table id="tabel" class="table table-bordered table-striped" style="width: 75%">
<thead>
<tr>
<th>Variable</th>
<th>Current data</th>
<th>Requested changes</th>
</tr>
</thead>
<tbody>
<tr <?php if ($b['nama'] != $c['nama']){echo "bgcolor='#FF0000'";} ?>>
<td>Nama</td>
<td>
<?php echo $b['nama']; ?>
</td>
<td>
<?php echo $c['nama']; ?>
</td>
</tr>
<tr <?php if ($b['nipBaru'] != $c['nipBaru']){echo "bgcolor='#FF0000'";} ?> >
<td>NIP Baru</td>
<td>
<?php echo $b['nipBaru']; ?>
</td>
<td>
<?php echo $c['nipBaru']; ?>
</td>
</tr>
<tr <?php if ($b['nipBaru'] != $c['nipBaru']){echo "bgcolor='#FF0000'";} ?> >
<td>NIP lama</td>
<td>
<?php echo $b['nipLama']; ?>
</td>
<td>
<?php echo $c['nipLama']; ?>
</td>
</tr>
<tr <?php if ($b['gelarDepan'] != $c['gelarDepan']){echo "bgcolor='#FF0000'";} ?> >
<td>Gelar depan</td>
<td>
<?php echo $b['gelarDepan']; ?>
</td>
<td>
<?php echo $c['gelarDepan']; ?>
</td>
</tr>
<tr <?php if ($b['gelarBelakang'] != $c['gelarBelakang']){echo "bgcolor='#FF0000'";} ?> >
<td>Gelar belakang</td>
<td>
<?php echo $b['gelarBelakang']; ?>
</td>
<td>
<?php echo $c['gelarBelakang']; ?>
</td>
</tr>
<tr <?php if ($b['tempatLahir'] != $c['tempatLahir']){echo "bgcolor='#FF0000'";} ?> >
<td>Tempat lahir</td>
<td>
<?php echo $b['tempatLahir']; ?>
</td>
<td>
<?php echo $c['tempatLahir']; ?>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Approve</button>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Reject</button>
</div>
</div>
</div>
You can define a class named 'same' and 'different'. Then in php check if the values are same and echo the class property based on being same or different.
php
<tr>
<td>Nama</td>
<td class="<?php echo ($b['nama'] == $c['nama'])? 'same': 'different'; ">
<?php echo $b['nama']; ?>
</td>
<td class="<?php echo ($b['nama'] == $c['nama'])? 'same': 'different'; ">
<?php echo $c['nama']; ?>
</td>
</tr>
In Styles
.same{
color:green;
}
.different{
color:red;
}
We have used ternary operator to figure out if the variables are same or not.
https://www.abeautifulsite.net/how-to-use-the-php-ternary-operator
Since you seem to be using Bootstrap, you could just apply an already defined style to the cells to highlight the difference. For instance:
<tr>
<td>Nama</td>
<td class="<?php echo ($b['nama'] == $c['nama'])? 'bg-success': 'bg-danger'; ">
<?php echo $b['nama']; ?>
</td>
<td class="bg-<?php echo ($b['nama'] == $c['nama'])? 'bg-success': 'bg-danger'; ">
<?php echo $c['nama']; ?>
</td>
</tr>
By doing this, if $b['nama'] and $c['nama'] are different, the cells would have an near-red background and if they are equal, they'd have a near-green background. If you'd like to only highlight differences (in order to make the screen less overwhelming, just replace the 'bg-success' with '' so the equal cells don't get styled
<div class="col-md-6 hidden-xm hidden-sm">
<div class="col-md-12 hidden-xm"><h3>ההזמנה שלך</h3></div>
<div class="col-md-12 hidden-xm">
<div class="table-responsive hidden-xm">
<table class="table table-default">
<thead>
<tr>
<th class="text-right">סה"כ</th>
<th class="text-right">מוצר</th>
</tr>
</thead>
<tbody>
<?php
$totalPrice = 0;
$arr = [];
foreach($_SESSION['cart'] as $product){
$productDetails = get_product($product['id']);
array_push($arr,$product['amount']." x".$productDetails->get_name());
$totalPrice+= $productDetails->get_price()*$product['amount'];
?>
<tr>
<td class="text-right"> <?php echo $productDetails->get_price()*$product['amount']; ?>$</td>
<td class="text-right"><?php echo $productDetails->get_name()." <b>".$product['amount']."x</b>"; ?></td>
</tr>
<?php };?>
<tr>
<td class="total_price">משלוח</td>
<td>9$</td>
</tr>
<tr>
<td class="text-right total_price">סה"כ</td>
<td class="text-right"> <?php echo $totalPrice+9 ?>$</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 hidden-xm text-right"> אחריות מלאה על המוצרים ל-28 יום</div>
<input type="hidden" name="products" value="<?php echo implode("<br>",$arr) ?>">
<div class="text-left">
<input type="submit" name="submit" class="btn btn-lg btn-pay" value="שליחת הזמנה">
</div>
</div>
</div>
I've tried for pretty long time to find out why the : hidden-xm/hidden-sm not working for me. Can someone tell me what am i doing wrong?
also I want to notice that this div is inside a bigger container but I want to hide it if its at a mobile point of view.
I'ts hidden-xs instead of hidden-xm
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>