2

我有从 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");
            });
        });
    });
4

2 回答 2

2

下面是一次会做 1 行的事情，我猜你想要一次分页 IE 25 行，但由于你的问题并不清楚，所以我没有做出这个假设。

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

如果您想要每页 25 行，则需要更改index为page，然后在函数中有一个page size变量和 a 。loopShowMembers

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);
}
于 2013-08-03T07:47:11.173 回答
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>

脚本

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);
    });
});
于 2013-08-03T07:56:47.790 回答