So the table should really look like this below when the user accesses the page:
Marks Per Answer Total Marks Marks Remaining
(blank text input) 4 4
(blank text input) 6 6
(disabled text input = 4 (same value as under Total Marks)) 4 0
My question is that how can both steps above be solved by changing the jquery below:
$(function() {
//alert("here");
var questions = $('#markstbl td[class*="_ans"]').length;
//disable single entry
for (var i=0;i<=questions;i++){
if($("[class*=q"+i+"_mark]").length ==1){
var t_marks = $("[class*=q"+i+"_ans]").html();
//alert(t_marks);
$("[class*=q"+i+"_mark]").val(t_marks).attr('readonly',true);
//$("[class*=q"+i+"_mark]").attr('readonly',true);
}
}
//find each question set and add listeners
for (var i=0;i<=questions;i++){
$('input[class*="q'+i+'"]').keyup(function(){
var cl = $(this).attr('class').split(" ")[1]
var questionno = cl.substring(cl.indexOf('q')+1,cl.indexOf('_'));
var tot_marks = $(".q"+questionno+"_ans_org").val();
//alert(tot_marks);
var ans_t=0;
$("[class*=q"+questionno+"_mark]").each(function(){
var num = (isNaN(parseInt($(this).val())))?0:parseInt($(this).val());
ans_t+=parseInt(num);
});
ans_t=tot_marks-ans_t;
//alert(ans_t);
//var fixedno = tot_marks;
var ans = ans_t;
var answerText='<strong>'+ans+'</strong>';
$(".q"+questionno+"_ans").val(ans);
$(".q"+questionno+"_ans_text").html(answerText);
});
}
});
Below is the dynamic HTML table:
<form id="Marks" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<table border='1' id='markstbl'>
<thead>
<tr>
<th class='questionth'>Question No.</th>
<th class='questionth'>Question</th>
<th class='answerth'>Answer</th>
<th class='answermarksth'>Marks per Answer</th>
<th class='totalmarksth'>Total Marks</th>
<th class='noofmarksth'>Marks Remaining</th>
</tr>
</thead>
<tbody>
<?php
$row_span = array_count_values($searchQuestionId);
$prev_ques = '';
foreach($searchQuestionId as $key=>$questionId){
?>
<tr class="questiontd">
<?php
if($questionId != $prev_ques){
?>
<td class="questionnumtd" name="numQuestion" rowspan="<?php echo$row_span[$questionId]?>"><?php echo$questionId?> <input type="hidden" name="q<?php echo$questionId?>_ans_org" class="q<?php echo$questionId?>_ans_org" value="<?php echo$searchMarks[$key]?>"><input type="hidden" name="q<?php echo$questionId?>_ans" class="q<?php echo$questionId?>_ans" value="<?php echo$searchMarks[$key]?>"></td>
<td class="questioncontenttd" rowspan="<?php echo$row_span[$questionId]?>"><?php echo$searchQuestionContent[$key]?> </td>
<?php
}
?>
<td class="answertd" name="answers[]"><?php echo$searchAnswer[$key]?></td>
<td class="answermarkstd">
<input class="individualMarks q<?php echo$questionId?>_mark_0" q_group="1" name="answerMarks[]" id="individualtext" type="text" />
</td>
<?php
if($questionId != $prev_ques){
?>
<td class="totalmarkstd" rowspan="<?php echo$row_span[$questionId]?>"><?php echo$totalMarks[$key]?></td>
<td class="noofmarkstd q<?php echo$questionId?>_ans_text" q_group="1" rowspan="<?php echo$row_span[$questionId]?>"><?php echo"<strong>".$searchMarks[$key]."</strong>"?></td>
<?php
}
?>
</tr>
<?php
$prev_ques = $questionId;
}
?>
</tbody>
</table>
</form>
At the moment in the jquery function I am trying to use the t_marks variable to display the value in the text input but nothing is displayed when I alert t_marks
You can use readonly instead of disabled
Change
$("[class*=q"+i+"_mark]").val(t_marks).attr("disabled","disabled");
To
$("[class*=q"+i+"_mark]").val(t_marks).attr('readonly',true);
Or You can just make it focus out when it get focus
<input type="text" id="myTxt" onfocus="$(this).blur()"/>
Related
I have a problem calculating the sum of the data from the database and from user input, can Y'all help me?
this is the PHP code
1st value (stok di database) is data from database, and 2nd value (stok fisik) is data from user input, and selisih is 2nd value - 1st value.
<div class="box-content nopadding" style="overflow: auto;">
<table width="400px" class="table table-hover table-nomargin table-bordered">
<thead>
<tr>
<th style="text-align: center; vertical-align:middle;" rowspan="2">No</th>
<th style="text-align: center; vertical-align:middle;" rowspan="2">Nama Barang</th>
<th style="text-align: center; vertical-align:middle;" colspan="2">Stok</th>
<th style="text-align: center; vertical-align:middle;" rowspan="2">Selisih</th>
</tr>
<tr>
<th style="text-align: center; vertical-align:middle;">Stok di Database</th>
<th style="text-align: center; vertical-align:middle;">Stok Fisik</th>
</tr>
</thead>
<tbody>
<?php
$data = $db->query("select id, nama_barang, stock from tbl_atk group by nama_barang");
for ($i = 0; $i < count($data); $i++) {
$no = $i + 1;
if ($no % 2 ==0) $bg ='#FBFBFB';
else $bg = '#FFFFFF';
// $total = 'result' - $data[$i]['stock'];
$tot_masuk = $tot_masuk + "stock_op";
$tot_keluar = $tot_keluar + $data[$i]['stock'];
$grand_tot = $tot_masuk - $tot_keluar;
?>
<tr>
<td style="text-align: center; vertical-align:middle;"><?php echo $no; ?></td>
<td><?php echo $data[$i]['nama_barang']?></td>
<td style="text-align: right;" class="so"><?php echo $data[$i]['stock']; ?></td>
<td><input type="number" class="form-control so" id="stock_op" name="stock_op" style="text-align: left"></td>
<td style="text-align: right; font-weight:bold;"><output class="result"></output></td>
</tr>
<?php
}
?>
<script src="../js/jquery.min.js"></script>
<script>
$(document).on('input','.so',function(){
var totalSum = 0;
var currentRow = $(this).closest('tr');
currentRow.find('.so').each(function(){
var inputVal = ($(this).is('input')) ? $(this).val() : parseInt($(this).html());
console.log(inputVal);
if($.isNumeric(inputVal)){
totalSum += parseFloat(inputVal);
}
});
currentRow.find('.result').val(totalSum);
});
</script>
<tr style="background-color:#eaeaea; font-weight:bold;">
<td style="text-align: center; vertical-align:middle;"></td>
<td style="text-align: right;">Selisih</td>
<td style="text-align: right;"><?php echo $tot_keluar; ?></td>
<td style="text-align: right;"><?php echo $tot_masuk; ?></td>
<td style="text-align: right;"><?php echo $grand_tot; ?></td>
</tr>
</tbody>
</table>
</div>
and this is the User Interface
Change the .so to so in the below input fields.
<td style="text-align: right;" class="form-control .so"><?php echo $data[$i]['stock']; ?></td>
<td><input type="number" class="form-control .so" id="stock_op" name="stock_op" style="text-align: left"></td>
Change id result to class result in below line
<td style="text-align: right; font-weight:bold;"><output id="result"></output></td>
New Update
Give a specific class to your stok fisik cell
<tr style="background-color:#eaeaea; font-weight:bold;">
<td style="text-align: center; vertical-align:middle;"></td>
<td style="text-align: right;">Selisih</td>
<td style="text-align: right;"><?php echo $tot_keluar; ?></td>
<td class="grandResult" style="text-align: right;"><?php echo $tot_masuk; ?></td>
<td style="text-align: right;"><?php echo $grand_tot; ?></td>
</tr>
change your jquery code to this
$(document).on('input','.so',function(){
var grandSum = 0;
var totalSum = 0;
var currentRow = $(this).closest('tr');
currentRow.find('.so').each(function(){
var inputVal = ($(this).is('input')) ? $(this).val() : parseInt($(this).html());
if($.isNumeric(inputVal)){
totalSum += parseFloat(inputVal);
}
});
currentRow.find('.result').val(totalSum);
$('input.so').each(function(){
var cVal = ($(this).is('input')) ? $(this).val() : parseInt($(this).html());
if($.isNumeric(cVal)){
grandSum += parseFloat(cVal);
}
});
$('.grandResult').val(grandSum);
});
Hello Fauzio, I have created a sample table with 3 columns,
1. t_id (ie. id )
2. t_name ( ie name barang)
3. t_value (ie stock di database)
I created a table and displayed the values of each rows in the table. all values from column t_value is added in java script array. then as user enters the value for that particular row.
On click of the button , the value for that particular row is picked from db_column and user column and the result is printed in the result column
<?php
$sql = "SELECT t_id,t_name, t_value FROM test_table";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
$main_array = array();
$count=0;
while($row = $result->fetch_assoc()) {?>
<tr>
<td class="no">
<?php echo $count;?>
</td>
<td class="name">
<?php echo $row["t_name"]."<br>";?>
</td>
<td class="db_value">
<?php
array_push($main_array,$row["t_value"]);
echo $row["t_value"]."<br>";?>
</td>
<td class="user_value">
<form method="post">
<input type="number" value="">
<button id="cal" type="button" class="<?php echo $count;?>"> Calculate </button>
</form>
</td>
<td class="result">
<input type="tel" name="" value="" id="result_<?php echo $count;?>">
</td>
</tr>
<?php $count++;}?>
</tbody>
</table>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
var main_array = new Array();
<?php foreach($main_array as $key => $val){ ?>
main_array.push('<?php echo $val; ?>');
<?php } ?>
jQuery('#cal').on('click', function() {
id = jQuery(this).attr('class');
value_1st = main_array[id];
value_2nd = jQuery(jQuery(this).closest('.user_value')).find('input[type="number"]').val();
result = value_1st + value_2nd;
input_field = jQuery(jQuery(jQuery(this).closest('.user_value')).next()).find('#result_' + id);
input_field.val(result);
});
});
</script>
I am creating an HTML form that includes a table that you can dynamically add rows to. Whenever data is entered in multiple rows and I hit submit, it takes me to the confirmation page where only one row of data from the table is displayed. How can I display multiple rows?
HTML (Original Form):
<p>
<div id="rebate_400p">
<strong>400P</strong><br>
</div>
<table id="tables" cellspacing="5">
<tr align="center" id="table_titles">
<td>Tier</td>
<td>Purchase Minimum</td>
<td>Multiplier</td>
<td>UOM</td>
<td>Retro</td>
<td>Guaranteed</td>
<td>Paid</td>
<td>Delete?</td>
<td>Add Row</td>
</tr>
<tr>
<td align="center" name="tier">1</td>
<td><input type="text" id="rebate_tables" name="purchase_minimum"></td>
<td><input type="text" id="rebate_tables" name="multiplier"></td>
<td><input type="text" id="rebate_tables" name="uom"></td>
<td><input type="text" id="rebate_tables" name="retro"></td>
<td><input type="text" id="rebate_tables" name="guaranteed"></td>
<td><input type="text" id="rebate_tables" name="paid"></td>
<td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)"></td>
<td><input type="button" id="addmoreRowsbutton" value="Add row" onclick="insRow()"></td>
</tr>
</table>
</p>
HTML/PHP (Confirmation Page):
<p>
<div class="border1">
<div id="rebate_400p">
<strong>400P</strong><br>
</div>
<table id="table" cellspacing="20">
<tr align="center" id="table_row">
<td>Tier</td>
<td>Purchase Minimum</td>
<td>Multiplier</td>
<td>UOM</td>
<td>Retro</td>
<td>Guaranteed</td>
<td>Paid</td>
</tr>
<tr align="center">
<td>1</td>
<td><?php echo $_POST['purchase_minimum']; ?></td>
<td><?php echo $_POST['multiplier']; ?></td>
<td><?php echo $_POST['uom']; ?></td>
<td><?php echo $_POST['retro']; ?></td>
<td><?php echo $_POST['guaranteed']; ?></td>
<td><?php echo $_POST['paid']; ?></td>
</tr>
</table>
</div>
</p>
Javascript (Dynamically adds rows on original form page):
function insRow()
{
console.log('hi');
var x=document.getElementById('tables');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
var inputs = new_row.querySelectorAll('input[type=text]');
for(var i=0;i<inputs.length;i++)
inputs[i].value='';
x.appendChild(new_row)
}
Okay. So, your problem is that your inputs have the same name, so as they're getting passed in $_POST, they are overwriting each other. Also, even if this weren't the case, there's no way to avoid a PHP loop on your confirmation page.
In your JS function:
function insRow()
{
var x=document.getElementById('tables');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
var inputs = new_row.querySelectorAll('input[type=text]');
for(var i=0;i<inputs.length;i++)
{
inputs[i].value='';
inputs[i].name='rows[' + len + '][' + inputs[i].dataset.name + ']';
}
x.appendChild(new_row)
}
Here, when we append the new row, we're giving the inputs a new name, so they don't get overwritten when passed.
In your HTML form:
<tr>
<td align="center" name="tier">1</td>
<td><input type="text" id="rebate_tables" data-name="purchase_minimum" name="rows[0][purchase_minimum]"></td>
<td><input type="text" id="rebate_tables" data-name="multiplier" name="rows[0][multiplier]"></td>
<td><input type="text" id="rebate_tables" data-name="uom" name="rows[0][uom]"></td>
<td><input type="text" id="rebate_tables" data-name="retro" name="rows[0][retro]"></td>
<td><input type="text" id="rebate_tables" data-name="guaranteed" name="rows[0][guaranteed]"></td>
<td><input type="text" id="rebate_tables" data-name="paid" name="rows[0][paid]"></td>
<td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)"></td>
<td><input type="button" id="addmoreRowsbutton" value="Add row" onclick="insRow()"></td>
</tr>
We're changing your inputs into an array, so that multiple values can be passed.
On your confirmation page:
<?php if(isset($_POST['rows'])): ?>
<table id="table" cellspacing="20">
<tr align="center" id="table_row">
<td>Tier</td>
<td>Purchase Minimum</td>
<td>Multiplier</td>
<td>UOM</td>
<td>Retro</td>
<td>Guaranteed</td>
<td>Paid</td>
</tr>
<?php
$count = 1;
foreach($_POST['rows'] as $row):
?>
<tr align="center">
<td><?php echo $count; ?></td>
<td><?php echo $row['purchase_minimum']; ?></td>
<td><?php echo $row['multiplier']; ?></td>
<td><?php echo $row['uom']; ?></td>
<td><?php echo $row['retro']; ?></td>
<td><?php echo $row['guaranteed']; ?></td>
<td><?php echo $row['paid']; ?></td>
</tr>
<?php
$count++;
endforeach;
?>
</table>
<?php endif; ?>
We're just looping through each of the rows.
I'm retreiving the "In Stock" data using MySQL
<table class="table table-striped table-bordered table-hover results table-fixed">
<thead>
<tr>
<th class="text-center">#</th>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
<th>In Stock</th>
<th style="width: 20%">Quantity</th>
</tr>
<tr class="warning no-result">
<td colspan="8"><i class="fa fa-warning"></i> No Product Found</td>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT * FROM products";
$exec = mysqli_query($connection, $query);
while ($row = mysqli_fetch_array($exec)) {
$product_id = $row['product_id'];
$product_name = $row['product_name'];
$description = $row['description'];
$product_quantity = $row['quantity'];
$product_price = $row['sell_price'];
?>
<tr>
<td class="text-center"><?php echo $product_id; ?>
<input type="hidden" name="product_id[]" value="<?php echo $product_id; ?>">
</td>
<td><?php echo $product_name; ?></td>
<td><?php echo $description; ?></td>
<td><?php echo $product_price; ?></td>
<td><input type="number" value="<?php echo $product_quantity; ?>" id="qtyResult" disabled></td>
<td><input type="number" name="qtyBuy[]" id="qtyBuy" onkeyup="updateStock()"></td>
</tr>
<?php } ?>
</tbody>
</table>
I want to update the In Stock field automatically when I type a number on the quantity field.
The "San Mig Light's" stock is 500 but when I type a number on quantity field, the stock changes to the last record on the table which is 45.
The rest of the row doesn't also work except for the first one.
Here is my jQuery script.
<script>
function updateStock() {
var inputQty = $('#qtyBuy').val();
var inStock = "<?php echo $product_quantity; ?>"
$('#qtyResult').val(inStock - inputQty);
}
</script>
Table
Try to pass to your function the this and event keywords like:
<td><input type="number" name="qtyBuy[]" id="qtyBuy" onkeyup="updateStock(this, event)"></td>
Because the ID must be unique, try to appent a number like: qtyBuy1, qtyBuy2...
And to select these fields you can: find('input[id^="qtyResult"]') : select input field where the id starts with the string "qtyResult".
So, in your updateStock you can use the parameters to refers to the current values like:
function updateStock(obj, event) {
var inputQty = obj.value;
var inStock = "<?php echo $product_quantity; ?>";
$(obj).closest('tr').find('input[id^="qtyResult"]').val(inStock - inputQty);
}
The snippet:
function updateStock(obj, event) {
var inputQty = obj.value;
var inStock = $(obj).closest('tr').find('input[id^="qtyResult"]').val();
var av = $(obj).closest('tr').find('input[id^="qtyResult"]').data('savedValue');
if (av == undefined) {
$(obj).closest('tr').find('input[id^="qtyResult"]').data('savedValue', inStock);
av = inStock;
}
inStock = av;
console.log(av + ' / ' + inStock + ' / ' + inputQty);
$(obj).closest('tr').find('input[id^="qtyResult"]').val(inStock - inputQty);
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table class="table table-striped table-bordered table-hover results table-fixed">
<thead>
<tr>
<th class="text-center">#</th>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
<th>In Stock</th>
<th style="width: 20%">Quantity</th>
</tr>
<tr class="warning no-result">
<td colspan="8"><i class="fa fa-warning"></i> No Product Found</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">product_id1
<input type="hidden" name="product_id[]" value="1">
</td>
<td>product name1</td>
<td>description1</td>
<td>product_price1</td>
<td><input type="number" value="1" id="qtyResult1" disabled></td>
<td><input type="number" name="qtyBuy[]" id="qtyBuy1" onkeyup="updateStock(this, event)"></td>
</tr>
<tr>
<td class="text-center">product_id2
<input type="hidden" name="product_id[]" value="<?php echo $product_id; ?>">
</td>
<td>product_name2</td>
<td>description2</td>
<td>product_price2</td>
<td><input type="number" value="1" id="qtyResult2" disabled></td>
<td><input type="number" name="qtyBuy[]" id="qtyBuy2" onkeyup="updateStock(this, event)"></td>
</tr>
</tbody>
</table>
jQuery 3.4.1
Specify this in your js script to get the correct row.
$('.myclickedclass').click(function() {
var id=$(this).data("mydataid"); // This is the most important line
$.ajax({
url:"myserverfile.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data) {
// Whatever
}
});
});
i'm trying to get next rows in my multiple table using ajax and php. my concept is that on changing my year and type selection, table has to re_appears.
if i change type as year third table hides and if semester third table appears. it works fine,. but if i change no of year table rows also have to added according to that.
for example if no of years 4 means then i have to get fou rows in each table.
i dono where i struck here?
my code:
<table>
<tr><td><label><span class="required">*</span>No of Year</label></td>
<td>
<select name="no_of_year" id="no_no_year" onchange="change_row()">
<option value="">--Year--</option>
<?php for($i=1;$i<=$year;$i++) { ?>
<option value="<?php echo $i; ?>" <?php if($_POST['no_of_year']==$i) { echo "selected"; } ?>><?php echo $i; ?></option>
<?php } ?>
</select> <span class="required"><?php echo $msg_year;?></span>
</td>
</tr>
<tr> <td><label><span class="required">*</span>Type</label> </td>
<td><select name="type" onchange="change_col(this.value);"><option value="">--Type--</option> <option value="2" <?php if($_POST['type']=='2') { echo "selected"; } ?>>Semester</option> <option value="1" <?php if($_POST['type']== '1') { echo "selected"; } ?>> Year </option> </select>
<span class="required"><?php echo $msg_type;?></span></td></tr>
<tr> <td><label><span class="required">*</span>Fees Per Year/Semester:</label> </td> </tr>
<tr>
<table class="fees_dets" border="1px solid" cellpadding="1" cellspacing="1">
<tr>
<td>
<table id="year_tab" cellpadding="1" cellspacing="1">
<tr style="height:37px;"> <th > Year </th> </tr>
<tr> <td align="center"> <input type="text" name="year1" value="1" /> </td> </tr>
</table>
</td>
<td>
<table id="sem1_tab" cellpadding="1" cellspacing="1">
<tr> <th colspan="2"> Semester-1 </th> </tr>
<tr> <th> Due date</th> <th > Fees</th> </tr>
<tr> <td > <input type="text" name="y1_fees1" /> </td><td> <input type="text" name="y1_due1" /> </td> </tr>
</table>
</td>
<td id="donshow">
<table id="sem2_tab" cellpadding="1" cellspacing="1">
<tr> <th colspan="2" > Semester-2</th> </tr>
<tr> <th> Due date</th> <th > Fees</th> </tr>
<tr> <td > <input type="text" name="y1_fees2" /> </td><td > <input type="text" name="y1_due2" /> </td> </tr>
</table>
</td>
</tr>
</table>
</tr>
</table>
script:
<script type="text/javascript">
function change_col(type)
{
if(type == 1 ) {
document.getElementById("donshow").style.display = 'none';
}
else if(type == 2 ) {
document.getElementById("donshow").style.display = 'block';
}
}
function change_row(year)
{
$.ajax({
type: 'POST',
url: 'ajax_redirect.php',
data:{
type : 'year_tab',
year : year
},
success: function(msg){
//alert(msg);
document.getElementByClassName('fees_dets').innerHTML = msg;
}
});
}
</script>
ajax_redirect.php
<?
$n= $_POST['year'];
if($_POST['type'] == 'year_tab')
{
for($i=2;$i<=$n;$i++)
{
?>
<table class="fees_dets" border="1px solid" cellpadding="1" cellspacing="1">
<tr>
<td>
<table id="year_tab" cellpadding="1" cellspacing="1">
<tr style="height:37px;"> <th > Year </th> </tr>
<tr> <td align="center"> <input type="text" name="year<?=$i?>" value="<?=$i?>" /> </td> </tr>
</table>
</td>
<td>
<table id="sem1_tab" cellpadding="1" cellspacing="1">
<tr> <th colspan="2"> Semester-1 </th> </tr>
<tr> <th> Due date</th> <th > Fees</th> </tr>
<tr> <td > <input type="text" name="y<?=$i?>_fees1" /> </td><td> <input type="text" name="y<?=$i?>_due1" /> </td> </tr>
</table>
</td>
<td id="donshow">
<table id="sem2_tab" cellpadding="1" cellspacing="1">
<tr> <th colspan="2" > Semester-2</th> </tr>
<tr> <th> Due date</th> <th > Fees</th> </tr>
<tr> <td > <input type="text" name="y<?=$i?>_fees2" /> </td><td > <input type="text" name="y<?=$i?>_due2" /> </td> </tr>
</table>
</td>
</tr>
</table>
<? }
}
?>
can anyone help?
You need to hit the ajax_redirect.php every time you change the 'no. of years', your ajax_redirect.php must execute the select query to associated table with changing where clause. Whatever HTML element you are using, must be replaced with new value(s) accordingly.
NOTE: Here I assume you are fetching data from DB thats why I have
asked you to use select query on asssociated table with changing where
clause.
UPDATE: Your Problem is with document.getElementByClassName('fees_dets') because there no such function as getElementByClassName... you should your table in a DIV with a attribute ID and use getElementById
Anyone have any idea why my page numbers are not listing inside of the pagination div? I'm using the tablesorter.pager plugin.
<?php
session_start();
require("../inc/dbconfig.php");
require("../inc/global_functions.php");
// find out how many rows are in the table
$query = "SELECT CONCAT_WS(' ',firstName,lastName) AS name, username, emailAddress, userID FROM manager_users WHERE statusID != 4";
$result = mysqli_query($dbc,$query);
$fileName = basename($_SERVER['PHP_SELF']);
$pageName = "User Accounts";
$userData = $_SESSION['user_data'];
$userID = $userData['userID'];
?>
<script type="text/javascript">
$(document).ready(function() {
$('a.bt_green').click(function(e) {
e.preventDefault();
$('div.right_content').load('forms/addnew/' + $(this).attr('id'));
});
$('#usersPageList').tablesorter().tablesorterPager({container:$('#pagination'),cssPageLinks:'a.pageLink', positionFixed: false});
$('table tr').click(function() {
checkBox = $(this).children('td').children('input[type=checkbox]');
if(checkBox.attr('checked'))
checkBox.removeAttr('checked');
else
checkBox.attr('checked', 'checked');
});
$('.ask').jConfirmAction();
$('.ask2').jConfirmAction();
});
</script>
<h2>User Accounts</h2>
<table id="usersPageList" class="rounded-corner">
<thead>
<tr>
<th scope="col" class="rounded-first"></th>
<th scope="col" class="rounded">Name</th>
<th scope="col" class="rounded">Email Address</th>
<th scope="col" class="rounded">Username</th>
<th scope="col" class="rounded">Edit</th>
<th scope="col" class="rounded-last">Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" class="rounded-foot-left"><em>Displays all of the registered and verified users!</em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<?php
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
echo "<tr>";
echo "<td><input type=\"checkbox\" name=\"users[]\" value=\"".$row['userID']."\"/></td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['emailAddress']."</td>";
echo "<td>".$row['username']."</td>";
echo "<td><img src=\"images/user_edit.png\" alt=\"\" title=\"\" border=\"0\" /></td>";
echo "<td>";
if (($row['userID'] !== '10000') && ($row['userID'] !== $userID)){
echo "<img src=\"images/trash.png\" class=\"delete\" alt=\"\" title=\"\" border=\"0\" id=\"".$row['userID']."\" />";
}
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<div id="pagination"></div>
<?php
addRemove($fileName,$pageName);
?>
<input type="hidden" name="myhiddenPageToken" id="myhiddenPageToken" value="useraccounts" />
EDIT POST:
<script type="text/javascript">
$(document).ready(function() {
$('a.bt_green').click(function(e) {
e.preventDefault();
$('div.right_content').load('forms/addnew/' + $(this).attr('id'));
});
$('#usersPageList').tablesorter().tablesorterPager({container:$('#pagination'),cssPageLinks:'a.pageLink', positionFixed: false});
$('table tr').click(function() {
checkBox = $(this).children('td').children('input[type=checkbox]');
if(checkBox.attr('checked'))
checkBox.removeAttr('checked');
else
checkBox.attr('checked', 'checked');
});
$('.ask').jConfirmAction();
$('.ask2').jConfirmAction();
});
</script>
<h2>User Accounts</h2>
<table id="usersPageList" class="rounded-corner">
<thead>
<tr>
<th scope="col" class="rounded-first"></th>
<th scope="col" class="rounded">Name</th>
<th scope="col" class="rounded">Email Address</th>
<th scope="col" class="rounded">Username</th>
<th scope="col" class="rounded">Edit</th>
<th scope="col" class="rounded-last">Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" class="rounded-foot-left"><em>Displays all of the registered and verified users!</em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<tr><td><input type="checkbox" name="users[]" value="10000"/></td><td>KOW Management</td><td>kowmanagement#kansasoutlawwrestling.com</td><td>Administrator</td><td><img src="images/user_edit.png" alt="" title="" border="0" /></td><td></td></tr><tr><td><input type="checkbox" name="users[]" value="10001"/></td><td>Jeff Davidson</td><td>xtremer360#yahoo.com</td><td>xtremer360</td><td><img src="images/user_edit.png" alt="" title="" border="0" /></td><td></td></tr>
</tbody>
</table>
<div id="pagination"></div>
<span class="bt_green_lft"></span><strong>Add New User Accounts</strong><span class="bt_green_r"></span><span class="bt_blue_lft"></span><strong>View all User Accounts</strong><span class="bt_blue_r"></span><span class="bt_red_lft"></span><strong>Delete User Accounts</strong><span class="bt_red_r"></span><input type="hidden" name="myhiddenPageToken" id="myhiddenPageToken" value="useraccounts" />
For the tablesorterPager plugin to work in your code I had to add a pagination form myself. I changed the pagination div to this, copied from the documentation:
<div id="pagination">
<form>
<img src="../addons/pager/icons/first.png" class="first"/>
<img src="../addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="../addons/pager/icons/next.png" class="next"/>
<img src="../addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
The tablesorterPager now works, and also fixes the tablesorter which breaks if tablesorterPager can't find the form.
I can't see any reference in jquery.tablesorter.pager.js to generate the form itself, so I guess you'll have to create it server-side based on the number of results in the table, and the number of results you'd like per page.
Hope that helps