使用DataTables无法在某些移动浏览器上更改页面-解网

问：

首先，我要说的是，Web 开发不是我的事，所以这是从网上找到的代码片段组合在一起的。我并不羞于这么说。但它在桌面上运行得很好。完全符合我的需要。我有 Android 设备。在 Chrome（我的默认浏览器）和 Edge 上，当设置为每页 50 或 100 个条目时，我无法更改 DataTable 上的页面。我的特定 JSON 文件有超过 5,600 个条目，所以我真的希望/需要一次显示 100 个条目。在 Firefox、Dolphin 和 Opera 上，我可以像在桌面上一样更改页面。那里没有问题。它可以在平板电脑上的 Apple iOS Safari 上按预期工作。所以实际上，它归结为 Chrome 和 Edge。我真的可以放开 Edge 兼容性，但 Chrome 是很多人在 Android 上的默认设置。以下是完整的代码。当然，它只有 44 行，不包括依赖项。

<!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>  
 </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="SongList" 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 () {
    $('#SongList').DataTable({
        ajax: 'setlist.json',
    'pageLength': 100});
});
</script>

我试过确保代码是干净的，没有打开任何东西，我试过玩 pageLength 值，但我真的需要 100 才能使其可行，尽了我最大的努力 Google-fu 来找到解决方案。无。我希望你能帮上这个忙。谢谢！

JavaScript PHP AJAX Google-Chrome 数据表

使用DataTables无法在某些移动浏览器上更改页面

Using DataTables can't change page on certain mobile browsers

评论