Tablesorter will not display sortable headers - javascript

I've been playing with this code for the past 2 hours. I simply cannot find the error. With the code below, the table header and body display, but the headers are not sortable. I've tried various incarnations of the script code, but to no avail. What am I missing?
<!DOCTYPE html>
<head>
<script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./Mottie-tablesorter-c1ce076/js/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("table").tablesorter();
}
);
</script>
</head>
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "SECRET", "SECRET", "SECRET");
// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Attempt select query execution
$sql = "SELECT * FROM persons";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
echo "<table class=\"tablesorter\">";
echo "<thead>";
echo "<tr>";
echo "<th>First Name</th>";
echo "<th>Last Name</th>";
echo "<th>Email</th>";
echo "<th>FFID</th>";
echo "<th>Street</th>";
echo "<th>City</th>";
echo "<th>State</th>";
echo "<th>Zip</th>";
echo "<th>Home Fire Dept</th>";
echo "<th>Shirt Size</th>";
echo "<th>Additional Shirts</th>";
echo "<th>Friday Class</th>";
echo "<th>Saturday Class</th>";
echo "<th>Sunday Class</th>";
echo "</tr>";
echo "</thead>";
while($row = mysqli_fetch_array($result)){
echo "<tbody><tr>";
echo "<td>" . $row['first_name'] . "</td>";
echo "<td>" . $row['last_name'] . "</td>";
echo "<td>" . $row['email_address'] . "</td>";
echo "<td>" . $row['ffid_num'] . "</td>";
echo "<td>" . $row['address_street'] . "</td>";
echo "<td>" . $row['address_city'] . "</td>";
echo "<td>" . $row['address_state'] . "</td>";
echo "<td>" . $row['address_zip'] . "</td>";
echo "<td>" . $row['fire_dept'] . "</td>";
echo "<td>" . $row['wants_tshirt'] . "</td>";
echo "<td>" . $row['shirt_size'] . "</td>";
echo "<td>" . $row['additional_shirts'] . "</td>";
echo "<td>" . $row['friday_class'] . "</td>";
echo "<td>" . $row['saturday_class'] . "</td>";
echo "<td>" . $row['sunday_class'] . "</td>";
echo "</tr></tbody>";
}
echo "</table>";
// Close result set
mysqli_free_result($result);
} else{
echo "No records matching your query were found.";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>
</html>

Just add and outside the while loop.
echo "</thead><tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['first_name'] . "</td>";
echo "<td>" . $row['last_name'] . "</td>";
echo "<td>" . $row['email_address'] . "</td>";
echo "<td>" . $row['ffid_num'] . "</td>";
echo "<td>" . $row['address_street'] . "</td>";
echo "<td>" . $row['address_city'] . "</td>";
echo "<td>" . $row['address_state'] . "</td>";
echo "<td>" . $row['address_zip'] . "</td>";
echo "<td>" . $row['fire_dept'] . "</td>";
echo "<td>" . $row['wants_tshirt'] . "</td>";
echo "<td>" . $row['shirt_size'] . "</td>";
echo "<td>" . $row['additional_shirts'] . "</td>";
echo "<td>" . $row['friday_class'] . "</td>";
echo "<td>" . $row['saturday_class'] . "</td>";
echo "<td>" . $row['sunday_class'] . "</td>";
echo "</tr>";
}
echo "</tbody></table>";

I have had a similar problem. It seems the style is critically important as well.
I looked at the source of the example e.g. http://tablesorter.com/docs/example-trigger-sort.html and the only thing missing was the style.
In my case I added:
< link href="http://mottie.github.io/tablesorter/css/theme.default.css" rel="stylesheet" >
and the columns became sortable.
The critical part of the style is I think that it includes the buttons for sorting:
.tablesorter-default thead .headerSortUp,
.tablesorter-default thead .tablesorter-headerSortUp,
.tablesorter-default thead .tablesorter-headerAsc {
background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
border-bottom: #000 2px solid;
}
.tablesorter-default thead .headerSortDown,
.tablesorter-default thead .tablesorter-headerSortDown,
.tablesorter-default thead .tablesorter-headerDesc {
background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
border-bottom: #000 2px solid;
}

Related

How to hide column if roles not 'admin'

