Create Pagination using Java script Using C#

-
Html Design Code

<!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">
    <title></title>
    <script src="Script/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="Script/JSPaging.js" type="text/javascript"></script>
    <link href="Style/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:HiddenField ID="hdnStartingIndex" ClientIDMode="Static" runat="server" />
    <asp:HiddenField ID="hdnEndingIndex" ClientIDMode="Static" runat="server" />
    <asp:HiddenField ID="hdnCurrentPage" ClientIDMode="Static" runat="server" />
    <asp:HiddenField ID="hdnLastPage" ClientIDMode="Static" runat="server" />
    <asp:HiddenField ID="hdnSortingOrder" ClientIDMode="Static" runat="server" />
    <div id="divAllUsers" style="background: #f3f3f3;">
    </div>
    </form>
</body>
</html>


JavaScript
$(document).ready(function () {
    BindUserData(1, 5, "ORDER BY User_id ASC");
});
function BindUserData(PageIndex, PageSize, ImageID) {
    var StartIndex = ((PageIndex - 1) * PageSize) + 1;
    var SortingOrder = "";

    switch (ImageID) {
        case "imgIdUp":
            SortingOrder = "ORDER BY User_id ASC";
            break;
        case "imgIdDown":
            SortingOrder = "ORDER BY User_id DESC";
            break;
        case "imgNameUp":
            SortingOrder = "ORDER BY Name ASC";
            break;
        case "imgNameDown":
            SortingOrder = "ORDER BY Name DESC";
            break;
        case "imgCityUp":
            SortingOrder = "ORDER BY City ASC";
            break;
        case "imgCityDown":
            SortingOrder = "ORDER BY City DESC";
            break;
        case "imgEmailUp":
            SortingOrder = "ORDER BY email ASC";
            break;
        case "imgEmailDown":
            SortingOrder = "ORDER BY email DESC";
            break;
        default:
            SortingOrder = ImageID;
            break;
    }

    if (SortingOrder != "") {
        document.getElementById('hdnSortingOrder').value = SortingOrder;
    }
    else {
        SortingOrder = "ORDER BY User_id ASC";
    }

    $.ajax({
        type: "POST",
        url: "Default.aspx/GetAllUserData",
        data: '{"StartIndex":"' + StartIndex + '","PageSize":"' + PageSize + '","SortingOrder":"' + SortingOrder + '"}',
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#divAllUsers').empty();
            $('#divAllUsers').append("<tr><table><tr class='PerformanceHeader'>" +
                                    "<td style=width:100px;><div style=display:inline;float:left;>Id</div><div style=display:inline;float:left;margin-left:10px;><table><tr><td><img id=imgIdUp src=Images/Up.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(document.getElementById('hdnCurrentPage').value,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr><tr><td><img id=imgIdDown src=Images/Down.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(document.getElementById('hdnCurrentPage').value,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr></table></div></td>" +
                                    "<td style=width:175px;><div style=display:inline;float:left;>Name</div><div style=display:inline;float:left;margin-left:10px;><table><tr><td><img id=imgNameUp src=Images/Up.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr><tr><td><img id=imgNameDown src=Images/Down.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr></table></div></td>" +
                                    "<td style=width:175px;><div style=display:inline;float:left;>City</div><div style=display:inline;float:left;margin-left:10px;><table><tr><td><img id=imgCityUp src=Images/Up.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr><tr><td><img id=imgCityDown src=Images/Down.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr></table></div></td>" +
                                    "<td style=width:350px;><div style=display:inline;float:left;>Email</div><div style=display:inline;float:left;margin-left:10px;><table><tr><td><img id=imgEmailUp src=Images/Up.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr><tr><td><img id=imgEmailDown src=Images/Down.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr></table></div></td>" +
                                    "</tr></table></tr>");
            if (data.d.length > 0) {
                var LastData = data.d.length - 1;
                for (var i = 0; i < data.d.length; i++) {
                    $('#divAllUsers').append("<tr><table><tr class=trUser style=vertical-align:middle;>" +
                                            "<td style=width:100px;>" + data.d[i].User_id + "</td>" +
                                            "<td style=width:75px;>" + data.d[i].Name + "</td>" +
                                            "<td style=width:75px;>" + data.d[i].City + "</td>" +
                                            "<td style=width:200px;>" + data.d[i].email + "</td></tr>" +
                                            "<tr><td colspan=4><hr/></td></tr></table></tr>");
                }
                document.getElementById('hdnEndingIndex').value = data.d[LastData].CountData;
                document.getElementById('hdnStartingIndex').value = data.d[0].CountData;
                document.getElementById('hdnLastPage').value = data.d[0].NumberOfPage;
                document.getElementById('hdnCurrentPage').value = PageIndex;

                var AppendDiv = "<tr><table><tr><td colspan=2>Showing <div class=TradesResult>" + data.d[0].CountData + "</div> to <div class=TradesResult>" + data.d[LastData].CountData + "</div> from <div class=TradesResult>" + data.d[LastData].TotalRecords + "</div> Users</td>" +
                                "<td colspan=1>Show <select id=ddlPageSize onchange=BindUserData(1,this.value,document.getElementById('hdnSortingOrder').value);><option value=2>2</option><option value=5>5</option><option value=10>10</option><option value=25>25</option><option value=50>50</option><option value=100>100</option></select> Users</td>" +
                                "<td colspan=2><table><tr>" +
                                        "<td><a class=PageLink id=LinkFirst onclick=BindUserData(1,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value); style=cursor:pointer;>First</a><div id=divFirst style=display:none;color:silver;>First</div></td>" +
                                        "<td><div style=padding-left:10px;display:inline;></div></td>" +
                                        "<td><a class=PageLink id=LinkPrev onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value)-1,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value); style=cursor:pointer;>Prev</a><div id=divPrev style=display:none;color:silver;>Prev</div></td>" +
                                        "<td><div style=padding-left:10px;display:inline;></div></td><td>";

                for (var j = 1; j <= data.d[0].NumberOfPage; j++) {
                    AppendDiv += "<a class=PageLink id=" + j + " onclick=BindUserData(this.id,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value);>   " + j + "   </a><div class=divCurrentPage id=divCurrentPage" + j + " style=display:none;color:silver;>" + j + "</div>";
                }
                AppendDiv += "</td><td><div style=padding-left:10px;display:inline;></div></td>" +
                            "<td><a id=LinkNext class=PageLink onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value)+1,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value); style=cursor:pointer;>Next</a><div id=divNext style=display:none;color:silver;>Next</div></td>" +
                            "<td><div style=padding-left:10px;display:inline;></div></td>" +
                            "<td><a class=PageLink id=LinkLast onclick=BindUserData(parseInt(document.getElementById('hdnLastPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value); style=cursor:pointer;>Last</a><div id=divLast style=display:none;color:silver;>Last</div></td>" +
                            "</tr></table></td></tr></table></tr>";

                $('#divAllUsers').append(AppendDiv);
                if (data.d[0].NumberOfPage == 1) {
                    document.getElementById('LinkLast').style.display = 'none';
                    document.getElementById('LinkNext').style.display = 'none';
                    document.getElementById('LinkFirst').style.display = 'none';
                    document.getElementById('LinkPrev').style.display = 'none';
                    document.getElementById('divLast').style.display = 'inline';
                    document.getElementById('divNext').style.display = 'inline';
                    document.getElementById('divFirst').style.display = 'inline';
                    document.getElementById('divPrev').style.display = 'inline';
                }
                if (PageIndex == data.d[0].NumberOfPage) {
                    document.getElementById('LinkLast').style.display = 'none';
                    document.getElementById('divLast').style.display = 'inline';
                    document.getElementById('LinkNext').style.display = 'none';
                    document.getElementById('divNext').style.display = 'inline';
                }
                if (PageIndex < data.d[0].NumberOfPage && PageIndex == 1) {
                    document.getElementById('LinkFirst').style.display = 'none';
                    document.getElementById('divFirst').style.display = 'inline';
                    document.getElementById('LinkPrev').style.display = 'none';
                    document.getElementById('divPrev').style.display = 'inline';
                }
                document.getElementById('ddlPageSize').value = PageSize;
                $('#divCurrentPage' + PageIndex).css({ 'display': 'inline', 'font-weight': 'bolder' });
                $('#' + PageIndex).css({ 'display': 'none' });
                $('.TradesResult').css({ 'color': 'green', 'font-weight': 'bolder', 'display': 'inline' });
            }
        },
        error: function (result) {

        }
    });
}


