table pagination in jquery and html

Question

I am trying pagination on the following code. Adding data to the table using JavaScript. Can anyone help me out with how I should go about it?

Any addition or rewrite of the code will be helpful.

 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 from what i've understood.

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);
});