Question

我有一个服务，每页提供20条记录，现在我想修改这个分页过程以加载更多内容进程，这意味着当页面加载时，它显示前点击后加载更多内容按钮的前20条记录记录加上接下来的20条记录（共40条记录）。我完全不知道如何做这个过程..任何人都可以建议我。

Answer 1

<强> HTML

<table id="personDataTable">
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>

</table>
<div id="More">load more</div>

<强> JS

var Default=4;
var DefaultViewMore=5;
var inc=0;
var data=[
            {
            id: 1,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 2,
            firstName: "David",
            lastName: "Bowie"},
             {
            id: 3,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 4,
            firstName: "David",
            lastName: "Bowie"},
    {
            id: 5,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 6,
            firstName: "David",
            lastName: "Bowie"},
             {
            id: 7,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 8,
            firstName: "David",
            lastName: "Bowie"},
    {
            id: 9,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 10,
            firstName: "David",
            lastName: "Bowie"},
             {
            id: 11,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 12,
            firstName: "David",
            lastName: "Bowie"},

    {
            id: 13,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 14,
            firstName: "David",
            lastName: "Bowie"},
             {
            id: 15,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 16,
            firstName: "David",
            lastName: "Bowie"},
        ]

drawTable(data,Default);


$("#More").click(function () {
   Default=Default+ DefaultViewMore;
    drawTable(data,Default);
});

function drawTable(data,bindRow) {

    for (var i = inc; i < data.length; i++) {

        drawRow(data[i]);

        if(data.length-1 == i)
            {
               $("#More").hide();
            }

        if(i==bindRow)
            {
                inc=bindRow;
                break;
            }
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.firstName + "</td>"));
    row.append($("<td>" + rowData.lastName + "</td>"));
}

<强> CSS

table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}

使用javascript加载更多内容onclick

1 个答案: