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

I have the working code which fetches all the records from the json, but how can I make the records available one by one on the click of the button(next/previous)?

The following code is working to fetch all the records:

    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");
            });
        });
    });

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);
    });
});

Below is something that will do 1 row at a time, i'm guessing you are wanting paging IE 25 rows at a time, but since that wasn't really clear in your question i didn't make that assumption.

I also highly recommend changing your code to implement jQuery DataTables.

If you want the 25 rows per page you'd need to change index to page and then have a page size variable, and a loop in the function ShowMembers.

HTML:

<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>

JS:

var members = [];
var index = 0;

$(document).ready(function(){
    var url="json.php";
    $("#userdata tbody").html("");
    $.getJSON(url,function(data){
        members = data.members;
        ShowMembers(0);
    });
});

function ShowMembers(offset)
{
    index += offset;
     var tblRow = 
            "<tr>"
                +"<td>"+members[index].email+"</td>"
                +"<td>"+members[index].sex+"</td>"
                +"<td>"+members[index].location+"</td>"
                +"<td>"+"<img src="+members[index].image+">"+"</td>"
                +"<td>"+"<audio src="+members[index].video+" controls>"+"</td>"
                +"<td>"+"<video src="+members[index].video+" controls>"+"</td>"
                +"</tr>";

    if(index == members.length - 1)
        $("#btnNext").attr("disabled", true);
    else
        $("#btnNext").attr("disabled", false);

    if(index == 0)
        $("#btnPrev").attr("disabled", true);
    else
        $("#btnPrev").attr("disabled", false);

    $("#userdata tbody").html(tblRow);
}