Question

我有工作代码从json获取所有记录，但是如何通过点击按钮（下一个/上一个）逐个显示记录？

以下代码用于获取所有记录：

    div
    {
        text-align:center;
        padding:10px;
    }

    #msg {
        width: 500px;
        margin: 0px auto;
    }
    .members {
        width: 500px ;
        background-color: beige;
    }

<input type="button" name="next" id="next"><br/>
<input type="button" name="previous" id="previous"><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>

    $(document).ready(function(){
        var url="json.php";
        $("#userdata tbody").html("");
        $.getJSON(url,function(data){
            $.each(data.members, function(i,user){
                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>" ;
                $(tblRow).appendTo("#userdata tbody");
            });
        });
    });

Answer 1

下面是一次只能做一行的事情，我猜你一次要分页IE 25，但是因为你的问题并不是很清楚，所以我没有做出这样的假设。

我还强烈建议您更改代码以实施jQuery DataTables。

如果您希望每页25行，则需要将index更改为page，然后在page size变量中添加一个loop { {1}}。

<强> HTML：

ShowMembers

<强> JS：

<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>
    <input type="button" value="Prev" onclick="ShowMembers(-1)"/>
    <input type="button" value="Next" onclick="ShowMembers(1)"/>
</div>

Answer 2

<强> HTML

<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

var users = [];
var idx = 0;
var renderRow = function (idx) {
    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++;
        if (idx > (users.length - 1)) idx = (users.length - 1);
        renderRow(idx);
    });
    $('#previous').click(function() {
        idx--;
        if (idx < 0) idx = 0;
        renderRow(idx);
    });
});

如何在点击事件中使用javascript / jquery逐个获取json中的数据？

2 个答案: