Can't change page on certain mobile browsers

Can't change page on certain mobile browsers

TrojanNemoTrojanNemo Posts: 5Questions: 1Answers: 0

Let me start by saying web development is not my thing so this was put together from snippets of code found online. I am not ashamed to say that. But it works beautifully on desktop. Does exactly what I need it to. I have Android devices. On Chrome (my default browser) and Edge, I can't change pages on the DataTable when the setting is for 50 or 100 entries per page. My particular JSON file has over 5,600 entries so I really want/need to display 100 entries at a time. On Firefox, Dolphin and Opera I am able to change pages just like on desktop. No problems there. It works as intended on Apple iOS Safari on a tablet. So really, it comes down to Chrome and Edge. I can really let go of Edge compatibility, but Chrome is default on Android for a lot of people. Below is the entirety of the code. It's only 55 lines not counting the dependencies of course.

<?php
//index.php
?>
<!DOCTYPE html>
<html>
 <head>
  <title>Nemo's Setlist</title>
    <style type="text/css">
        body
        {
            font-family: Times New Roman;
            font-size: 12pt;
        }       
    </style>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>  
  <style>
  .box
  {
   max-width:600px;
   width:100%;
   margin: 0 auto;;
  }
  </style>
 </head>
 <body>
  <div class="container">
   <br />
   <center><img src="header.jpg" alt="Nautilus Presents: Nemo's Setlist" title="Nautilus Presents: Nemo's Setlist"><br>
    <a href="http://www.keepitfishy.com/setlist/setlist.pdf"><img src="download.png" alt="Click Here to Download Setlist PDF" title="Click Here to Download Setlist PDF"></a><br><br></center>
   <div class="table-responsive">
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Artist</th>
                <th>Song</th>
                <th>Vocal Parts</th>
                <th>Duration</th>
            </tr>
        </thead>        
    </table>
   </div>
  </div>
<br>
<center>Copyright © TrojanNemo, 2023</center>
 </body>
</html>
<script>
$(document).ready(function () {
    $('#example').DataTable({
        ajax: 'setlist.json',
    'pageLength': 100});
});
</script>

I've tried making sure that the code is clean, nothing is left opened, I've tried playing with the pageLength value but I really need 100 to make it workable, tried my best Google-fu to find a solution. Nothing. I would love your help with this. Thank you!

Answers

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    Can you link to a page showing the issue please? This page doesn't appear to have any problems with changing the table's page on Chrome Android.

    Allan

  • TrojanNemoTrojanNemo Posts: 5Questions: 1Answers: 0

    allan, this is the website in question:

    http://www.rockbandkaraoke.co

    (not .com, just .co)

  • TrojanNemoTrojanNemo Posts: 5Questions: 1Answers: 0

    I also want to add that the page you linked has 57 entries in the table and is set to 10 entries per page. As I described in my original post, I have over 5,000 entries so I need 100 entries per page...and that's when the problem happens. At 10 entries per page there's no problem, but then I have over 500 pages. Not very practical.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Thanks for the link. I tried that with desktop Chrome in mobile compatibility mode, and on Android Chrome (Samsung S21), and both worked as expected - I was able to page through the table. Which devices/versions are you using where you see issues?

    Colin

  • TrojanNemoTrojanNemo Posts: 5Questions: 1Answers: 0

    Hi Colin. I'm using the Samsung Galaxy Z Fold4 which is Samsung's top of the line phone at the moment besides the S23 Ultra. Thanks for the help. If it's just me having a problem I can live with it.

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    How curious. Is it when the table is spanning over the full width of the screen? What happens if you have Chrome on just half?

    Allan

  • TrojanNemoTrojanNemo Posts: 5Questions: 1Answers: 0

    Whether I'm using the front screen or the inside screens, same behavior. My wife has the S22 Ultra and she just tried it on Chrome as well and it's the same behavior. But Firefox and others work fine.

    P.S. I'm experimenting with showing more details on the table so the code has changed a little bit on the HTML part of it but it shouldn't affect this issue.

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    Interestingly I'm seeing it as well. But when I try it in Chrome desktop with Responsive set to that size, it works okay! I'm not actually sure how to debug that. I'll look into it.

    Allan

Sign In or Register to comment.