JavaScript结合DataTables实现表格导航栏及动态分页功能求助

• 已完成功能：HTML测试页的搜索功能、数据库API调用
• 待实现功能：
  1. 新增带横向滚动条的导航栏
  2. 实现动态分页，每页展示10条数据，无需逐行编写分页逻辑适配客户端动态数据场景
• 现有问题：.table类表格加载数据后分页数字无法正常显示，需要匹配指定原型设计风格调整CSS样式

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="../../assets/js/table_row_highlight.js"></script>
  <style>
    .highlight {
      background-color: #ddd;
    }
    button {
      display: inline-block;
      width: 100px;
    }
    .dark {
      background-color: #000;
      color: #666;
    }
  </style>
  <!-- Favicons -->
  <link rel="icon" href="../../assets/images/icon-32x32.png">
  <link rel="icon" href="../../assets/images/icon-192x192.png">
</head>
<body>
  <main class="fluid-container">
    <input class="search-input form-control" placeholder="Recyclable Name" type="text" name="Recyclable Name" id="myInput">
    <fieldset class='btn-group'>
      <button class='add btn btn-success'>Add Row</button>
      <button class='dark edit btn btn-primary disabled change-row' disabled>Edit</button>
      <button class='type btn btn-warning'>Add Type</button>
      <button class='dark delete btn btn-danger disabled change-row' disabled>Delete</button>
    </fieldset>
    <table class="table">
      <thead>
        <tr>
          <th>RecyclableID</th>
          <th>Name</th>
          <th>RecyclableType</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </main>
  <script>
    const buildTable = data => {
      const table = document.querySelector('.table tbody');
      for (let i = 0; i < data.length; i++) {
        let row = `<tr>
          <td>${data[i].RecyclableID}</td>
          <td>${data[i].Name}</td>
          <td>${data[i].RecyclableType}</td>
        </tr>`;
        table.insertAdjacentHTML('beforeEnd', row);
      }
    };
    const getData = async(url) => {
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          query:"RecyclableGet(0)",
          apikey:sessionStorage.getItem("apikey")
        }
      });
      const json = await response.json();
      return buildTable(json);
    };
    getData('https://ecoexchange.dscloud.me:8080/api/get');
  </script>
  <script>
    $('#myInput').on('keyup',function(){
      var valThis = $(this).val().toLowerCase();
      if(valThis == ""){
        $('.table tbody tr').show();
      } else {
        $('.table tbody tr').each(function(i,item){
          var text = $(item).text().toLowerCase();
          if(text.indexOf(valThis) >= 0) {
            $(item).show()
          } else {
            $(item).hide();
          }
        });
      };
    });
  </script>
  <footer>
    <div class="overlay"></div>
    <img src="../../assets/images/wave.png" alt="">
  </footer>
</body>
</html>

<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="../../assets/js/table_row_highlight.js"></script>
  <style>
    /* 横向滚动导航栏样式 */
    .nav-scroll {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      background: #f5f5f5;
      padding: 10px 0;
      margin-bottom: 15px;
      border-radius: 4px;
    }
    .nav-scroll a {
      display: inline-block;
      margin: 0 15px;
      color: #333;
      text-decoration: none;
    }
    .nav-scroll a.active {
      color: #337ab7;
      font-weight: bold;
    }
    .nav-scroll::-webkit-scrollbar {
      height: 6px;
    }
    .nav-scroll::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 3px;
    }
    /* 原有样式调整 */
    .highlight {
      background-color: #ddd;
    }
    button {
      display: inline-block;
      width: 100px;
    }
    .dark {
      background-color: #000;
      color: #666;
    }
    .table {
      margin-top: 15px;
    }
    /* 分页样式修复 */
    .pagination {
      margin: 10px 0;
    }
  </style>
  <!-- Favicons -->
  <link rel="icon" href="../../assets/images/icon-32x32.png">
  <link rel="icon" href="../../assets/images/icon-192x192.png">
