DOTNET POINT: Paging in aps.net using jquery and json

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="JScript.js" type="text/javascript"></script>
    <script src="JScript2.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        var p = 2;
        var k = 0;
        function pp(s) {
        var m=(parseInt(s)- parseInt(1))*parseInt(p);
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/yy",
                data: "{s:"+m+",t:"+p+"}",
                dataType: "json",
                async: false,
                success: function (data) {
                    k = data.d.length
                    $('#gv').html('');
                    $('#gv').append("<tr><th>EID</th><th>NAME</th></tr>");
                    for (var i = 0; i < p; i++)
                        $('#gv').append("<tr><th>" + data.d[i].DID + "</th><th>" + data.d[i].DNAME + "</th></tr>");
                }

            });
        }
        $(document).ready
    (
    function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/x",
            data: "",
            dataType: "json",
            async: false,
            success: function (data) {
                k = data.d.length
                $('#gv').html('');
                $('#gv').append("<tr><th>EID</th><th>NAME</th></tr>");
                for (var i = 0; i < p; i++)
                    $('#gv').append("<tr><th>" + data.d[i].DID + "</th><th>" + data.d[i].DNAME + "</th></tr>");
                var n = Math.ceil(parseInt(k) / parseInt(p));
                $('#gv1').html('');
                $('#gv1').append("<tr><td colspan='2'>");
                for (var j = 1; j <= n; j++)
                    $('#gv1').append("<a style='text-decoration:none' href='#' onclick='pp(" + j + ")'>" + j + "</a> ");
                $('#gv1').append("</td></tr>");
            }

        });

    }
    )
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table align="center" cellpadding=0 cellspacing=0 >
    <tr><td colspan="2">
    <table id="gv" width="100%" align="center" border=1 cellpadding=0 cellspacing=0>
    </table>
    </td></tr>
    <tr><td colspan="2">
    <table width="100%" id="gv1" align="center" border=1 cellpadding=0 cellspacing=0>
    </table>
    </td></tr>
    </table>

    </div>
    </form>
</body>
</html>

The page looks like :

Web service Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    DataClassesDataContext o = new DataClassesDataContext();
    public WebService ()
    {


    }
    [WebMethod]
    public List<EMP> x()
    {
        return o.EMPs.ToList();
    }
    [WebMethod]
    public List<EMP> yy(int s,int t)
    {
        var m = (from x in o.EMPs select x).Skip(s).Take(t).ToList();
        return m;
    }
    [WebMethod]

}

DOTNET POINT

Friday, 15 June 2012

Paging in aps.net using jquery and json

No comments:

Post a Comment