Tabelle Paginierung in Jquery und HTML

Question

Ich versuche Paginierung auf den folgenden Code. Hinzufügen von Daten zur Tabelle mit JavaScript. Kann mir jemand helfen, wie ich damit umgehen soll?

Jedes Hinzufügen oder Neuschreiben des Codes ist hilfreich.

function onDeviceReady() { 
 
    var queryquery = 
 
    var bestbuy = ""; 
 
    jQuery.getJSON(queryquery, function(resultsbestbuy) { 
 
    var productstopdeal = JSON.parse(resultsbestbuy); 
 
    bestbuy += "<div class=\"table-container\">" + "<table class=\"table table-filter\">"; 
 
    for (i = 0; i < productstopdeal.Products.length; i++) { 
 

 
     bestbuy += "<tbody>" + "<tr>" + "<td>" + "<div class=\"ckbox\">" + "<input type=\"checkbox\" id=\"checkbox1\">" + "<label for=\"checkbox1\"></label>" + "</div>" + "</td>" + "<td>" + "<a href=\"javascript:;\" class=\"star\">" + "<i class=\"glyphicon glyphicon-star\"></i>" + "</a>" + "</td>" + "<td>" + "<div class=\"media\">" + "<a href="; 
 
     var pId = urlEncode(productstopdeal.Products[i].Id); 
 
     bestbuy += pId; 
 

 
     bestbuy += " class=\"pull-left\">" + "<img src=" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + " class=\"media-photo\" style=\"height:120px; width:120px;\">" + "</a>" + "<div>" + "<p>" + "<strong><small><strike>MRP:&nbsp;Rs.&nbsp;" + +"/-" + "</strike><br />Offer&nbsp;price:&nbsp;Rs.&nbsp;" + +"/-<br />You&nbsp;save:&nbsp;Rs.&nbsp;" + +"/-</small></strong>" + "</p>" + "</div>" + "<div class=\"media-body\">" + "<p>" + +"</p>" + "</div>" + "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>" + "</div>" + "</td>" + "</tr>" + "</tbody>" + "</table>"; 
 
    } 
 
    bestbuy += "</div>"; 
 
    $('#bestBuy').html(bestbuy); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="bestBuy"></div>

Answer 1

Corrected Code von dem, was ich verstanden habe.

jQuery.getJSON(queryquery, function (resultsbestbuy) { 
    var bestbuy = ""; 

var productstopdeal = JSON.parse(resultsbestbuy); 

bestbuy += "<div class=\"table-container\">" 
          + "<table class=\"table table-filter\"><tbody>"; 
for (i = 0; i < productstopdeal.Products.length; i++) { 

    bestbuy += "<tr>" 
           + "<td>" 
             + "<div class=\"ckbox\">" 
             + "<input type=\"checkbox\" id=\"checkbox1\">" 
              + "<label for=\"checkbox1\"></label>" 
             + "</div>" 
            + "</td>" 
            + "<td>" 
             + "<a href=\"javascript:;\" class=\"star\">" 
              + "<i class=\"glyphicon glyphicon-star\"></i>" 
             + "</a>" 
            + "</td>" 
            + "<td>" 
             + "<div class=\"media\">" 
              + "<a href='"; 
    var pId = urlEncode(productstopdeal.Products[i].Id); 
     bestbuy += pId; 

    bestbuy += "' class=\"pull-left\">" 
         + "<img src='" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + "' class=\"media-photo\" style=\"height:120px; width:120px;\">" 
        + "</a>" 
        + "<div>" 
         + "<p>" 
          + "<strong><small><strike>MRP:&nbsp;Rs.&nbsp;" + +"/-" 
          + "</strike><br />Offer&nbsp;price:&nbsp;Rs.&nbsp;" + + "/-<br />You&nbsp;save:&nbsp;Rs.&nbsp;" + +"/-</small></strong>" 
         + "</p>" 
        + "</div>" 
        + "<div class=\"media-body\">" 
         + "<p>" + + "</p>" 
        + "</div>" 
        + "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>" 
       + "</div>" 
      + "</td>" 
     + "</tr>" 
} 
bestbuy += "</tbody></table></div>"; 
$('#bestBuy').html(bestbuy); 
});