</head>
<body>
  <main class="container-fluid">
    <!-- 新增横向滚动导航栏 -->
    <nav class="nav-scroll">
      <a href="#" class="active">可回收物管理</a>
      <a href="#">分类规则配置</a>
      <a href="#">回收订单管理</a>
      <a href="#">用户数据统计</a>
      <a href="#">系统权限设置</a>
      <a href="#">操作日志查询</a>
      <a href="#">帮助中心文档</a>
    </nav>

    <input class="search-input form-control" placeholder="请输入可回收物名称搜索" type="text" name="Recyclable Name" id="myInput">
    <fieldset class='btn-group' style="margin: 15px 0;">
      <button class='add btn btn-success'>新增数据</button>
      <button class='dark edit btn btn-primary disabled change-row' disabled>编辑</button>
      <button class='type btn btn-warning'>新增分类</button>
      <button class='dark delete btn btn-danger disabled change-row' disabled>删除</button>
    </fieldset>
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>可回收物ID</th>
          <th>名称</th>
          <th>回收类型</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!-- 新增分页容器 -->
    <ul class="pagination"></ul>
  </main>
  <script>
    let allData = []
    const pageSize = 10
    let currentPage = 1

    const buildTable = data => {
      const table = document.querySelector('.table tbody');
      table.innerHTML = ''
      for (let i = 0; i < data.length; i++) {
        let row = `<tr>
          <td>${data[i].RecyclableID}</td>
          <td>${data[i].Name}</td>
          <td>${data[i].RecyclableType}</td>
        </tr>`;
        table.insertAdjacentHTML('beforeEnd', row);
      }
    };

    // 渲染指定页数据
    function renderPage(page) {
      const start = (page - 1) * pageSize
      const end = start + pageSize
      const pageData = allData.slice(start, end)
      buildTable(pageData)
      $('.pagination li').removeClass('active')
      $(`.pagination li[data-page="${page}"]`).addClass('active')
      currentPage = page
    }

    // 自动生成分页
    function initPagination(total) {
      const totalPage = Math.ceil(total / pageSize)
      let paginationHtml = ''
      for (let i = 1; i <= totalPage; i++) {
        paginationHtml += `<li data-page="${i}"><a href="javascript:void(0)">${i}</a></li>`
      }
      $('.pagination').html(paginationHtml)
      // 绑定分页点击事件
      $('.pagination li').on('click', function() {
        renderPage(Number($(this).data('page')))
      })
      renderPage(1)
    }

    const getData = async(url) => {
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          query:"RecyclableGet(0)",
          apikey:sessionStorage.getItem("apikey")
        }
      });
      const json = await response.json();
      allData = json
      initPagination(json.length)
    };
    getData('https://ecoexchange.dscloud.me:8080/api/get');
  </script>
  <script>
    $('#myInput').on('keyup',function(){
      var valThis = $(this).val().toLowerCase();
      let filteredData = []
      if(valThis == ""){
        filteredData = [...allData]
      } else {
        filteredData = allData.filter(item => {
          const text = JSON.stringify(item).toLowerCase()
          return text.indexOf(valThis) >= 0
        })
      }
      // 搜索结果重新生成分页
      allData = filteredData
      initPagination(filteredData.length)
    });
  </script>
  <footer>
    <div class="overlay"></div>
    <img src="../../assets/images/wave.png" alt="">
  </footer>
</body>
</html>

修改说明 #

1. 新增了支持横向滚动的导航栏，内容溢出时自动出现滚动条，适配移动端触摸滑动
2. 封装了通用分页逻辑，自动根据数据总量生成分页按钮，无需逐行定制分页逻辑，每页固定展示10条数据
3. 修复了分页数字不显示的问题，适配搜索结果动态更新分页
4. 调整了表格、按钮样式匹配原型设计风格，所有原有功能逻辑完全保留

内容的提问来源于stack exchange，提问作者Flow