Php 如何通过“下一步”和“上一步”按钮逐个显示搜索到的json记录？_Php_Javascript_Jquery_Json

Php 如何通过“下一步”和“上一步”按钮逐个显示搜索到的json记录？

php javascript jquery json

Php 如何通过“下一步”和“上一步”按钮逐个显示搜索到的json记录？,php,javascript,jquery,json,Php,Javascript,Jquery,Json,我有一个工作代码，它搜索json记录并逐个显示所有记录。我想根据搜索词显示记录工作代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery PHP Json Response</title> <style type="text/css"> div { text-align:center; padding:10px;

我有一个工作代码，它搜索json记录并逐个显示所有记录。我想根据搜索词显示记录

工作代码如下：

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery PHP Json Response</title>
<style type="text/css">
div
{
text-align:center;
padding:10px;
}

#msg {
width: 500px;
margin: 0px auto;
}
.members {
width: 500px ;
background-color: beige;
}
</style>
</head>
<body>

<input type="text" id="search-json-input" />
<input type="button" id="search-json-submit" value="search" />
<br/>
<br/>

<input type="button" name="next" id="next" value="NEXT" />
<br/>
<input type="button" name="previous" id="previous" value="PREV" />
<br/>
<div id="msg">
    <table id="userdata" border="1">
        <thead>
            <th>Email</th>
            <th>Sex</th>
            <th>Location</th>
            <th>Picture</th>
            <th>audio</th>
            <th>video</th>
        </thead>
        <tbody></tbody>
    </table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">

var users = [];
var idx = 0;
var renderRow = function (idx) {
    if (idx < 0) idx = 0;
    if (idx > (users.length - 1)) idx = (users.length - 1);
    var user = users[idx];
    var tblRow = "<tr>" + "<td>" + user.email + "</td>" + "<td>" + user.sex + "</td>" + "<td>" + user.location + "</td>" + "<td>" + "<img src=" + user.image + ">" + "</td>" + "<td>" + "<audio src=" + user.video + " controls>" + "</td>" + "<td>" + "<video src=" + user.video + " controls>" + "</td>" + "</tr>";
    $('#userdata tbody').html(tblRow);
};
var url = "json.php";
$.getJSON(url, function (data) {
    users = data.members;
    renderRow(idx);
    $('#next').click(function() {
        idx++;
        renderRow(idx);
    });
    $('#previous').click(function() {
        idx--;
        renderRow(idx);
    });
});

</script>
</body>
</html>


jQuery PHP Json响应
div
{
文本对齐：居中；
填充：10px；
}
#味精{
宽度：500px；
保证金：0px自动；
}
.成员{
宽度：500px；
背景颜色：米色；
}








电子邮件
性
位置
图画
音频
视频
var用户=[]；
var-idx=0；
var renderRow=函数（idx）{
如果（idx<0）idx=0；
如果（idx>（users.length-1））idx=（users.length-1）；
var user=users[idx]；
var tblRow=“”+”+user.email+“+”+user.sex+“+”+user.location+“+”+“+”+”
将JSON响应作为变量附加到某物上，以便以后可以引用它。

警告：如果您有超过1000个项目，这种方法不会很好地工作，因为它太慢，无法返回更大的数据集

创建当前索引变量（int）
删除响应处理程序中的循环（即对each（）的调用）
更新文档，使其具有“左键”、“右键”和第0项

按钮不得向服务器提交任何内容
附加项的格式可能与当前的格式相同

创建的按钮有一个onclick处理程序，该处理程序：

重复此操作，直到更改了有效的索引

对于左侧，确认索引在递减时是否有效，然后递减
对于右侧，确认索引在递增时是否有效，然后递增
您的数据验证（正则表达式）是否为当前值
如果数据不正确，请再次更改索引

删除当前显示的项目文本，并在更新的索引处追加该项目

你能举例说明吗？我能写下来吗？是的，但不要太快（事情太多了）。请在周三左右的时候查看这里