WebMethod
  [WebMethod]

        public static AllUsers[] GetAllUserData(int StartIndex, int PageSize, string SortingOrder)
        {
            List<AllUsers> Details = new List<AllUsers>();

            BalPagination dataServices = new BalPagination();
            DataTable dtAllUserData = new DataTable();

            dtAllUserData = dataServices.GetAllUser(StartIndex, PageSize, SortingOrder);

            if (dtAllUserData != null)
            {
                foreach (DataRow dtRow in dtAllUserData.Rows)
                {
                    AllUsers SetData = new AllUsers();

                    SetData.User_id = Convert.ToInt32(dtRow["User_id"]);
                    SetData.Name = Convert.ToString(dtRow["Name"]);
                    SetData.City = Convert.ToString(dtRow["City"]);
                    SetData.email = Convert.ToString(dtRow["email"]);
                    SetData.CountData = Convert.ToInt32(dtRow["CountData"]);
                    SetData.TotalRecords = Convert.ToInt32(dtRow["TotalRecords"]);
                    SetData.NumberOfPage = Convert.ToInt32(dtRow["NumberOfPage"]);

                    Details.Add(SetData);
                }
            }

            return Details.ToArray();
        }

        public class AllUsers
        {
            public int User_id { get; set; }
            public string Name { get; set; }
            public string City { get; set; }
            public string email { get; set; }
            public int CountData { get; set; }
            public int TotalRecords { get; set; }
            public int NumberOfPage { get; set; }
        }

Class File
public class BalPagination
    {
        DBmanager odal = new DBmanager();
        BALGetpara obget = new BALGetpara();
        public DataTable GetAllUser(int StartIndex, int PageSize, string SortingOrder)
        {
            DataTable dtGetUserDetail = null;
            SqlParameter[] Parameters = new SqlParameter[4];
            Parameters[0] =obget.Getpara("@operation", 1);
            Parameters [1] =obget.Getpara("@StartIndex", StartIndex);
            Parameters [2] =obget.Getpara("@PageSize", PageSize);
            Parameters[3] = obget.Getpara("@SortOrder", SortingOrder);
            dtGetUserDetail = odal.GetDatatable ("sp_User", Parameters);

            return dtGetUserDetail;
        }
    }

Data Layer
 SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Tushar"].ToString());

public SqlCommand GetCommand()
        {
            SqlCommand cmd = new SqlCommand();
            cmd.CommandTimeout = 0;
            cmd.Connection = con;
            cmd.CommandType = CommandType.StoredProcedure;
            return cmd;
        }

public DataTable GetDatatable(string Spname, SqlParameter[] para)
        {
            DataTable dt = new DataTable();
            SqlCommand cmd = GetCommand();
            cmd.Parameters.AddRange(para);
            cmd.CommandText = Spname.ToString();
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            try
            {
                con.Open();
                da.Fill(dt);
                return dt;
            }
            catch (Exception e)
            {
                throw e;
            }
            finally
            {
                con.Close();
                cmd.Dispose();
            }
        }

Stored Procedure
ALTER PROCEDURE [dbo].[sp_User]
       @operation int=0,
       @StartIndex int=0,
       @PageSize int=0,
       @NumberOfPage int=0,
       @NumberOfPageModulo int=0,
       @TotalRecords int=0,
       @WhereConditionAccount varchar(Max)='',
       @WhereConditionCount varchar(Max)='',
       @EndIndex int=0,
       @PageIndex int=0,
       @Query varchar(max)='',
       @SortOrder varchar(50)=''
AS
BEGIN
       IF(@operation=1)
              BEGIN
                     select @NumberOfPage= count(*)/@PageSize,@NumberOfPageModulo= count(*)%@PageSize,@TotalRecords= count(*) from tbl_User

                     if(@NumberOfPageModulo>0)
                     set @NumberOfPage += 1 

       set @Query=';with samp as(
     select ROW_NUMBER() OVER ('+@SortOrder+') AS CountData,* from tbl_User )
       select *,'+convert(varchar(50),@NumberOfPage)+' as NumberOfPage,'+convert(varchar(50),@TotalRecords)+' as TotalRecords from samp where CountData between '+convert(varchar(50),@StartIndex)+' and '+convert(varchar(50),((@StartIndex-1)+@PageSize))
                          
                           execute(@Query)
              END
END



Comments

Post a Comment

Popular posts from this blog

Periodic Restart Settings for Application Pool Recycling

-
Image
Periodic Restart Settings for Application Pool Recycling <periodicRestart> Overview The  <periodicRestart>  element contains configuration settings that allow you to control when an application pool is recycled. You can specify that Internet Information Services (IIS) 7 recycle the application pool after a time interval (in minutes) or at a specific time each day. You can also configure IIS to base the recycle on the amount of virtual memory or physical memory that the worker process in the application pool is using or configure IIS to recycle the application pool after the worker process has processed a specific number of requests Compatibility Version Notes IIS 10.0 The  <periodicRestart>  element was not modified in IIS 10.0. IIS 8.5 The  <periodicRestart>  element was not modified in IIS 8.5. IIS 8.0 The  <periodicRestart>  element was not modified in IIS 8.0. IIS 7.5 The  <periodi...
Read more

Generate image ,pdf and Video Thumb using node js

-
      Using  imagemagick  Generate image thumb                 var im = require( 'imagemagick' );         var image = random() + '.png' ;         var imagepath = 'uploads/images_thumb/' + image;         var pathToFile = path.join(__dirname, req.files[i].path),             pathToSnapshot = path.join(__dirname, '/' + imagepath);         im.resize({             srcPath: pathToFile               , dstPath: pathToSnapshot               , width: 150               , height: 150   ...
Read more

How to receive JSON object in POST and GET using web api

-
  ASP.NET Web API   is a great tool for building HTTP services with ASP.NET. It makes many things HTTP that used to be ill defined in .NET easy and allows you to build a variety of services very easily. Like other complex abstraction frameworks it makes complex scenarios super easy, while some very simple and common operations are not quite as straight forward or as transparent as they should be.   Capturing the raw Request Body But things are not so easy and transparent when you want to pass simple parameters like strings, numbers, dates etc. Because Web API is based on a host of conventions, some things that should be easy, such as easily picking up the raw content of a POST or PUT operation and capturing it, aren't quite so transparent as the automatic type mapping shown above. One thing you might expect to be able to easily do, is to pick up the entire content body and map it to a parameter like this: [ HttpPost ]      ...
Read more