jQuery的旁边显示列表中的项目

Question

亲爱的＃1用户，

我已经作出，其显示由多个记录的表列表。目前它每次最多显示10次。我有一个按钮，点击后会显示表格中的下10条记录。我想知道如何编写代码以使其工作。

function showAll(qstring,qtype){ 
$("#vsdiv").show(); 
var myurl="scripts/searchadmin.php"; 
$.ajax({ 
    url: myurl, dataType:'json',data:{querystring:qstring,querytype:qtype}, 
    success: function(member){ 
    $("#resultstable").append('<tr class="yellow">'+ 
             '<th>#REC</th><th>JOINED</th><th>USER NAME</th>'+ 
             '<th>CONTACT</th><th>ADDRESS</th><th>PHONE</th>'+ 
             '<th>EMAIL</th><th>STATUS</th><th>SELECT</th></tr>'); 
    var j=0;var totrecs=1; 
    for(var i=0;i<10;i++){ 
    $("#resultstable").append('<tr class="trow'+j+'">'+ 
        '<td class="ids" id="z'+i+'">'+totrecs+'</td>'+ 
      '<td>'+member[i].jdate+'</td>'+ 
      '<td class="users"  id="username'+i+'">'+member[i].username+'</td>'+ 
      '<td id="contact'+i+'">'+member[i].fname+' '+member[i].lname+'</td>'+ 
      '<td id="myaddress'+i+'">'+member[i].address1+' '+member[i].town+'</td>'+ 
      '<td id="phone'+i+'">'+member[i].phone+'</td>'+ 
      '<td id="email'+i+'">'+member[i].email+'</td>'+ 
      '<td id="status'+i+'">'+member[i].status+'</td>'+ 
      '<td><input type="checkbox" name="whome" id="showMe'+i+'"'+ 
             'class="boxes" onclick="getMe('+i+')" /></td></tr>'); 
             $('#sr').html('Showing 1 of '+member.length+' Members') 

}); 


    totrecs++; 
    j++; 
} 
} 
}); 
} 

这是当前功能，显示前10条记录，我怎么可以显示下一组10，当我按一下按钮，任何想法？你能做到这一点

Answer 1

的一种方法是，以范围的信息添加到您的查询可能是这个样子：

var rangestart = 0; 
var rangeend = 9; 
var rangeincrement = 10; 
function showAll(qstring,qtype){ 
$("#vsdiv").show(); 
var myurl="scripts/searchadmin.php"; 
$.ajax({ 
    url: myurl, dataType:'json',data:{querystring:qstring,querytype:qtype,rangestart:rangestart,rangeend:rangeend}, 
    success: function(member){ 
    $("#resultstable").append('<tr class="yellow">'+ 
             '<th>#REC</th><th>JOINED</th><th>USER NAME</th>'+ 
             '<th>CONTACT</th><th>ADDRESS</th><th>PHONE</th>'+ 
             '<th>EMAIL</th><th>STATUS</th><th>SELECT</th></tr>'); 
    var j=0;var totrecs=1; 
    for(var i=0;i<10;i++){ 
    $("#resultstable").append('<tr class="trow'+j+'">'+ 
        '<td class="ids" id="z'+i+'">'+totrecs+'</td>'+ 
      '<td>'+member[i].jdate+'</td>'+ 
      '<td class="users"  id="username'+i+'">'+member[i].username+'</td>'+ 
      '<td id="contact'+i+'">'+member[i].fname+' '+member[i].lname+'</td>'+ 
      '<td id="myaddress'+i+'">'+member[i].address1+' '+member[i].town+'</td>'+ 
      '<td id="phone'+i+'">'+member[i].phone+'</td>'+ 
      '<td id="email'+i+'">'+member[i].email+'</td>'+ 
      '<td id="status'+i+'">'+member[i].status+'</td>'+ 
      '<td><input type="checkbox" name="whome" id="showMe'+i+'"'+ 
             'class="boxes" onclick="getMe('+i+')" /></td></tr>'); 
             $('#sr').html('Showing 1 of '+member.length+' Members') 

}); 


    totrecs++; 
    j++; 
} 
rangestart += rangeincrement; // this assigns the new range start value 
rangeend += rangeincrement; // assign new range end value 
} 
}); 
} 

那么你的按钮即可再次执行相同的查询。您还需要在服务器端更改查询，以仅返回所需的范围，例如

SELECT * FROM xyz WHERE xyz.somevalue = querystring LIMIT rangestart, rangeend; 

这应该得到你正在寻找的结果。