Adding pagination to a table using Datatables - php

I am updating a plugin for WordPress using .php files. I have an update that requires a table and pagination. I'm trying to use jQuery for this.
I followed the datatable instructions but I am not seeing any changes applied. What am I doing wrong? I have added the jQuery to use the correct table id. Nothing seems to work doing this.
I am attempting to run through the data and allow the page to paginate. I do not care about having the option for user to select number of items on page at given time.
I am looking for an easy way to paginate a HTML table. Nothing I've tried seems to work
jQuery(document).ready(function() {
jQuery('#engine-search-table').DataTable();
});
<div class="parts-table">
<table id="engine-search-table" class="display">
<thead>
<tr id="header-row">
<th class="table-header">
<h4>Manufacturer</h4>
</th>
<th class="table-header">
<h4>Model</h4>
</th>
<th class="table-header">
<h4>Description</h4>
</th>
<th class="table-header">
<h4>Series</h4>
</th>
<th class="table-header">
<h4>Engine</h4>
</th>
<th class="table-header">
<h4>Years</h4>
</th>
<th class="table-header">
<h4>Begin Serial</h4>
</th>
<th class="table-header">
<h4>Engine Serial</h4>
</th>
</tr>
</thead>
<tbody>
<?php
if (!empty($parts)) {
foreach ($parts as $part) {
$meta = get_post_meta($part->ID); ?>
<tr id="data" class="parts-row">
<td class="part-container-title">
<?php printCFTVal($meta, 'manufacturer');?>
</td>
<td class="part-container-manufacturer">
<a href='<?php echo ($part->guid); ?>'>
<?php printCFTVal($meta, 'model'); ?>
</a>
</td>
<td class="part-container-category">
<?php printCFTVal($meta, 'description'); ?>
</td>
<td class="part-container-excerpt">
<?php echo str_replace('OVERVIEW', '', get_the_excerpt($part)); ?>
</td>
<td class='part-container-button'>
<?php echo ($part->guid); ?>'>
<?php printCFTVal($meta, 'enginemodel'); ?>
</td>
<td>
<?php printCFTVal($meta, 'years');?>
</td>
<td>
<?php printCFTVal($meta, 'beginSerial');?>
</td>
<td>
<?php printCFTVal($meta, 'engineserial');?>
</td>
</tr>
<?php }
} else {
echo '<p>No parts found.</p>';
} ?>
</tbody>
</table>
</div>

Related

Bootstrap Collapse Error: SyntaxError: The string did not match the expected pattern

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.

how can I combine well php and html in this code?

I have a query that returns me a long series of questions and answers. in my html page I have div that alternate with slider effect. so far everything is fine. at the moment I try to correctly display a question from the db bumps everything. why?
<div align=Center>
<br/>
<h1><?php echo $rowfirst['Cognome']." ".$rowfirst['Nome']; ?></h1>
<br/>
<div class="nivo-slider">
<div class="navigation"></div>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<div id="nivo">
<div class="element" align=Center><h3>Anamnesi pregressa</h3>
<table class="w3-table w3-bordered " style="width:400px;padding:10px;" align="center">
<tbody>
<tr>
<th scope="row"><?php echo $row['testo'];}?></th>
<td>risposta 1</td>
</tr>
</tbody>
</table>
</div>
<div class="element" align=Center><h3>Scrittura</h3>
<table class="w3-table w3-bordered" style="width:400px;padding:10px;" align="center">
<tbody>
<tr>
<th scope="row">domanda 1</th>
<td>risposta 1</td>
</tr>
</tbody>
</table>
</div>
<div class="element"><h3>Motricità</h3>
<table class="w3-table w3-bordered " style="width:400px;padding:10px;" align="center">
<tbody>
<tr>
<th scope="row">domanda 1</th>
<td>risposta 1</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
</div>
</div>
The problem is the while. cycle. how can I solve it?
What you have will create malformed HTML.
In order to prevent malformed HTML, you should place your while () { and } where the tags matches like I have done with <tr> and </tr> shown below:
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<th scope="row"><?php echo $row['testo'];?></th>
<td>risposta 1</td>
</tr>
<?php } ?>
That will fix your malformed HTML but the while statement may or may not be in the right place and without knowing exactly what you are trying to achieve you'll have to correct it from there. As for the slider you mentioned, you probably need to supply more information if this answer doesn't solve your issue.

Im looping to display the rows in the database but other rows are not included inside the html table

