My code is as follows:
<div class="input-group select-all" >
<span class="input-group-addon disabled">
<input type="checkbox" <?php if($pagetitle=="Trash") echo "disabled"?>>
</span>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle <?php if($pagetitle=="Trash") echo "disabled"?>" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Delete</li>
</ul>
</div>
</div><!-- /input-group -->
When we checked in checkbox then all the data in a table must be selected, which is the type of operation I need.
<div class="mails">
<table class="table table-hover table-condensed">
<?php
if(count($inMessages)>0)
foreach($inMessages as $m):
?>
<tr data-id="<?php echo $m->sn?>" <?php if($m->flag==1) echo "class=\"read\""?><?php if($m->flag==0) echo "class=\"unread\""?>>
<td><?php if($pagetitle!="Trash"):?><i class="fa fa-check-square-o fa-square-o disabled" data-id="<?php echo $m->sn?>"></i><?php endif?></td>
<td class="subject"><?php echo $m->subject?></td>
<td class="body"><?php echo $m->message?></td>
<td>
<?php echo $m->address?>
<BR/><?php echo $m->io?>
</td>
<td class="time"><?php echo $m->mdate?> <?php echo $m->mtime?></td>
</tr>
<?php
endforeach
?>
</table>
</div>
</div><!-- /Right Side mail bar -->
Manual check box works properly, but I need check all options.
How can I do that in addition to the code above? Please help me.
If you want to select all with a single checkbox you can use something similar to:
<?php
$string .= '
<table id="mytable" class="table table-hover table-bordered datatable">
<thead>
<tr>
<th><input type="checkbox" id="selectall"></th>
<th>Field A</th>
<th>Field B</th>
</tr>
</thead>
<tbody>'."\n";
foreach($array as $row) { // create table content
$string .= ' <tr id="art-'.$row['field'].'" class="data">
<td><input class="case" type="checkbox" name="id[]" value="'.$row['field'].'"></td>
<td>'.$row['field A'].'</td>
<td>'.$row['field B'].'</td>
</tr>'."\n";
}
$string .= ' </tbody>
</table>
'."\n";
echo $string;
?>
<script>
$(document).ready(function(){
$("#selectall").click(function () { // check all
$('.case').prop('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").prop("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</script>
Related
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
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:
i have some code, see:
<script>
$$.ready(function() {
// Profile Dialog
$( "#user-dialog" ).dialog({
autoOpen: false,
modal: true,
width: 400,
open: function(){ $(this).parent().css('overflow', 'visible'); $$.utils.forms.resize() }
}).find('button.submit').click(function(){
var $el = $(this).parents('.ui-dialog-content');
if ($el.validate().form()) {
$el.dialog('close');
}
}).end().find('button.cancel').click(function(){
var $el = $(this).parents('.ui-dialog-content');
$el.find('form')[0].reset();
$el.dialog('close');;
});
$('#user-table').on('click', '.open-user-dialog', function(){
$( "#user-dialog" ).dialog( "open" );
return false;
});
});
</script>
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>action</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT id,user_name FROM users";
if ($result = $verbindung->query($sql)) {
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row["id"];?></td>
<td><?php echo $row["user_name"];?></td>
<td>
<button class="open-user-dialog"><img src="img/icons/packs/fugue/16x16/bullet_go.png"/> view</button>
</td>
</tr>
<?php }} ?>
</tbody>
</table>
<div style="display: none;" id="user-dialog" title="user view">
<form action="">
<div class="row">
<label>
<strong>User details</strong>
</label>
<div>
<input type="text" id="user_id" value="<?php echo $id; ?>">
<input type="text" id="user_name" value="<?php echo $user_name; ?>">
</div>
</div>
</form>
<div class="actions">
<div class="left">
<button class="grey cancel">cancel</button>
</div>
<div class="right">
<input id="submit" onclick="userFunction()" type="button" value="go">
</div>
</div>
</div>
How i get my details from table to my jquery dialog?
the dialog is working fine, but i dont get the values $row['id'] and $row['user_name'] to display in my jquery dialog.
What I also try, I do not get the data in my dialog to be able to process them further.
How i can pass $row['id'] and $row['user_name'] for each line to my dialog?
Can someone Help me?
Firstly you add Php code in Php tags.You don't write if and while in php.
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>action</th>
</tr>
</thead>
<tbody>
<?php
if ($result = $verbindung->query($sql)) {
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row["id"];?></td>
<td><?php echo $row["user_name"];?></td>
<td>
<button class="open-user-dialog"><img src="img/icons/packs/fugue/16x16/bullet_go.png"/> view</button>
</td>
</tr>
<?php }} ?>
</tbody>
</table>
<div style="display: none;" id="user-dialog" title="user view">
<form action="">
<div class="row">
<label>
<strong>User details</strong>
</label>
<div>
<input type="text" id="user_id" value="<?php echo $id; ?>">
<input type="text" id="user_name" value="<?php echo $user_name; ?>">
</div>
</div>
</form>
<div class="actions">
<div class="left">
<button class="grey cancel">cancel</button>
</div>
<div class="right">
<input id="submit" onclick="userFunction()" type="button" value="go">
</div>
</div>
try this
As far as I know this code must work but I when I coded it it does not work
The problem is that the form does not submit. How can I solve this ?
I don't even get the value of the checkbox when checked .
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
<th>Item Photo</th>
<th>Item Name</th>
<th>Stocks</th>
<th>Date Posted</th>
<th>Price</th>
<th>Actions</th>
</thead>
<tbody>
<form action ="<?php echo base_url()?>Shop/test" method="POST">
<?php
$x=1;
foreach($shop_items as $key)
{
?>
<tr>
<td><input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id?>"> <?php echo $x;?> </td>
<td><center><img src="<?php echo base_url()?>uploads/items_main/<?php echo $key->shop_item_main_pic;?>" style = "width:60px;height:50px;"alt=""></center></td>
<td><?php echo mb_strimwidth($key->shop_item_name, 0, 18,"...");?></td>
<td style="width:10px;"><center><button><span class="fa fa-eye"></span></button></center></td>
<td><?php echo date('F,d,Y',strtotime($key->shop_item_date_posted))?></td>
<td><?php if(!$key->shop_item_sale){ echo number_format($key->shop_item_orig_price);}
else{ echo "<font color='red'>".number_format(intval($key->shop_item_orig_price-($key->shop_item_orig_price*($key->shop_item_sale/100))))."</font> ";}?></td>
<td>
Bid | View
</td>
</tr>
<?php
$x+=1;
}
?>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
</tbody>
In the Controller, the structure is like this
if(isset($_POST['delete']))
{
if (isset($_POST["cb"])) {
// Checkbox is checked.
$cb = $_POST["cb"];
echo $cb;
}
else {
$cb = $_POST["cb"];
echo $cb;
}
}
If you emit all the PHP you are left with bad HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
</thead>
<tbody>
<form action="<?php echo base_url() ?>Shop/test" method="POST">
<tr>
<td>
<input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id ?>"> <?php echo $x; ?>
</td>
</tr>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete">
<span class="fa fa-times"></span> delete
</button>
</form>
</tbody>
</table>
form shoul not be a child of tbody. Any content in a table should be inside th or td tags. You should place the form outside of the table and the button inside td tags:
<form action="<?php echo base_url() ?>Shop/test" method="POST">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id ?>"> <?php echo $x; ?>
</td>
</tr>
<tr>
<td>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete">
<span class="fa fa-times"></span> delete
</button>
</td>
</tr>
</tbody>
</table>
</form>
I have a table that displays the result of a query. I am using codeigniter by the way. I want to add a checkbox in every row. And everytime a checkbox is checked, I will enable the edit button and the delete button..
I made it this way but only on the first row, it enable and disable the button:
<div style="margin-top: 10px;margin-left: 10px;margin-bottom: 10px">
<a type="button" class="btn btn-default" href="<?php echo site_url('home/create')?>" ><span class=" fa fa-plus-circle"></span> Create </a>
<button type="button" id="edit" class="btn btn-default" disabled><span class=" fa fa-edit "></span> Edit</button>
<button type="button" class="btn btn-default" disabled > <span class=" fa fa-trash-o"></span> Delete</button>
</div>
<div class="table-responsive" style="margin-right: 10px;margin-left: 10px;margin-bottom: 10px">
<table class="table table-bordered table-hover table-striped" id="recorddata">
<thead class="header">
<tr class="well">
<th style="width: 1px"></th>
<th style="font-size: 14px;" >Date</th>
<th style="font-size: 14px;">Name</th>
<th style="font-size: 14px;">Status</th>
</tr>
</thead>
<tbody >
<?php if($result!=null){
foreach($result as $row){?>
<tr>
<td align="center"><input type="checkbox" id="recs" name="recs[]" value="<?php echo $row->id;?>"/></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->datee;?></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->name;?></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->status;?></td>
</tr>
<?php }
}
?>
</tbody>
</table><!-- END Table--></div>
here's my jquery:
<script>
$('#recs').click(function() {
if($('#recs').is(":checked")){
$('#edit').prop('disabled',false)
}
else{
$('#edit').prop('disabled',true)
}
});
</script>
You have to class instead of using id for the checkbox. Check if any of the checkbox is checked and enable edit, delete button.
<td align="center"><input type="checkbox" class="recs" name="recs[]" value="<?php echo $row->id;?>"/></td>
Add class in this line
<td align="center"><input type="checkbox" id="recs" name="recs[]" value="<?php echo $row->id;?>"/></td>
Bind jquery on change event like
$(document).ready(function(){
$('.your_class').click(function(){
// check if checkbox is checked
var checked = false;
$(".your_class").each(function () {
if($(this).is(":checked"))
{
checked = true;
}
});
if(checked)
{
// enable buttons here
return;
}
// disable buttons here
});
});