2

json からすべてのレコードを取得する作業コードがありますが、ボタン (次/前) をクリックしてレコードを 1 つずつ使用できるようにするにはどうすればよいですか?

次のコードは、すべてのレコードを取得するために機能しています。

    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を実装することも強くお勧めします。

1 ページあたり 25 行が必要な場合は、に変更indexしてからpage、page size変数とloop関数内のa を使用する必要があります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);
}
于 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 に答える