我想对我获取的数据进行分页，以便前 20 个条目将在第一页上，然后在下一页上单击下一个按钮时的下 20 个值

Question

I have fetched data from spreadsheet on html table in reverse order so that latest entry will be on top row.我以相反的顺序从 html 表上的电子表格中获取数据，以便最新条目将位于第一行。 But it is showing all entries on a single page.I want to paginate it (make a subsequent calls using offset and limit ) so that first 20 entries will be on first page then next 20 on second page and so on.but i dont have any idea how to it.但它在单个页面上显示所有条目。我想对它进行分页（使用 offset 和 limit 进行后续调用），以便前 20 个条目将在第一页上，然后下一个 20 在第二页上，依此类推。但我没有任何想法如何。 That would be great if anyone could help me out.thanks in advance..!如果有人可以帮助我，那就太好了。在此先感谢..！

Below is my javascript code:下面是我的 javascript 代码：

enter code here在此处输入代码

        $(document).ready(function () {
    refreshTable();
    setInterval(refreshTable, 5000);
  });
   function refreshTable() {
    $.getJSON('https://spreadsheets.google.com/feeds/list/1f1GTmf6-73sgdrKux5DTSbCsI1ObygfWjmUNQIxMqc0/2/public/full?alt=json', function (data) {
    var trHTML = '';
    var latest = '';
    var len = data.feed.entry.length;
      
    for (var i = len-1; i > 0 ; --i)
    {
    var time =  data.feed.entry[i].gsx$time.$t;
    var date = data.feed.entry[i].gsx$date.$t;
    var level = data.feed.entry[i].gsx$level.$t;
    var citycode = data.feed.entry[i].gsx$citycode.$t;
    var latest = data.feed.entry[len-1].gsx$level.$t;
    if( citycode = "1001" ) 
    {
    var city = "nagpur";
    }
    var voltage =  data.feed.entry[i].gsx$voltage.$t ;
    trHTML += '<tr bgcolor="#e6f7ff"><th>' + time + '</th><td>' + date +
          '</th><td>' + level + '</td><th>' + citycode + '</th><td>' + city + '</th><td>' + voltage + '</td></tr>';
    }
    console.log(trHTML);
    $('#tableContent').html(trHTML);
    var trHTML = '';
    console.log(latest);
    $('#tableContent1').html(latest);
    var latest = '';
    });
    }
    ```

Answer 1

Actually when i mereged your code with my code.i got some issues.I tried a lot but unable to do it.can you fix it sir.so that it will work fine.实际上，当我将您的代码与我的代码合并时。我遇到了一些问题。我尝试了很多但无法做到。先生，您能修复它吗？这样它就可以正常工作了。

<html>

<head>
  <title>Live Monitoring Of Water</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Linking custom css sheet -->
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body background="back.jpg">
  <!-- page heading -->
  <div class="div1" style="border-style: ridge">
    <h1 style="color:red; text-align:center;"> FLOOD MONITORING</h1>
  </div>

  <!-- page navbar -->
  <div class="navbar">
    <a href="graph.html">Graph</a>
    <a href="map.html">Map</a>
    <a href="table.html">Table</a>
  </div>
  <hr style="height:3px;border-width:0;color:rgb(148, 96, 96);background-color:gray">


  <!-- Current data table -->
  <table id="currentDataTable" cellspacing='0' cellpadding='10'" border='1' , bgcolor='white' border-bottom: 2px solid #ddd;>
    <h1 > Current Data </h1>
   <tr bgcolor='gray' align=" right">
    <th align="right">Real time water level value :-</th>
    </tr>
    <tbody style="font-weight:bold ; width: 100px ; height: 30px;" cellspacing='0' cellpadding='10' align="center"
      id="currentDataTableBody"></tbody>
  </table>

  <!-- Live water level data table -->
  <hr style="height:3px;border-width:0;color:rgb(148, 96, 96);background-color:gray">
  <center>
    <h1>Live Water Level Data</h1>
  </center>
  <center>
    <table id="liveWaterLevelTable" cellspacing='0' cellpadding='10' border='1' , bgcolor='white' border-bottom: 1px
      solid #ddd;>
      <tr bgcolor='gray'>
        <th>Sr</th>
        <th>Time</th>
        <th>Date</th>
        <th>Water level</th>
        <th>City code</th>
        <th>Voltage</th>
      </tr>
      <tbody id="liveWaterLevelTableBody"></tbody>
    </table>

    <!-- pagination -->
    <div class="pagination">
      <button class="paginate-button" type="button" onclick="paginate(-1)">&lt;</button>
      <button class="paginate-button" type="button" onclick="paginate(1)">&gt;</button>
      <select onchange="setPagiSize(this)"></select>
      <input type="checkbox" id="chkReverse" onchange="setOrder(this)" />
      <label for="chkReverse">Reverse order</label>
    </div>
  </center>
  <hr style="height:3px;border-width: 1;color:gray; background-color:gray">
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $(document).ready(function () {
    refreshTable();
    setInterval(refreshTable, 5000);
    
  });

  // global variables
  const
    $pagination = $('.pagination'),
    $tbody = $('#liveWaterLevelTableBody'),
    pageSizeOptions = [10, 15, 25, 50, 100],
    url = 'https://spreadsheets.google.com/feeds/list/1f1GTmf6-73sgdrKux5DTSbCsI1ObygfWjmUNQIxMqc0/2/public/full?alt=json';

  let entry = [],
    data = [],
    page = 0,
    pageSize = pageSizeOptions[1],
    pageSizeMax = 1,
    isReversed = false,
    change = true;

  function refreshTable() {
    $.getJSON(url, function (response) {
      entry = response.feed.entry;
      data = entry;
      pageSizeMax = Math.ceil(entry.length / pageSize);
      
      if(change === true){
        paginate(1);
        change = false;
      }

      let option = '';
      var trHTML = '';
      var latest = '';
      var len = response.feed.entry.length;
      var latest = response.feed.entry[len - 1].gsx$level.$t;

      // display page size options
      $.each(pageSizeOptions, (_, o) => {
        option += `<option value="${o}"${o === pageSize ? " selected" : ""}>${o}</option>`;
      });
      $pagination.find('select').html(option);

      $('#currentDataTableBody').html(latest);
    });

  }

  // function to apply pagination
  function paginate(pageAdd) {
    page += pageAdd;
    if (page < 1) {
      page = 1;
      return false;
    }
    if (page > pageSizeMax) {
      page = pageSizeMax;
      return false;
    }
    fillTable();
  }

  // function to set order as reversed or not
  function setOrder(e) {
    isReversed = !isReversed;
    data = entry.reverse();
    page = 1;
    fillTable();
  }

  // function to change page size
  function setPagiSize(e) {
    page = 1;
    pageSize = $(e).val();
    pageSizeMax = Math.ceil(entry.length / pageSize);
    fillTable();
  }

  // function to fill table in each pagination
  function fillTable() {
    const
      len = isReversed ? data.length + 1 : 0,
      pageBase = (page - 1) * pageSize;
    let tbody = '';

    $.each(data.slice(pageBase, pageSize * page), (i, o) => {
      tbody += `<tr>
        <td>${Math.abs(len - ((i + 1) + pageBase))}</td>
        <td>${o.gsx$time.$t}</td>
        <td>${o.gsx$date.$t}</td>
        <td>${o.gsx$level.$t}</td>
        <td>${o.gsx$citycode.$t}</td>
        <td>${o.gsx$voltage.$t}</td>
        </tr>`;
    });
    $tbody.html(tbody)
  }

</script>

</html>```

我想对我获取的数据进行分页，以便前 20 个条目将在第一页上，然后在下一页上单击下一个按钮时的下 20 个值

问题描述

enter code here在此处输入代码

1 个解决方案

解决方案1
0 2021-03-26 11:20:20

我想对我获取的数据进行分页，以便前 20 个条目将在第一页上，然后在下一页上单击下一个按钮时的下 20 个值

问题描述

enter code here在此处输入代码

1 个解决方案

解决方案1 0 2021-03-26 11:20:20

解决方案1
0 2021-03-26 11:20:20