javascript - 我想对我获取的数据进行分页,以便前 20 个条目将在第一页上,然后在下一页上单击下一个按钮时的下 20 个值
问题描述
我已经以相反的顺序从 html 表上的电子表格中获取数据,以便最新条目将位于第一行。但它在一个页面上显示所有条目。我想对它进行分页(使用 offset 和 limit 进行后续调用),以便前 20 个条目将在第一页上,然后下一个 20 在第二页上,依此类推。但我没有任何想法如何。如果有人可以帮助我,那就太好了。在此先感谢..!
下面是我的javascript代码:
在此处输入代码
$(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 = '';
});
}
```
解决方案
实际上,当我将您的代码与我的代码合并时。我遇到了一些问题。我尝试了很多但无法做到这一点。您能修复它吗?先生。这样它就可以正常工作了。
<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)"><</button>
<button class="paginate-button" type="button" onclick="paginate(1)">></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>```