How to hide the Read, Update and Delete button column from other user. Only user with 'admin' roles can see the button. Every users has been assign either 'admin' or 'user' roles in database.
can hide the button from other user which not admin
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['address'] . "</td>";
echo "<td>" . $row['salary'] . "</td>";
echo "<td>";
echo '<span class="fa fa-eye"></span>';
echo '<span class="fa fa-pencil"></span>';
echo '<span class="fa fa-trash"></span>';
echo "</td>";
echo "</tr>";
if you already save the user role in the database, you can check the condition using php like below
while($row = mysqli_fetch_array($result)){
$userRole = $row['role'];
$traw = "<tr>";
$traw .="<td>" . $row['id'] . "</td>";
$traw .="<td>" . $row['name'] . "</td>";
$traw .="<td>" . $row['address'] . "</td>";
$traw .="<td>" . $row['salary'] . "</td>";
$traw .="<td >";
if($userRole == 'admin') {
$traw .='<span class="fa fa-eye"></span>':'';
$traw .='<span class="fa fa-pencil"></span>';
$traw .='<span class="fa fa-trash"></span>';
}
$traw .= "</td>";
$traw .="</tr>";
echo $traw;

How to send php Select box value?

The following code will output as shown in the attached picture.
Select the value of the Select box in test16 and press the "test19" button, the value of the Select box you want to modify.I want to make the value delivered to php.
I want to know how to deliver the value of the select box in php and how to receive the value delivered.
<?php
if($result = mysqli_query($link, $sql)){
$test = 'test';
if(mysqli_num_rows($result) > 0){
echo "<table id='datatable1' class = table style = 'width: 100%; background-color:#dee2e6'>";
echo "<thead >";
echo "<tr>";
echo "<th>No</th>";
echo "<th>test1</th>";
echo "<th>test2</th>";
echo "<th>test3</th>";
echo "<th>test4</th>";
echo "<th>test5</th>";
echo "<th>test6</th>";
echo "<th>test7</th>";
echo "<th>test8</th>";
echo "<th>test9</th>";
echo "<th>test10</th>";
echo "<th>test11</th>";
echo "<th>test12</th>";
echo "<th>test13</th>";
echo "<th>test14</th>";
echo "<th>test15</th>";
echo "<th>test16</th>";
echo "<th>test17</th>";
echo "<th>test18</th>";
echo "<th>test19</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['chart_num'] . "</td>";
echo "<td>" . $row['chart_name'] . "</td>";
echo "<td>" . $row['visit'] . "</td>";
echo "<td>" . number_format($row['total_medical_bills']) . "</td>";
echo "<td>" . number_format($row['total_amount']) . "</td>";
echo "<td>" . number_format($row['amount_asked']) . "</td>";
echo "<td style = 'font-weight: bold'>" . number_format($row['medical_bills_payment']) . "</td>";
echo "<td style = 'font-weight: bold'>" . number_format($row['personal_liability_amount']) . "</td>";
echo "<td style = 'font-weight: bold'>" . number_format($row['non_payment']) . "</td>";
echo "<td>" . $row['insurance_division'] . "</td>";
echo "<td>" . $row['division'] . "</td>";
echo "<td>" . number_format($row['cash_amount_received']) . "</td>";
echo "<td>" . number_format($row['card_amount_received']) . "</td>";
echo "<td style = 'font-weight: bold'>" . number_format($row['treatment_fees_difference']) . "</td>";
echo "<td>" . $row['treatment_fees_check_division'] . "</td>";
echo "<td><select name='". $test ."'>";
echo "<option value='". $test ."'>First</option>";
echo "<option value='". $test ."'>Second</option>";
echo "<option value='". $test ."'>Third</option>";
echo "</select></td>";
echo "<td>" . $row['treatment_fees_check'] . "</td>";
echo "<td>" . $row['treatment_fees_check_modify'] . "</td>";
echo "<td>";
if($row['medical_bills_payment'] == $row['personal_liability_amount'] + $row['non_payment']){
echo "수정불가";
}
else{
echo "<a href='treatment_fees_check_update.php?id=". $row['id'] ." title='수정' data-toggle='tooltip'><span class='icon ion-edit'></span></a>";
}
echo "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
mysqli_free_result($result);
}
}
else{
echo "ERROR: Could not able to execute $sql2. " . mysqli_error($link);
}
// Close connection
mysqli_close($link);
?>
Since you can have a lot of select boxes, you will need give them an ID so we can reference the respective field. Let's add/change your code as below:
$rowCount=0;
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
...
echo "<td><select id='MySelect".$rowCount."' name='". $test ."'>";
echo "<option value='". $test ."'>First</option>";
echo "<option value='". $test ."'>Second</option>";
echo "<option value='". $test ."'>Third</option>";
echo "</select></td>";
...
echo "<td>";
if($row['medical_bills_payment'] == $row['personal_liability_amount'] + $row['non_payment']){
echo "수정불가";
}
else{
echo '<span class="icon ion-edit"></span>';
}
echo "</td>";
$rowCount++;
EDIT: I missed to add $rowCount++; before close while block. Sorry.
At the end of your document, before close body tag you add:
<script>
function GetMySelectValue(select,objId){
document.location.href= "yoursite.com/treatment_fees_check_update.php?id="+objId+"&myselect="+document.getElementById(select).value;
}
</script>
In treatment_fees_check_update.php you get id and select value:
$rowid=$_GET['id'];
$myselect=$_GET['myselect'];
Hope it can help you.
The principles for what you need is to asign a id to each one of the options in the dropdown, so you can send the id of tha specific value, compare with that same id in the database if exists then you will have the column with the value that you need to modify in the database, but first bring and add the proper id of each one of the options in the select.

Datatable reorder issue

I'm having an issue with the following code. What I'm trying to do is to populate a modal form with data from the row on which you pressed the edit button.
The script works fine until I try to reorder the table: when the table is reordered the script is getting the information of the pre-reordered table.
This is the script that get called when the edit button get clicked:
$(document).ready( function () {
//create datatable
//declaring a variable without var makes it global
table_movimenti = $('#movimenti').DataTable();
$('#movimenti table tbody tr td').on('click', function () {
$("#transaction_ID").val($(this).find("td:eq(6)").attr('id'));
$("#data_cont").val($(this).find("td:eq(0)").text());
$("#data_valuta").val($(this).find("td:eq(1)").text());
$("#importo").val($(this).find("td:eq(2)").text());
$("#divisa").val($(this).find("td:eq(3)").text());
$("#causale").val($(this).find("td:eq(4)").text());
var categoria=$.trim($(this).find("td:eq(5)").text());
$("#categoria option").each(function() {
if($(this).text() == categoria){
//$(this).prop("selected", true);
$(this).attr("selected", "selected");
return;
}
});
});
This is the table:
<?php
echo "<table id='movimenti' class='table table-bordered table-striped table no-margin'>";
echo "<thead>";
echo "<tr>";
echo "<th>Data contabile</th>";
echo "<th>Data valuta</th>";
echo "<th>Importo</th>";
echo "<th>Divisa</th>";
echo "<th>Causale</th>";
echo "<th>Categoria</th>";
echo "<th>Edit</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr class='table_row'>";
echo " <td>" . $row['Data_cont'] . "</td>";
echo " <td>" . $row['Data_valuta'] . "</td>";
echo " <td>" . $row['Importo'] . "</td>";
echo " <td>" . $row['Divisa'] . "</td>";
echo " <td>" . $row['Causale'] . "</td>";
echo " <td>";
foreach ($categories as $value){
if ($value['ID'] == $row['Categoria']){
echo " <span class='label label-success'>";
echo "". $value['Descrizione'] ."";
echo "<input type='text' class='label label-success' id='categoria' name='categoria' value='". $value['Descrizione'] ."'/>";
echo "</span></td>";
}
}
In the end I've completely change the approach and now I'm building my table using ajax option in datatable.
In this way I'm able to retrieve all the data in the row using the same ajax option.

JQuery: How to pass PHP data from div to div

As for my HTML code is
<div class="right">
<h2>Product Detail</h2>
<div id="righttop"></div>
<button id="Add">Add</button>
</div>
<div class="rightbot">
<h2>Shopping Car</h2>
<div id="rightbot"></div>
</div>
And the PHP is
mysqli_select_db($con,"products");
$sql="SELECT product_id, product_name, unit_price, unit_quantity, in_stock FROM products WHERE product_id = '".$productid."'";
$result = mysqli_query($con,$sql);
echo "<table>";
echo "<th>Product Name</th>";
echo "<th>Unit Price</th>";
echo "<th>Unit Quantity</th>";
echo "<th>In Stock</th>";
while($row = mysqli_fetch_array($result)) {
echo "<tr id='detail'>";
echo "<td>" . $row['product_name'] . "</td>";
echo "<td>" . $row['unit_price'] . "</td>";
echo "<td>" . $row['unit_quantity'] . "</td>";
echo "<td>" . $row['in_stock'] . "</td>";
echo "</tr>";
}
echo "</table>";
echo $_POST['detail'];
mysqli_close($con);
?>
div#righttop is changed by another button.
How can I pass the current content from div#righttop to div#rightbot?
If you meant to transfer the contents of righttop to rightbot, here is a way. On click of the button, before changing anything in righttop, do this:
$('#rightbot').html($('#righttop').html());

Expand/Collapse table row Javascript works wrongly

I'm using this code to expand database table row to reveal more information about the item, but it does exactly the opposite.
$("td span.expand").click(function() {
$(this).parents("tr.main").nextUntil("tr.main"). toggle();
});
When I open the table all rows that must be hidden are being shown and if I click on any main row it will hide that rows.
How to invert this?
Here's part of code I use for table (I know, it's messy):
echo '<table border="1" class="tabula">
<tr class="main">
<th width="30px">Nr.</th>
<th width="75px">Mašīnas numurs</th>
<th width="75px">Reģistrācijas numurs</th>
<th width="75px">Marka / Modelis</th>
<th width="75px">ID</th>
</tr>';
//Ieraksta datus tabulā
while($row = mysql_fetch_array($query))
{
echo "<tr class='main'>";
echo "<td width='30px'>" . $row['nr'] . "</td>";
echo "<td width='75px'>" . $row['numurs'] . "</td>";
echo "<td width='75px'><span class='expand'>" . $row['regnr'] . "</span></td>";
echo "<td>" . $row['modelis'] . "</td>";
echo "<td>" . $row['apzim'] . "</td>";
echo "</tr>";
echo "<tr class='hidden'>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "<td>text</td>";
echo "</tr>";
}
echo "</table>";
echo "<br>";
Try using CSS in your file and include the following:
<style>
.expand
{
display:none;
}
</style>
I use a jQuery-based toggle script, and that's what I used when I had a similar problem such as this.
You may need to use .hidden { display:none; } instead.

Categories