使用JQuery创建一个前进按钮和一个后退按钮，以便在mysql数据库中按ID浏览数据。
我希望有一个按钮可以按ID向前浏览Mysql数据库中的数据，另一个按钮可以使用JQuery向后浏览相同的数据。我不想一次显示整个数据库。我想显示项目ID % 1，然后单击前进按钮，然后显示项目ID %2。如果我想再次前进，我可以单击相同的按钮，并显示项目编号3。如果我想后退，我可以单击后退按钮，现在再次显示项目编号2。
目前，它一次显示所有项目，每个项目重复6次，这是数据库中的列数。这是因为变量station_dataP +=。如果我去掉+=并放上=号，它只显示最后一个ID 7，这就是我希望看到的，但它不会在它们之间来回循环。
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 2车站:白楼山地址:杰克逊大道564号。销售:未定义操作员: Marla Pikes顶层SKU:未定义
ID: 2车站:白楼山地址:杰克逊大道564号。销售:未定义操作员: Marla Pikes顶层SKU:未定义
等等。
我可以在vanilla Javascript中做到这一点，但我不能在JQuery中做到这一点。我将显示下面的Javascript代码：
<HTML>
<button type = "button" id="previous"><<<<</button>
<button type = "button" id="next">>>>></button>
<br/>
<br/>
<div id="storesNav"></div> <JQUERY> - DOES NOT WORK PROPERLY
$(document).ready(() => {
$('#previous').click(()=> {
$.ajax({
url:'http://localhost:5000/alldata',
type:'GET',
datatype:'json',
success:(data) => {
var station_dataP ='';
$.each(data, function (key,value){
for(var i in value){
if(i > 0){
i--;
}
station_dataP +='<li>ID: '+value.ID+'</li>' +
'<li>Station: '+value.Station+'</li>' +
'<li>Address: '+value.Address+'</li>' +
'<li>Sales: '+value.Monthly_CStore_Sales+'</li>' +
'<li>Operator: '+value.Operator+'</li>' +
'<li>Top SKU: '+value.Top_SKU+'</li>' +
'</<li>'+'<br/>'; */
});
}
$('#storesNav').append(station_dataP);
}
});
});
//(4)
$('#next').click(()=> {
$.ajax({
url:'http://localhost:5000/alldata',
type:'GET',
datatype:'json',
success:(data) => {
var station_dataP ='';
$.each(data, function (key,value){
for(var i in value){
len = value.length;
if(i < len - 1){
i++;
}
station_dataP +='<li>ID: '+value.ID+'</li>' +
'<li>Station: '+value.Station+'</li>' +
'<li>Address: '+value.Address+'</li>' +
'<li>Sales: '+value.Monthly_CStore_Sales+'</li>' +
'<li>Operator: '+value.Operator+'</li>' +
'<li>Top SKU: '+value.Top_SKU+'</li>' +
'</<li>'+'<br/>'; */
});
}
$('#storesNav').append(station_dataP);
}
});
}); <JAVASCRIPT> IT WORKS HERE BUT NOT THE JQUERY CODE.
function previous(xhttp){
//var xhttp;
//xhttp = new XMLHttpRequest();
var users = JSON.parse(xhttp.responseText);
len = users.length
if(i > 0){
i--;
}
var usersText2 = '';
usersText2 +=
'<div class="prev">' +
'ID: ' + users[i].id + '<br>' +
'Name: ' + users[i].name + '<br>' +
'Email: '+ users[i].email;
document.getElementById("usersNav").innerHTML = usersText2;
}
function next(xhttp){
//var xhttp;
//xhttp = new XMLHttpRequest();
var users = JSON.parse(xhttp.responseText);
len = users.length;
if(i < len - 1){
i++;
}
var usersText = '';
usersText +=
'<div class="next">' +
'ID: ' + users[i].id + '<br>' +
'Name: ' + users[i].name + '<br>' +
'Email: '+ users[i].email;
document.getElementById("usersNav").innerHTML = usersText;
}https://stackoverflow.com/questions/56782250
复制相似问题