I have the problem to fetch the as per number of rows at a time in jQuery DataTables with Bootstrap. Firstly, my code below fetches whole data from the database and starts the pagination.
But I want data loaded for one page at a time.
My PHP code is:
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th> Name</th>
<th>category</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<?php foreach ($datastat as $row) {
?>
<tr>
<td><?php echo $row['fname'];?> <?php echo $row['mname'];?> <?php echo $row['lname'];?></a></td>
<td><?php echo $row['category'];?></td>
<td><?php echo $row['location'];?></td>
</tr>
<?php }?>
</tbody>
<tfoot>
<tr>
<th> Name</th>
<th>category</th>
<th>Location</th>
</tr>
</tfoot>
</table>
My javascript code is:
$(function() {
$('#example1').dataTable({
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"pageLength": 10
});
});
You need to implement server-side processing in order to retrieve one page at a time from the server, see this example.
Luckily DataTables distribution includes PHP class ssp.class.php and sample code that makes it fairly easy to use with PHP.
Related
I would like to create a web page that is a giant table (a ranking table) with millions of rows.
The table attributes should be the row number, a little image, a username and another number (indicating a score).
When loading the page it should instantly center and starting to load the table from the row associated to the currently logged in user.
So here are my two questions:
What is the best way to center the starting viewport on the current logged in user row?
If an user is in a very low position he would have to wait until all the upper rows are ready, so what should i do to optimize the loading times? Maybe there is a way to load only the rows that are near the viewport of the user?
Here's an example of what I was trying to do (using Bootstrap for the table classes). I was simply putting the id="scrollpoint" on the current username row, so it is centered when i go to table.php#scrollpoint, this surely is not a nice solution, and I don't know at all how to solve the slow loading problems:
<table class="table">
<thead>
<tr>
<th class="sticky-top bg-success" scope="col">#</th>
<th class="sticky-top bg-success" scope="col">IMG</th>
<th class="sticky-top bg-success" scope="col">USERNAME</th>
<th class="sticky-top bg-success" scope="col">POINTS</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
while ($i <= $num_rows) {
if ($_SESSION['username'] == $row['username']) {
?>
<tr class="table-light" id="scrollpoint">
<th scope="row"><?php echo $i; ?></th>
<td><img src="img.png"></td>
<td><?php echo $row['username'] ?></td>
<td><?php echo $row['points'] ?></td>
</tr>
<?php } else { ?>
<tr>
<th scope="row"><?php echo $i; ?></th>
<td><img src="img.png"></td>
<td><?php echo $row['username'] ?></td>
<td><?php echo $row['points'] ?></td>
</tr>
<?php
}
$i++;
}
?>
</tbody>
</table>
Thanks for the help, and sorry if not very clear, english is not my primary language.
I've been working on a small project where I display multiple tables for a user on a web page. I would like for the users to be able to edit their tables and have that data update in the database. I'm using the jQuery tabledit plugin to achieve this.
I followed this tutorial Live editable tables and was able to successfully get this to work for one table.
The problem I'm having is this doesn't seem to be working for all my tables. I can only click into the first displayed table but I need to be able to edit all of them.
I've searched for anybody trying to achieve something similar but couldn't find much.
<?php
// ...
if ($resultCheck > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<table id="data_table">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $row ['col1_data']; ?></td>
<td><?php echo $row ['col2_data']; ?></td>
<td><?php echo $row ['col3_data']; ?></td>
<td><?php echo $row ['col4_data']; ?></td>
</tr>
</tbody>
</table>
<?php
}
}
$(document).ready(function () {
$('#data_table').Tabledit({
deleteButton: false,
editButton: false,
columns: {
identifier: [ 0, 'col1_data' ],
editable: [ [ 1, 'col2_data' ], [ 2, 'col3_data' ], [ 3, 'col4_data' ] ],
},
hideIdentifier: false,
url: 'includes/liveedit.inc.php',
})
})
I think this may be a problem with each table having the same identifier but I'm not sure. I return each table from the database with a unique identifier but I'm not sure how to use that with the plugin (it seems like I need to).
Sorry if this has an easy solution. I'm pretty new to php and jQuery.
Thanks in advance for any help and please let me know if I'm not being clear enough!
You have an id and it must be unique. Your while statement creates many tables with the same id.
Your JS always going to the first table with such id. Change it on class. Don't use id if you wanna apply your JS code at once.
$(document).ready(function() {
$('.data_table').Tabledit({
deleteButton: false,
editButton: false,
columns: {
identifier: [0, 'col1_data'],
editable: [[1, 'col2_data'], [2, 'col3_data'], [3, 'col4_data']]
},
hideIdentifier: false,
url: 'includes/liveedit.inc.php'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-tabledit#1.0.0/jquery.tabledit.min.js"></script>
<table class="data_table">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>rew</td>
<td>ter</td>
<td>yrt</td>
<td>qwe</td>
</tr>
</tbody>
</table>
<table class="data_table">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data_column1</td>
<td>dat2a_column1</td>
<td>da3ta_column1</td>
<td>data_co5lumn1</td>
</tr>
</tbody>
</table>
Press ENTER in the snippet for saving the new value
I have a dataTable that passes it's row to a modal. Will it be possible to pass it directly to the php page using the same modal script?
This is my main_page.php
<table id="example1" class="table table-bordered">
<thead>
<th>Reference No</th>
<th>Finger Scan No</th>
<th>Date From</th>
<th>Date To </th>
<th>Tools </th>
</thead>
<tbody>
<?php
$user = $user['fingerscanno'];
$sql = "
SELECT
payroll.payrollno AS payrollno,
payroll.referenceno AS referenceno,
payroll.fingerscanno AS fingerscanno,
payroll.datefrom AS datefrom,
payroll.dateto AS dateto,
USERINFO.USERID,
USERINFO.BADGENUMBER
FROM
payroll,
USERINFO
WHERE
USERINFO.BADGENUMBER = payroll.fingerscanno AND
payroll.fingerscanno='$user'
";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
echo "
<tr>
<td>".$row['referenceno']."</td>
<td>".$row['fingerscanno']."</td>
<td>".$row['datefrom']."</td>
<td>".$row['dateto']."</td>
<td>
<button class='btn btn-success btn-sm edit btn-flat' data-id='".$row['referenceno']."'><i class='fa fa-edit'></i> Proof of Attendance</button>
<button class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['referenceno']."'><i class='fa fa-edit'></i> Payslip Summary</button>
</td>
</tr>
";
}
?>
</tbody>
</table>
<?php include 'includes/mymodal.php'; ?>
This is the modal function
$(function(){
$("body").on('click', '.edit', function (e){
e.preventDefault();
$('#edit').modal('show');
var id = $(this).data('id');
getRow(id);
});
This is the modal page
mymodal.php
<div class="modal fade" id="edit">
<input type="hidden" class="decid" id="id" name="id">
<table id="example2" class="table table-bordered">
<thead>
<th>Schedule Date</th>
<th>Schedule Name</th>
<th>Recorded In</th>
<th>Recorded Out</th>
<th>Day Count</th>
<th>Day Value</th>
<th>N.D. Value</th>
<th>Leave Count</th>
<th>R.H. Count</th>
<th>R.H. Value</th>
</thead>
<tbody>
<?php
$sql = "SELECT fingerscanno, scheduledate, schedulename, recordin, recordout, noofdays, rate, nightdifferential, leaveday, regularholiday, specialholiday, referenceno
FROM payrollrecords WHERE fingerscanno='$user' and referenceno='$id'";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
echo "
<tr>
<td>".$row['scheduledate']."</td>
<td>".$row['schedulename']."</td>
<td>".$row['recordin']."</td>
<td>".$row['recordout']."</td>
<td>".$row['noofdays']."</td>
<td>".$row['rate']."</td>
<td>".$row['nightdifferential']."</td>
<td>".$row['leaveday']."</td>
<td>".$row['regularholiday']."</td>
<td>".$row['specialholiday']."</td>
</tr>
";
}
?>
</tbody>
</table>
</div>
My question is, how will I pass this into the table? So that the variable referenceno='$id' will receive the value from the main page.
You need to use AJAX.
Ajax is a javascript methodology that allows you to exchange information with a back-end PHP file, just as you are attempting to do.
The AJAX code block will send data to the mymodal.php file, the mymodal.php file will do the MySQL lookup and create the HTML, then echo a string variable (which could be a json object or it could be the HTML that you built in your while loop) back to the main page. The AJAX code block will receive the data echo'd out from the PHP file inside the .done() function and, also in that function, you can modify the DOM to inject the new data. To the user, it will look like they clicked on an element with class edit and the data just appeared in the modal.
Note that you do not include the mymodal.php file in your main_file.php page, because the AJAX code block knows how to communicate with that file.
You will need to add the HTML structure for the modal to the bottom of your main page (note that it is initially set to display:none):
<style>
#lamodal{display:none;position:fixed;width:100vw;height:100vh;background:black;opacity:0.8;}
#mdl_inner{width:60%;height:40%;}
.myflex{display:flex;align-items:center;justify-content:center;}
</style>
<div id="lamodal" class="myflex">
<div id="mdl_inner"></div>
</div><!-- #lamodal -->
Your javascript (AJAX) will look something like this:
$(function(){
$("body").on('click', '.edit', function (e){
e.preventDefault();
var id = $(this).data('id');
$.ajax({
type: 'post',
url: 'mymodal.php',
data: 'userid=id'
}).done(function(d){
//console.log('d: '+d);
$('#mdl_inner').html(d);
$('#lamodal').show();
});
});
});
Your mymodal.php file would be changed to look like this:
<?php
$sql = "SELECT fingerscanno, scheduledate, schedulename, recordin, recordout, noofdays, rate, nightdifferential, leaveday, regularholiday, specialholiday, referenceno
FROM payrollrecords WHERE fingerscanno='$user' and referenceno='$id'";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
$out = '
<table id="example2" class="table table-bordered">
<thead>
<th>Schedule Date</th>
<th>Schedule Name</th>
<th>Recorded In</th>
<th>Recorded Out</th>
<th>Day Count</th>
<th>Day Value</th>
<th>N.D. Value</th>
<th>Leave Count</th>
<th>R.H. Count</th>
<th>R.H. Value</th>
</thead>
<tbody>
';
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
$out .= '
<tr>
<td>".$row['scheduledate']."</td>
<td>".$row['schedulename']."</td>
<td>".$row['recordin']."</td>
<td>".$row['recordout']."</td>
<td>".$row['noofdays']."</td>
<td>".$row['rate']."</td>
<td>".$row['nightdifferential']."</td>
<td>".$row['leaveday']."</td>
<td>".$row['regularholiday']."</td>
<td>".$row['specialholiday']."</td>
</tr>
';
}
$out .= '
</tbody>
</table>
';
echo $out;
?>
Note how we are constructing a string variable and building it through concatination. When done, just echo $out and the newly-constructed HTML will appear in the .done() function of your AJAX code block.
See these additional AJAX examples and explanations:
http://www.jayblanchard.net/basics_of_jquery_ajax.html
Simple Like/Unlike text button - adding ajax etc
pass var to bootstrap modal where php will use this value
I am using Material Design Lite to create a table and I am inserting rows dynamically using php.
The material design lite has provided checkboxes for each row. Now, I want to use the selected row's data on a button click. Does anyone have any idea how to do that?
Here is the code :
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" id="sanctionedTable">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Registration No.</th>
<th class="mdl-data-table__cell--non-numeric">Amount</th>
</tr>
</thead>
<tbody>
<?php
$temp = "";
while($row = mysqli_fetch_assoc($result))
{
$temp="<tr><td>".$row["name"]."</td><td>".$row["regno"]."</td><td>".$row["amount"]."</td></tr>";
echo $temp;
}
?>
</tbody>
</table>
You can use something like this using jquery:
$('tr').click(function(){
alert("Name:"+$(this).children('td:nth-child(1)').html()+",Registration nio:"+$(this).children('td:nth-child(2)').html()+",Amount:"+$(this).children('td:nth-child(3)').html());
});
This fetches the information in each row.
I use jQuery's Datatable plugin and jQuery's switchButton plugin, like this:
<table id="test-list" class="cell-border" cellspacing="0" width="100%">
<thead>
<tr>
<th>Enabled ?</th>
</tr>
</thead>
<tbody>
<?php for ($i=0; $i<100; $i++) { ?>
<tr>
<td>
<input type="checkbox" class="enable-disable" name="enable-disable" value="<?php echo $i; ?>" checked />
</td>
</tr>
<?php } ?>
</tbody>
</table>
This is javascript code:
$(document).ready(function () {
// format datatable
$('#test-list').dataTable({
"scrollCollapse": true,
"paging": true,
"info": false,
// other fields
// ...
});
// format checkboxes as switch buttons
$('.enable-disable').switchButton();
// others
// ...
});
The problem is: all checkboxes on the first page of the datatable are formated correctly (switch button type), but when I turn to other pages (from the second page to the end page) checkboxes are not formated (traditional type)