Client Side paging in HTML Table using jQuery AJAX and Web Service

Last Reply one year ago By pandeyism

Posted one year ago

how to create paging in client  side using jquery for ajax json table...

with 10 rows per page...

<table id="tblgrid">
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        GetProduct();
    });
  
    
    function GetProduct() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/GetData",
            data: {},
            dataType: "json",
            success: function (data) {
                var table = $('#tblgrid');
                var rows = "";
                for (var i = 0; i < data.d.length; i++) {
                    rows += "<div class=trclass>" +
                            "<tr><td class=tdcolumn>" +
                            "<div class=tablediv>" +
                            "<div class=Productid>" + data.d[i].ProductId + "</div>" +
                            "<div class=sproductname>" + data.d[i].ProductName + "</div><br />" +
                            '<p><a class="btn btdeal" data-id="' + data.d[i].ProductId + '" id=btnDeal role="button" href="www.google.com" target="_blank">submit</a></p>' +
                            "</div></td></tr></div>"
                }
                table.append(rows);
            },
            failure: function (response) { alert(response.d); },
            error: function (response) { alert(response.d); }
        });
    }
</script>