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?
Related
Trying to use a Bootstrap 5 Collapse. This same code has been copied from a similar page, but the rows do not expand to show the collapsed (hidden) row. Instead I get the above error on the browser console.
The browser's console has these lines at the bottom ( I can click the top row to expand the remaining rows, which looks like the attached pic):
SyntaxError: The string did not match the expected pattern.
querySelector - index.js:64
e - index.js:64
(anonymous function) - collapse.js:317
If I tap any of the lines after the f symbols, the browser redirects me to the "Sources" tab to the relevant JS file for Bootstrap.
The code is - not the full page, this is exerted:
<?php
$x = 1;
$leadingScore = -100;
if (isset($leaderboard)) {
foreach ($leaderboard as $score) {
$pid = (string) $score['playerId'];
?>
<div class="collapse">
<tr data-bs-toggle='collapse' data-bs-target='#<?=$pid?>'>
<th scope="row">
<?php
if ($leadingScore != $score['score'])
echo $x;
?>
</th>
<td style="text-align: left;">
<?php echo $score['playerName']." (".$score['hcap'].")"; ?>
</td>
<td>
<?php
echo $score['score'];
$leadingScore = $score['score'];
?>
</td>
<td>
<?php
echo $score['thru'];
?>
</td>
</tr>
<tr id='<?=$pid?>' class='collapse'>
<td colspan=4>
<table class='table'>
<tr>
<th class='sub-th' scope='col'></th>
<th class='sub-th' scope='col'>1</th>
<th class='sub-th' scope='col'>2</th>
<th class='sub-th' scope='col'>3</th>
<th class='sub-th' scope='col'>4</th>
<th class='sub-th' scope='col'>5</th>
<th class='sub-th' scope='col'>6</th>
<th class='sub-th' scope='col'>7</th>
<th class='sub-th' scope='col'>8</th>
<th class='sub-th' scope='col'>9</th>
<th class='sub-th' scope='col'>TOTAL</th>
</tr>
</table>
</td>
</tr>
</div>
<?php
$x++;
}
}
?>
The output in the browser source, the primary table row HTML is:
<div class="collapse">
<tr data-bs-toggle='collapse' data-bs-target='#609d0993906429612483cf49'>
The collapsable row HTML is:
<tr id='609d0993906429612483cf49' class='collapse'>
<td colspan=4>
<table class='table'>
...
So it has the target and id tags populated from the DB.
As stated by #johansenja, starting the div id with character not integer resolved the issue.
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 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...
I am creating a billing application and I am using codeigniter. I have a view where I can view the employee details.In this view file I have a action like delete and edit separately for each employee record. Is is possible to have a single edit button that can edit any employee record that is listed in my view?
My view file
<table class="resizable" bordercolor="#993300" border="1">
<thead>
<tr>
<th class="header">Employee id</th>
<th class="yellow header headerSortDown">First name</th>
<th class="green header">Last name</th>
<th class="red header">Email</th>
<th class="red header">Emergency contact</th>
<th class="red header">Category</th>
<th class="red header">ID card</th>
<th class="red header">Time in</th>
<th class="red header">Time out</th>
<th class="red header">Date of hire</th>
<th class="red header">Date of termination</th>
<th class="red header">Date of rehire</th>
<th class="red header">Reference number</th>
<th class="red header">Service limitation</th>
<th class="red header">Chair renter</th>
<th class="red header">Actions</th>
</tr>
</thead>
<tbody>
<?php
foreach($employee as $row)
{
echo '<tr>';
echo '<td>'.$row['id'].'</td>';
echo '<td>'.$row['emp_first_name'].'</td>';
echo '<td>'.$row['emp_last_name'].'</td>';
echo '<td>'.$row['emp_email_id'].'</td>';
echo '<td>'.$row['emp_emergency_contact'].'</td>';
echo '<td>'.$row['category'].'</td>';
echo '<td>'.$row['emp_id_card'].'</td>';
echo '<td>'.$row['emp_time_in'].'</td>';
echo '<td>'.$row['emp_time_out'].'</td>';
echo '<td>'.$row['emp_date_of_hire'].'</td>';
echo '<td>'.$row['emp_date_of_termination'].'</td>';
echo '<td>'.$row['emp_date_of_rehire'].'</td>';
echo '<td>'.$row['emp_reference_num'].'</td>';
echo '<td>'.$row['emp_service_limitation'].'</td>';
echo '<td>'.$row['chair_renter'].'</td>';
echo '<td class="crud-actions">
view & edit
delete
</td>';
echo '</tr>';
}
?>
</tbody>
</table>
Here i have a <a> to perform edit and delete option. This action passes the id that i choose to edit or delete. Instead of having separate buttons for each employee.I need to have a single button and allow the user to select employee.Like this image
The easiest solution would be to use JQuery to attach a selected class to the row which is clicked via something like:
$('tr').on('click', function () {
// Remove selection from other rows
$('tr.selected').removeClass('selected');
// Add selection to current row
$(this).addClass('selected');
});
That will allow you to place a 'cursor' onto a row, you'll want to style the rows with the selected class using CSS or something similar.
Now you can have a single Edit button and use something like the following code to handle the click event:
$('#edit').on('click', function () {
if ($('tr.selected').length() == 0) {
alert('Must select a row!');
} else {
// Handle 'edit' event by passing $(this) to whatever you need
// $(this) will be the currently selected row
}
});
This works since the $(this) object acts as a reference to the currently selected row.
I'm working on a php/mysql application and need to make the output of one column, one row an html link to another html page. Have not been able to find any relavant information. The "" needs to be the link. Thanks for any help.
<table id="display" style="width:800px;">
<tr>
<th width="40">ID</th>
<th width="70">Last</th>
<th width="70">First</th>
<th width="10">Middle</th>
<th width="70">Birth</th>
<th width="70">Death</th>
<th width="170">Notes</th>
<th width="100">Cemetery</th>
</tr>
<?
while($objResult = mysql_fetch_array($objQuery))
{
?>
<tr>
<td style='text-align:center;'><?=$objResult["id"];?></td>
<td style='text-align:center;'><?=$objResult["last"];?></td>
<td style='text-align:center;'><?=$objResult["first"];?></td>
<td style='text-align:center;'><?=$objResult["middle"];?></td>
<td style='text-align:center;'><?=$objResult["birth"];?></td>
<td style='text-align:center;'><?=$objResult["death"];?></td>
<td><?=$objResult["notes"];?></td>
<td style='text-align:center;'><?=$objResult["cemetery"];?></td>
</tr>
<?
}
?>
</table>