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

How To Migrate MVC 3 Application To MVC 5

-
Image
Introduction In this article we discuss about how to migrate an MVC 3 application to MVC 5. Step 1:  Open your MVC 3 application in Visual Studio and change the .net framework to 4.7.2 as MVC 5 runs on this framework. MVC 3 Project Property Project → Properties → Application → Target Framework → 4.7.2 For Set MVC 5  Note:  targetFramework in Web.Config will be changing to 4.7.2 Step 2:  Install Asp.Net MVC 5 version through Package Manager Console. Run this Command: Install-Package Microsoft.AspNet.Mvc -Version 5.7.2 Nuget Package Manage → Package Manager Console and run above command. Step 3:  Go to Web.Config(root level) and change, <add key="webpages:Version" value="1.0.0.0" /> to <add key="webpages:Version" value="3.0.0.0" /> webpages:Version Step 4:  Check System.Web.Razor, System.Web.Helpers, System.WebPages.Razor versions. These all should be having versions 3.0.0.0. If th...
Read more

Populate a drop-down in Vue.js and Asp.net Core from an ajax call

-
Image
  If you want to call a function on page load and Bind Drop down  List in Vue js then in this example i will show you how to trigger function on page load in vue js. we will run function on page load vue application. we mostly require to call method on page load in our application. so you want to call function in Vue.js app then you can do it using created option in vue js. So i will give full example so you can check it out. Index . cshtml < div id ="apps">     < div class ="form-group">         < label class ="control-label"> State </ label >         < select v-model ="state" class ="form-control" v-on:change ="getcity($event)">             < option v-for ="state in States" : value ="state.stateId"> {{ state.stateName }} </ option >       ...
Read more

Building a CRUD Application with Ag-Grid

-
Image
To Create Crud operation In Ag-Grid using C# MVC here Is a Download Link  Click here.. Bundle Config bundles.Add( new ScriptBundle( "~/bundles/jquery" ).Include(                          "~/Scripts/jquery-1.12.4.js" ,                         "~/Scripts/jquery-ui-1.12.1.js" ,                         "~/Scripts/bootstrap.js" ,                           "~/Scripts/jquery.validate*" ,                     ...
Read more