if(isset($_POST["Search"]))
{
$resz=mysqli_query($link,"select*from tblschedule where Destination =
'$_POST[Destination]' and Origin = '$_POST[Origin]' and Date =
'$_POST[Date]'");
Code for search
$count=mysqli_num_rows($resz);
if($count>=1){
if there's a row to search then display
echo "</br></br>
<div class=container>
<div class=table-responsive>
<table class = table>
<tr>
<th class=col-xs-2> TripCode </th>
<th class=col-xs-2> Origin </th>
<th class=col-xs-2> Destination </th>
<th class=col-xs-2> Date </th>
<th class=col-xs-2> Time </th>
<th class=col-xs-2> Action </th>
</tr>";
while($row = mysqli_fetch_array($resz))
{?>
<tr>
<td> <?php echo $row['TripCode']; ?> </td>
<td> <?php echo $row['Origin']; ?> </td>
<td> <?php echo $row['Destination']; ?> </td>
<td> <?php echo $row['Date']; ?> </td>
<td> <?php echo $row['Time']; ?> </td>
<td> <?php echo "<a href=webbook.php?
id=".$row['TripCode'].">Book</a><br />"; ?></td>
</tr>
</table>
</div>
</div>
<?php }} else{ echo "<center>No results were found.</center>"; }}
?>
Code is successfully getting the rows I want but only one row has a table and the others don't have. I want each row to have a table of their own.
seems like your <table> and the two <div> tag is within the while loop. remove it and put outside of the loop.

Including a PHP file then PHP foreach loop in a html table

Not sure if this is the best way to do this.. But..
I've got a PHP file calling an API and doing a foreach loop to get all the data I want. Previously I was calling this from my html file and putting it into a table, the problem was that it was all appearing as technically the same row and that made formatting hard.
This is what I used to have:
<div class="bgimg2 w3-container">
<table class="w3-table w3-medium w3-text-white">
<tr class="w3-blue-gray">
<th> <h5> Name </h5> </th>
<th> <h5> Size </h5> </th>
<th> <h5> % </h5> </th>
</tr>
<tr>
<th> <h4> <div id=queue> </h4> </th>
<th> <h4> <div id=queueSize> </h4> </th>
<th> <h4> <div id=queuePercent> </h4> </th>
</tr>
</thead>
</table>
</div>
I want to have each item appearing as it's own row, so I'm trying to do a php foreach loop directly in the table.
This is what I've got currently for the table:
<table class="w3-table w3-medium w3-text-white">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<?php
require_once ('/api/sabapiQueue.php');
foreach ($apiResultDataShift as $row){
?>
<tr>
<td> <?php $row['filename'] ?> </td>
</tr>
<?php } ?>
</tbody>
</table>
It's not working and the file isn't even loading. Not sure where I've gone wrong.
Any help would be greatly appreciated.
Seems you missed a detail in not echoing out your variable. I would also suggest, and perhaps introduce you to alternative PHP syntax which is good for when you want to tightly integrate a few php blocks into html as you are doing here:
<table class="w3-table w3-medium w3-text-white">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<?php
require_once ('/api/sabapiQueue.php');
foreach ($apiResultDataShift as $row):
?>
<tr>
<td><?= $row['filename'] ?></td>
</tr>
<?php
endforeach;
?>
</tbody>
</table>
Alternatively, as per the echo manual page you could just change this line:
<td><?php echo $row['filename']; ?></td>

i want 3 records on one page when pressing ctrl +p to print that page of a php application

<?php session_start();
require_once('SessionSet.php');
require_once('connection.php');
include('top.php');
if(isset($_GET['ClassID']) && isset($_GET['SectionId']) )
{
$ClassID = $_GET['ClassID'];
$SectionId = $_GET['SectionId'];
$ClassName = $_GET['ClassName'];
$SectionName = $_GET['SectionName'];
$GetCurrentMonth = date('M');
/* select latest Academic Year*/
$GetAcademicQ = "select * from study_year order by StudyYearId desc limit 1";
$GetAcademicQR = mysqli_query($con,$GetAcademicQ);
$GetAcademicRow = mysqli_fetch_assoc($GetAcademicQR);
$AcademciyearId = $GetAcademicRow['StudyYearId'];
$YearName = $GetAcademicRow['YearName'];
/* Get Students and Students Class + Fee Records */
$GetStudentClassQ = "select * from studentclass where
AcademicYearId='$AcademciyearId' and StudentClassId='$ClassID'
and StudentSectionId='$SectionId';";
$GetStudentClassQR = mysqli_query($con,$GetStudentClassQ);
$GetStudentClassNum = mysqli_num_rows($GetStudentClassQR);
if($GetStudentClassNum>0)
{
while($GetStudentClassRow = mysqli_fetch_assoc($GetStudentClassQR))
{
$StudentID = $GetStudentClassRow['StudentID'];
$RollNumber = $GetStudentClassRow['RollNumber'];
$RollNumber = $GetStudentClassRow['RollNumber'];
$StuentClassFee = $GetStudentClassRow['StuentClassFee'];
/* Get Stduent Name and bio data */
$GetStudentQ = "select * from students where Student_ID='$StudentID';";
$GetStudentQR = mysqli_query($con,$GetStudentQ);
$GetStudentRow = mysqli_fetch_assoc($GetStudentQR);
$Name = $GetStudentRow['Name'];
$FatherName = $GetStudentRow['FatherName'];
$StudentPhoto = $GetStudentRow['StudentPhoto'];
$Student_ID = $GetStudentRow['Student_ID'];
/* Get Stduent Name and bio data */
$GetfeeQ = "select * from fee where FeeStudentID='$StudentID';";
$GetfeeQR = mysqli_query($con,$GetfeeQ);
$GetfeeRow = mysqli_fetch_assoc($GetfeeQR);
$FeeAmount = $GetfeeRow['FeeAmount'];
$FeePaid = $GetfeeRow['FeePaid'];
?>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<table class="table table-hover table-bordered print-table" style="width:100% !important" align="center">
<!--Office Copy-->
<tr class="warning">
<th>Student ID</th>
<td>
<?php echo $Student_ID;?>
</td>
<th>Class</th>
<td>
<?php echo $ClassName;?>
</td>
<th>Section Name</th>
<td>
<?php echo $SectionName;?>
</td>
<th>Roll Number</th>
<td>
<?php echo $RollNumber;?>
</td>
<th>Academic Year </th>
<td>
<?php echo $YearName;?>
</td>
<!--td rowspan="5" style="text-align:center"><img src="StudentImages/<?php/* echo $StudentPhoto;*/?>"/ alt="Stdudent Image not found" style="width:150px; height:200px"></td-->
</tr>
<tr class="warning">
<th>Student Name</th>
<td colspan="4">
<?php echo $Name;?>
</td>
<th>Father Name</th>
<td colspan="4">
<?php echo $FatherName;?>
</td>
</tr>
<tr class="warning">
<th>Fee Month </th>
<td>
<?php echo $GetCurrentMonth;?>
</td>
<th>Fee Amount</th>
<td style="font-size:20px;">
<?php echo $StuentClassFee;?>
</td>
<th>Previous Dues</th>
<td style="font-size:20px;">
<?php echo $FeeAmount-$FeePaid;?>
</td>
<th>Due Date</th>
<td>12 -
<?php echo $GetCurrentMonth;?>
</td>
<th>After Due Date</th>
<td>
<?php echo $StuentClassFee+50;?>
</td>
</tr>
<hr>
<!--Student Copy-->
</table>
<table class="table table-hover table-bordered print-table" style="width:100% !important" align="center" >
<tr class="warning">
<th>Student ID</th>
<td>
<?php echo $Student_ID;?>
</td>
<th>Class</th>
<td>
<?php echo $ClassName;?>
</td>
<th>Section Name</th>
<td>
<?php echo $SectionName;?>
</td>
<th>Roll Number</th>
<td>
<?php echo $RollNumber;?>
</td>
<th>Academic Year </th>
<td>
<?php echo $YearName;?>
</td>
<!--td rowspan="5" style="text-align:center"><img src="StudentImages/<?php/* echo $StudentPhoto;*/?>"/ alt="Stdudent Image not found" style="width:150px; height:200px"></td-->
</tr>
<tr class="warning">
<th>Student Name</th>
<td>
<?php echo $Name;?>
</td>
<th>Father Name</th>
<td>
<?php echo $FatherName;?>
</td>
<th>Fee Month </th>
<td>
<?php echo $GetCurrentMonth;?>
</td>
<th>Fee Amount</th>
<td style="font-size:20px;">
<?php echo $StuentClassFee;?>
</td>
<th>Previous Dues</th>
<td style="font-size:20px;">
<?php echo $FeeAmount-$FeePaid;?>
</td>
</tr>
</table>
</div>
<!-- row end here -->
</div>
</div>
<!-- page-wrapper end here -->
<?php
}
}
else
{
}
?>
<?php
}
?>
i am building a php school management application. when I try to print report after pressing ctrl+p one recored is being shown on each page. but i want to show atleast 3 records on a single page after giving printing command. I have attached snapshots of records before and after print command.
enter image description here
here is picture after giving print command
enter image description here
Your question has nothing to do with PHP, this is a question about CSS, specifically print styles.
In the absence of an example of plain HTML and CSS, take a look at the CSS properties page-break-before, page-break-after and page-break-inside. In this case you may want to look at something like:
#media print {
.row, table {
page-break-before: avoid;
page-break-after: avoid;
}
}
Learn a little bit more about the page-break-* properties at this CSS Tricks article. If you are generally new to CSS print styles, I wrote a primer for .NET magazine.
Bear in mind that whatever styles you use, these are only suggestions to the browser. Paper size, page orientation, font size, zoom level, user margins, etc. will all work together to mess with your plans. Content that you force to be too wide for the page may also be an issue.
Finally, don't use any inline styles. Use your CSS file for that (so get rid of that width:100% inline style I saw.
If you want more help, post the raw HTML output and your CSS.

Categories