0

I have a PHP file that also has HTML/JS in it, and inside that file i use AJAX to call another PHP file which runs some queries and then echoes the results as a table back to the original php file. What i want to do is paginate the resulting table.

Searching i found this https://stackoverflow.com/questions/19605078/how-to-use-pagination-on-html-tables#= older question so i tried replicating the accepted asnwer which points to this site https://datatables.net/examples/basic_init/alt_pagination.html ,but to no result (not even an error message, which hints that i definitely lack understading of something basic).

Here is my code in the php file that gets called by AJAX:

echo '<div class="table-responsive">';
echo '<table id="resultsTable" class="table table-hover table-condensed" align="center" style="width:80%">';
echo '<thead>';
echo '<tr>';
echo '<th>Πληροφορίες</th>';
echo '<th>Εξώφυλλο</th>';
echo "<td><a href='search.php?Order=1&SearchOption=".$SearchOption."&search_db=".$SearchValue."'><button type='button' class='btn btn-primary'>Τίτλος</button></a></td>";
echo "<td><a href='search.php?Order=2&SearchOption=".$SearchOption."&search_db=".$SearchValue."'><button type='button' class='btn btn-primary'>Συγγραφέας</button></a></td>";
echo "<td><a href='search.php?Order=3&SearchOption=".$SearchOption."&search_db=".$SearchValue."'><button type='button' class='btn btn-primary'>Εκδότης</button></a></td>";
echo "<td><a href='search.php?Order=4&SearchOption=".$SearchOption."&search_db=".$SearchValue."'><button type='button' class='btn btn-primary'>Είδος</button></a></td>";
echo "<td><a href='search.php?Order=5&SearchOption=".$SearchOption."&search_db=".$SearchValue."'><button type='button' class='btn btn-primary'>Θέμα</button></a></td>";
echo "<td><a href='search.php?Order=6&SearchOption=".$SearchOption."&search_db=".$SearchValue."'><button type='button' class='btn btn-primary'>ISBN</button></a></td>";
echo '<th>Θέση</th>';
echo "<td><a href='search.php?Order=7&SearchOption=".$SearchOption."&search_db=".$SearchValue."'><button type='button' class='btn btn-primary'>Τωρινός Κάτοχος</button></a></td>";
echo "<td><a href='search.php?Order=8&SearchOption=".$SearchOption."&search_db=".$SearchValue."'><button type='button' class='btn btn-primary'>Προστέθηκε</button></a></td>";
if($LoggedIn == 1)
{
echo "<th>Αλλαγή Καταχώρησης</th>";
}
echo '</tr>';
echo '</thead>';
//body
echo '<tbody>';
for($i=0;$i<$counter;$i++)
{
echo ' <tr>';
    echo "<td href='#' onclick=\"alert('".$ResultTable[$i][10]."');\" style='text-align: center;'><img src='IconImage.png' width='25' height='25' title='".$ResultTable[$i][10]."'/></td>";
    echo "<td><img src='BookCovers/". $ResultTable[$i][0]  ."' class='img-thubnail' alt='Δεν υπάρχει' width='50' height='50'/></td>";
    echo "<td>".$ResultTable[$i][1]."</td>";
    echo "<td>".$ResultTable[$i][2]."</td>";
    echo "<td>".$ResultTable[$i][3]."</td>";
    echo "<td>".$ResultTable[$i][4]."</td>";
    echo "<td>".$ResultTable[$i][5]."</td>";
    echo "<td>".$ResultTable[$i][6]."</td>";
    echo "<td>".$ResultTable[$i][7]."</td>";
    echo "<td>".$ResultTable[$i][8]."</td>";
    echo "<td>".$ResultTable[$i][9]."</td>";
    if($LoggedIn == 1)
    {
    echo "<td style='text-align: center;'><a href='UpdateEntry.php?BookID=".$ResultTable[$i][11]."' onclick=\"window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;\"><button type='button' class='btn btn-info'><span class='glyphicon glyphicon-wrench'></span></button></a>
    <a href='DeleteBook.php?BookID=".$ResultTable[$i][11]."' onclick= \"return confirm('Διαγραφή Καταχώρησης; Αυτή η ενέργεια δεν μπορεί να αναιρεθεί!!')\"><button type='button' class='btn btn-danger'><span class='glyphicon glyphicon-remove'></span></button></a></td>";
    }
 echo '</tr>';
}echo '</tbody>';echo '</table>';echo "</div>";

And in the original php file i included the following in the head block

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src ="jquery-1.12.3.js"></script>

<script src ="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

And just before closing the body i have

  <script>$(document).ready(function() {
$('#resultsTable').DataTable( {
    "pagingType": "full_numbers"
} );} );</script>

When i open the page, the results are displayed correctly, but the table is not formatted at all. Any help would be greatly appreciated.

Community
  • 1
  • 1
Prinny
  • 208
  • 6
  • 16
  • Next_step_towards_pro_PHP_tip: echo $line . $line . $line . $line ... looking at this makes my brain hurt a little. What does "not formatted at all" mean? Is the text not centered? Did you notice you wrote "thubnail" instead of "thumbnail"? – Kevin_Kinsey Oct 21 '16 at 19:02
  • @Kevin_Kinsey hand't notice the "thubnail" you are correct. What i meant by "not formatted at all" is that the resulting table, while correct, has no pagination. – Prinny Oct 21 '16 at 19:09
  • OMG! http://stackoverflow.com/a/39444025/3558278 – Deep Oct 21 '16 at 19:22
  • Alternately he could just use a heredoc: `echo << – jhaagsma Oct 21 '16 at 22:57

1 Answers1

0

Ok, i found the answer. The problems in the code were actually 2.

  • I had included 2 different versions of the jquery.
  • The AJAX call that was creating the table was...well..asynchronous, so the execution flow was reaching the jquery part while the table was not constructed yet. This is why i never saw an error message in the console.

I moved the jquery code from the head tag to the end of the AJAX call and it worked correctly.

Prinny
  • 208
  • 6
  • 16