i have a question where i want to hide the column in datatable but still need to access its value.
this is my code
<div class="container">
<div class="">
<h1>HRphn</h1>
<div class="col-sm-8">
<div class="well clearfix">
<div class="pull-right"><button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">
<span class="glyphicon glyphicon-plus"></span> Record</button></div></div>
<table id="posting_grid" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" data-toggle="bootgrid">
<thead>
<tr>
<th data-column-id="id" data-type="numeric" data-identifier="true">Posting No</th>
<th data-column-id="position">Position</th>
<th data-column-id="department">Department</th>
<th data-column-id="vacancy">Vacancy</th>
<th data-column-id="postingdate">Date</th>
<th data-column-id="status">Status</th>
<th data-column-id="qualification" clas="hidden-lg"></th>
<th data-column-id="experience" class="hidden-lg"></th>
<th data-column-id="criteria1" class="hidden-lg"></th>
<th data-column-id="criteria2" class="hidden-lg"></th>
<th data-column-id="criteria3" class="hidden-lg"></th>
<th data-column-id="jd1" ></th>
<th data-column-id="jd2" ></th>
<th data-column-id="jd3" ></th>
<th data-column-id="jd4" ></th>
<th data-column-id="jd5" ></th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
</tr>
</thead>
</table>
</div>
i want to hide this
<th data-column-id="qualification" data-class="hidden"></th>
<th data-column-id="experience" data-class="hidden"></th>
<th data-column-id="criteria1" data-class="hidden"></th>
<th data-column-id="criteria2" data-class='hidden'></th>
<th data-column-id="criteria3" data-class='hidden'></th>
<th data-column-id="jd1" ></th>
<th data-column-id="jd2" ></th>
<th data-column-id="jd3" ></th>
<th data-column-id="jd4" ></th>
<th data-column-id="jd5" ></th>
but..if i hide those value..i cant access them at
grid.find(".command-edit").on("click", function(e)
{
//alert("You pressed edit on row: " + $(this).data("row-id"));
var ele =$(this).parent();
var g_id = $(this).parent().siblings(':first').html();
var g_name = $(this).parent().siblings(':nth-of-type(7)').html();
console.log(g_id);
console.log(g_name);
//console.log(grid.data());//
$('#edit_model').modal('show');
if($(this).data("row-id") >0) {
// collect the data
// $('#edit_id').val(ele.siblings(':first').html()); // in case we're changing the key
$('#edit_position').val(ele.siblings(':nth-of-type(2)').html());
$('#edit_department').val(ele.siblings(':nth-of-type(3)').html());
$('#edit_vacancy').val(ele.siblings(':nth-of-type(4)').html());
$('#edit_qualification').val(ele.siblings(':nth-of-type(7)').html());
$('#edit_experience').val(ele.siblings(':nth-of-type(8)').html());
$('#edit_postingdate').val(ele.siblings(':nth-of-type(5)').html());
$('#edit_status').val(ele.siblings(':nth-of-type(6)').html());
// $('#edit_description').val(ele.siblings(':nth-of-type(9)').html());
} else {
alert('Now row selected! First select row, then click edit button');
}
})
i have tried solution at Bootstrap-Table: How to hide a column without deleting it from the DOM?
but it doesnt seem to hide the column at all
If you are using bootstrap 4+ just add the class .d-none to your columns,
which will set display: none on them.
If you are using bootstrap 3+ it should be .hidden-* where as * is
xs
sm
md
lg
for the different screen sizes.
Maybe .hidden works as well without the size selector...
Related
Here is the web page:
Update data and ID is showing while other data such as customer name, phone, etc are not showing.
CustomersController.php
public function index()
{
$customers = Customer::all();
return view('customers.index', ['customers' => $customers]);
}
index.blade.php
#extends('layouts.app')
#section('content')
<h1>Customers</h1>
#if(count($customers)>0)
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col">Address</th>
<th scope="col">Updated on</th>
</tr>
</thead>
#foreach($customers as $customer)
<tbody>
<tr>
<th scope="row">{{$customer->id}}</th>
<td>{{$customer->name}}</td>
<td>{{$customer->email}}</td>
<td>{{$customer->phone}}</td>
<td>{{$customer->add}}</td>
<td>{{$customer->updated_at}}</td>
</tr>
#endforeach
#else
#endif
#endsection
You didn't close <table> and <tbody>, and you placed <tbody> inside the loop (it should only appear once)
Try this:
#extends('layouts.app')
#section('content')
<h1>Customers</h1>
#if(count($customers)>0)
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col">Address</th>
<th scope="col">Updated on</th>
</tr>
</thead>
<tbody>
#foreach($customers as $customer)
<tr>
<td>{{$customer->id}}</td>
<td>{{$customer->name}}</td>
<td>{{$customer->email}}</td>
<td>{{$customer->phone}}</td>
<td>{{$customer->add}}</td>
<td>{{$customer->updated_at}}</td>
</tr>
#endforeach
</tbody>
</table>
#else
#endif
#endsection
You didn't close your table tag and <tbody> tag and <tbody> opening tag should be start before foreach loop.
I want my site to search for any product that belonged to particular size when click any size option in the table cell for desktop users but I am having two challenges
My loop for horizontal cells suppose to be incrementing from left to right like this 28D, 28DD, 28E, 28F, 28FF, 28G ...28K and then move to second line 30D --- 30k but instead it was reapeating each value 12 times horizontally like this 28D, 28D, 28D 12times and move to second line 28DD repeating it 12 times again. Please what could be the problem in my four loop?
I don't know how to put anchor tag around the table cell and how to put name = size attribute in the table cell for it to link sizeresult.php. where it will be processed by the select query
here is my code:
<div class="table-responsive"><!-- table-responsive begin -->
<table class="table table-striped table-hover" border="0" width="100%" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th class="success">
<h4 class="text-center white-text">D</h4>
</th>
<th class="info">
<h4 class="text-center white-text">DD</h4>
</th>
<th class="danger">
<h4 class="text-center white-text">E</h4>
</th>
<th class="success">
<h4 class="text-center white-text">F</h4>
</th>
<th class="info">
<h4 class="text-center white-text">FF</h4>
</th>
<th class="danger">
<h4 class="text-center white-text">G</h4>
</th>
<th class="success">
<h4 class="text-center white-text">GG</h4>
</th>
<th class="info">
<h4 class="text-center white-text">H</h4>
</th>
<th class="danger">
<h4 class="text-center white-text">HH</h4>
</th>
<th class="success">
<h4 class="text-center white-text">J</h4>
</th>
<th class="info">
<h4 class="text-center white-text">JJ</h4>
</th>
<th class="danger">
<h4 class="text-center white-text">K</h4>
</th>
</tr>
</thead>
<tbody>
<?php
$count = 12; // Number of possible cells to add at once:
$i=0;
$get_sizes = "select * from sizes";
$run_sizes = mysqli_query($dbc,$get_sizes);
while ($row_sizes=mysqli_fetch_array($run_sizes)){
$size_id = $row_sizes['size_id'];
$size_name = $row_sizes['size'];
$i++;
?>
<tr>
<?php for ($i = 1; $i <= $count; $i++) {
echo "
<td value='$size_name' align='center'>
$size_name
</td>";
} // End of FOR loop.
?>
</tr>
<?php } ?>
</tbody>
</table>
</div> <!-- table-responsive end -->
</form>
sizeresult.php code is this :
$size_name=$_POST['size'];
$run_products = mysqli_query($dbc,"SELECT * FROM products INNER JOIN SIZES USING (size_id) WHERE sizes.size ='%$size_name%'");
I made the following changes
$count variable and for loop completely
created block of code to format your list of items in the way you have explained in your question grouping them by 12 in each row.
based on your request of using anchor tag i added anchor tag so that when the user clicks on it it will be taken to the sizeresult.php page and the query will be processed.
I made sure that the post and get request doesn't conflict by putting the following code right above the query in sizeresult.php
if(isset($_GET['size'])){ $size_name=$_GET['size'] } else if(isset($_POST['size'])){ $size_name=$_POST['size']; }
the following in your main page
<div class="table-responsive"><!-- table-responsive begin -->
<table class="table table-striped table-hover" border="0" width="100%" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th class="success">
<h4 class="text-center white-text">D</h4>
</th>
<th class="info">
<h4 class="text-center white-text">DD</h4>
</th>
<th class="danger">
<h4 class="text-center white-text">E</h4>
</th>
<th class="success">
<h4 class="text-center white-text">F</h4>
</th>
<th class="info">
<h4 class="text-center white-text">FF</h4>
</th>
<th class="danger">
<h4 class="text-center white-text">G</h4>
</th>
<th class="success">
<h4 class="text-center white-text">GG</h4>
</th>
<th class="info">
<h4 class="text-center white-text">H</h4>
</th>
<th class="danger">
<h4 class="text-center white-text">HH</h4>
</th>
<th class="success">
<h4 class="text-center white-text">J</h4>
</th>
<th class="info">
<h4 class="text-center white-text">JJ</h4>
</th>
<th class="danger">
<h4 class="text-center white-text">K</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<?php
//$count = 12; // Number of possible cells to add at once://you don't need this too.
$i=1;
$get_sizes = "select * from sizes";
$run_sizes = mysqli_query($dbc,$get_sizes);
while ($row_sizes=mysqli_fetch_array($run_sizes)){
$size_id = $row_sizes['size_id'];
$size_name = $row_sizes['size'];
if($i==12){
echo "<td align='center'><a href='product-card.php?size=$size_name' type='button' style='text-decoration:none; color:black;' class='btn btn-block'>$size_name</a></td>";
$i=1;
echo "</tr><tr>";
}
else {
echo "<td align='center'><a href='product-card.php?size=$size_name' type='button' style='text-decoration:none; color:black;' class='btn btn-block'>$size_name</a></td>";
$i++;
}
} // End of while loop.
?>
</tr>
</tbody>
</table>
</div> <!-- table-responsive end -->
<!-- </form> you can remove this FORM tag if you want -->
I have a delete button in my site that deletes a row in a table.
After the row is deleted, the user is redirect to another page.
Is it possible to display the deleted row values in the redirected page?
thank you!
<table class="table table-striped b-t b-light">
<thead>
<tr>
<th style="text-align: center">User Name</th>
<th style="text-align: center">User Last Name</th>
<th style="text-align: center">Email</th>
<th style="text-align: center">Password</th>
<th style="text-align: center">User Type</th>
<th style="text-align: center">Edit</th>
<th style="text-align: center">Delete</th>
</tr>
</thead>
<?php foreach ($ulistq as $urule) : ?>
<tbody>
<th style="text-align: center"><?= $urule['u_name'] ?></th>
<th style="text-align: center"><?= $urule['u_lastname'] ?></th>
<th style="text-align: center"><?= $urule['u_email'] ?></th>
<th style="text-align: center"><?= $urule['u_password'] ?></th>
<th style="text-align: center"><?= $urule['u_rule'] ?></th>
<td style="text-align: center"> Edit </td>
<td style="text-align: center"> Delete </td>
</tbody>
<?php endforeach; ?>
</table>
You can consider the option of adding the values to the redirect URL and extract them in the redirected page.
So instead of this redirect:
redirect to www.example.com/afterdelete
You can do
redirect to www.example.com/afterdelete?value1=1&value2=2
This option can be done both in the server side, as well as the client side.
You will need your afterDelete page to extract these values and to display them
I need to make a button which when clicked, will export all data from the HTML form on the page to an excel file. Could anyone help me with this I'm new to PHP and dont know where to begin.
<div class="left col-md-12 form-group" >
<form method="post" id="triallesson_form">
<div class="table">
<table class="table table-header-rotated table-condensed table-striped table-hover" style="width: 100%;">
<th></th>
<th class="col-xs-1 not-rotate"><div><span><?= text::$string['person_name'] ;?></span></div> </th>
<th class="col-xs-1 not-rotate"><div><span><?= text::$string['person_telphone'] ;?></span></div> </th>
<th class="col-xs-1 not-rotate"><div><span><?= text::$string['location_name'] ;?></span></div> </th>
<th class="col-xs-3 not-rotate"><div><span><?= text::$string['class_date'] ;?></span></div> </th>
<th class="col-xs-2 not-rotate"><div><span><?= text::$string['triallesson_type'] ;?></span></div> </th>
<th class="col-xs-2 not-rotate"><div><span><?= text::$string['triallesson_email'] ;?></span></div> </th>
<th class="col-xs-2 not-rotate"><div><span>via</span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_called'] ;?></span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_confirmd'] ;?></span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_show'] ;?></span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_sign_up'] ;?></span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_cancelled'] ;?></span></div> </th>
<th class="rotate-45" title="<?= Text::$string['triallesson_sms_info'];?>"><div><span><?= Text::$string['triallesson_sms'] ;?></span></div> </th>
<th></th>
<?= $content[1]; ?>
</table>
<input type="hidden" name="date1" value="<?=$con->date1?>">
<input type="hidden" name="date2" value="<?=$con->date2?>"></form>
</div>
</div>
Last time I didnt add the code sorry.
This is the table where my data will be showed in.
My intention is that when I click a button on the same page, it will take all the data from the table and export it into a XLS or CSV file.
If any further information is needed I'll add it, thankyou in advance.
You're using PHP to create the table but it might be simpler to use JavaScript to create the Excel file from the resultant HTML table as there are a variety of tools available to do this which are not too hard to use, such as: https://github.com/clarketm/TableExport
e.g. Using this as an example: https://tableexport.v3.travismclarke.com/examples/position.html for your table your code could look like this:
<div class="left col-md-12 form-group" >
<form method="post" id="triallesson_form">
<div class="table">
<table id="myDataTable" class="table table-header-rotated table-condensed table-striped table-hover" style="width: 100%;">
<thead>
<th></th>
<th class="col-xs-1 not-rotate"><div><span><?= text::$string['person_name'] ;?></span></div> </th>
<th class="col-xs-1 not-rotate"><div><span><?= text::$string['person_telphone'] ;?></span></div> </th>
<th class="col-xs-1 not-rotate"><div><span><?= text::$string['location_name'] ;?></span></div> </th>
<th class="col-xs-3 not-rotate"><div><span><?= text::$string['class_date'] ;?></span></div> </th>
<th class="col-xs-2 not-rotate"><div><span><?= text::$string['triallesson_type'] ;?></span></div> </th>
<th class="col-xs-2 not-rotate"><div><span><?= text::$string['triallesson_email'] ;?></span></div> </th>
<th class="col-xs-2 not-rotate"><div><span>via</span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_called'] ;?></span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_confirmd'] ;?></span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_show'] ;?></span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_sign_up'] ;?></span></div> </th>
<th class="rotate-45"><div><span><?= text::$string['triallesson_cancelled'] ;?></span></div> </th>
<th class="rotate-45" title="<?= Text::$string['triallesson_sms_info'];?>"><div><span><?= Text::$string['triallesson_sms'] ;?></span></div> </th>
<th></th>
</thead>
<tbody>
<?= $content[1]; ?>
</tbody>
</table>
<input type="hidden" name="date1" value="<?=$con->date1?>">
<input type="hidden" name="date2" value="<?=$con->date2?>">
</div>
</form>
</div>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/js-xlsx/dist/xlsx.core.min.js"></script>
<script type="text/javascript" src="../bower_components/blobjs/Blob.min.js"></script>
<script type="text/javascript" src="../bower_components/file-saverjs/FileSaver.min.js"></script>
<script type="text/javascript" src="../dist/js/tableexport.min.js"></script>
<script>
var PositionTable = document.getElementById('myDataTable');
new TableExport(PositionTable, {
position: 'top'
});
</script>
The only necessary change made to your HTML is adding an ID attribute to the table: <table id="myDataTable" ...
That's then referenced again in the JavaScript lower down: var PositionTable = document.getElementById('myDataTable');.
You'll need to update the locations of the included files to fit where you've got them (xlsx.core.min.js, Blob.min.js, FileSaver.min.js, tableexport.min.js, etc.). Remove the jQuery include if unneeded.
You'll then see Excel download buttons appear under your table just like in the example.
I am using bootstrap at http://communitychessclub.com/games.php -it's a table that displays records of chess games. I want a row to be clickable like:
<?php
echo "<tr onclick=\"location.href='basic.php?game=$game'\" >";
?>
The trouble is that the code to load and display the json table data doesn't include "TR" for displaying data; it's simply this:
<table data-toggle="table" data-url="games.json" data-cache="false"
data-search="true" data-show-refresh="true" data-show-toggle="true"
data-show-columns="true">
<thead>
<tr>
<th data-field="game" class="hidden-xs hidden-sm hidden-md
hidden-lg">#</th>
<th data-field="Date">Date</th>
<th data-field="ECO">ECO</th>
<th data-field="Event">Event</th>
<th data-field="WhiteElo">Rat.</th>
<th data-field="White">White</th>
<th data-field="BlackElo" >Rat.</th>
<th data-field="Black">Black</th>
</tr>
</thead>
</table>
I want to grab the game number (data-field="game") and
<?php
echo "<tr onclick=\"location.href='basic.php?game=$game'\" >";
?>
How could I proceed?