Implementation of JQuery code page, download the source code

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Web development can hardly be avoided, paging, Microsoft GridView, AspPager settings page data can be automatic paging, but here the browser will flash, the user experience is not very friendly, I finish the JQuery page, and use

The JQuery template to display data, the user experience is very friendly

The project structure:

Jquery.tools.pack.js is a Jquery data template

Default.aspx display paging data, Member_Ajax.aspx is the JSON format data is output to the page, PageBar.cs page toolbar, entity class Student.cs

The first Default.aspx page will need to refer to the JS file

JQuery uses the 1.4.1.1 download.: http://pan.baidu.com/share/link?shareid=3024434948&uk=2920032010

JQuery data showed that the template JS download.: http://pan.baidu.com/share/link?shareid=3030793948&uk=2920032010

Paging button style download address: http://pan.baidu.com/share/link?shareid=3146737028&uk=2920032010

Default.aspx JS code page, the page number, can be customized, can also be placed in the configuration file, the queryString function is based on the URL parameter name, obtain the parameter value

<script type="text/javascript">
        var pagesize = 10;
        var page = thispage();
        $(document).ready(function () {
            ajaxList(page);
        });

        function queryString(pname) {
            var query = location.search.substring(1);
            var str = "";
            params = query.split("&");
            if (params.length > 0) {
                for (var n in params) {
                    var pairs = params[n].split("=");
                    if (pairs[0] == pname) {
                        str = pairs[1];
                        break;
                    }
                }
            }
            return str;
        }

        function thispage() {
            var r = /^[1-9][0-9]*$/;
            if (queryString('page') == '') return 1;
            if (r.test(queryString('page')))
                return parseInt(queryString('page'));
            else
                return 1;
        }

        function ajaxList(currentpage) {
            if (currentpage != null) page = currentpage;
            $.ajax({
                type: "get",//Get type, obtained by QueryString method, post type, Form acquisition value
                dataType: "json",
                data: "pageIndex=" + currentpage + "&pagesize=" + pagesize + "&clienttt=" + Math.random(),
                url: "Member_Ajax.aspx",
                error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); },
                success: function (d) {
                    switch (d.result) {
                        case '-1':
                            Alert(d.returnval);
                            break;
                        case '0':
                            Alert(d.returnval);
                            break;
                        case '1':
                            $("#ajaxList").setTemplateElement("tplList", null, { filter_data: true });
                            $("#ajaxList").processTemplate(d);
                            $("#ajaxPageBar").html(d.pagebar);
                            break;
                    }
                }
            });
        }

 </script>

The Default.aspx page Form code is as follows, the page data using the JQuery jTemplates binding data, very convenient, only need to set the JSON format data, refer to JS file

<textarea id="tplList" style="display: none">
            <table class="cooltable" width="300px">
            <thead>
                <tr>
                    <th align="center" scope="col" style="width:30px;"><input id="checkedAll" name="checkedAll" type="checkbox" title="All choose / select none" /></th>
                    <th scope="col" style="width:60px;">ID</th>
                    <th width="120px">Full name</th>
                    <th scope="col" width="60px">Age</th>
                    
               </tr>
            </thead>
            <tbody>
    {#foreach $T.table as record}
    <tr>
        <td align="center">
            <input class="checkbox" name="selectID" type="checkbox" value='{$T.record.MemberNo}' />
        </td>
        <td align="center">{$T.record.Id}</td>
        <td align="left">
            {$T.record.Name}
        </td>
        <td align="left">
            {$T.record.Age}
        </td>
    </tr>
    {#/for}
</tbody>
            </table>
     </textarea>
    <div id="ajaxList" style="width:500px;">
    </div><br />
    <div id="ajaxPageBar" style="width:500px;">
    </div>

$T.table.Id Id corresponds to the Id entity attribute, table is the name of the list collection JSON format

The Javascript method used in Member_Ajax.aspx page code, note: here is the JSON format data is output to the page, with the JQuery data template, all Member_Ajax.aspx pages, should not contain Html tags, format the code as follows

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Member_Ajax.aspx.cs" Inherits="Nick.Kuang.Web.Member_Ajax" %>

Member_Ajax.aspx CS code

protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write(GetAll());
        }

        private string GetAll()
        {
            List<Student> list = new List<Student>();

            for (int i = 0; i <100; i++)
            {
                list.Add(new Student { Id = i, Name = "Name" + i, Age = i });
            }
            
            int pageIndex = GetPage();
            int pageSize = StrToInt(QueryString("pagesize"), 10); ;
            JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer();

            string result = javascriptSerializer.Serialize(list.Skip(pageSize * (pageIndex - 1)).Take(pageSize).ToList());
            string response = "{\"result\" :\"1\"," +
                "\"returnval\" :\"The success of the operation\"," +
                "\"pagebar\" :\"" + PageBar.GetPageBar(3, "js", 2, list.Count, pageSize, pageIndex, "javascript:ajaxList(<#page#>);") + "\"," +
               "\"" + "totalCountStr" + "\":" + 10 + ",\"" + "table" + "\":" + result + 
                "}";
            return response;
        }

        private static int GetPage()
        {
            int page = StrToInt(QueryString("pageIndex"), 0) <1 ? 1 : StrToInt(QueryString("pageIndex"), 0);
            return page;
        }

        private static int StrToInt(string value, int defaultValue)
        {
            if (IsNumeric(value))
                return int.Parse(value);
            else
                return defaultValue;
        }

        /// <summary>
        /// Access to querystring
        /// </summary>
        /// <param name="s">The parameter name</param>
        /// <returns>The return value</returns>
        private static string QueryString(string s)
        {
            if (HttpContext.Current.Request.QueryString[s] != null && HttpContext.Current.Request.QueryString[s] != "")
            {
                return SafetyQueryS(HttpContext.Current.Request.QueryString[s].ToString());
            }
            return string.Empty;
        }

        /// <summary>
        /// Some tags filter string of
        /// </summary>
        /// <param name="theString"></param>
        /// <returns></returns>
        private static string SafetyQueryS(string theString)
        {
            string[] aryReg = { "'", ";", "\"", "\r", "\n", "<", ">" };
            for (int i = 0; i <aryReg.Length; i++)
            {
                theString = theString.Replace(aryReg[i], string.Empty);
            }
            return theString;
        }

        private static bool IsNumeric(string value)
        {
            System.Text.RegularExpressions.Regex myRegex = new System.Text.RegularExpressions.Regex("^[-]?[1-9]*[0-9]*$");
            if (value.Length == 0)
            {
                return false;
            }
            return myRegex.IsMatch(value);
        }

Use the Serialize method in the JavaScriptSerializer Object data type can be converted to JSON format data, bid farewell to the past spliced into a string method

The Student entity class code attribute

public class Student
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }
    }

The PageBar class to use the code page, the ajaxList function calls the Default.aspx to achieve paging, without refreshing the page

public class PageBar
    {
        /// <summary>
        /// Full mode: Digital + + + page at the end of the first record information + specific page flip
     /// </summary>
        /// <param name="stype"></param>
        /// <param name="stepNum"></param>
        /// <param name="pageRoot"></param>
        /// <param name="pageFoot"></param>
        /// <param name="countNum"></param>
        /// <param name="currentPage"></param>
        /// <param name="Http1"></param>
        /// <param name="HttpM"></param>
        /// <param name="HttpN"></param>
        /// <param name="limitPage"></param>
        /// <returns></returns>
        private static string GetDetailbar(string stype, int stepNum, int pageRoot, int pageFoot, int pageCount, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<div class='p_btns'>");
            //sb.Append("<span class='total_count'>A total of "+ countNum.ToString () +", "+ currentPage.ToString (the) +" / "+ (pageCount.ToString) +".&nbsp;&nbsp;&nbsp;</span>");
            sb.Append("<span class='total_count'>A total of" + countNum.ToString() + "Record/" + pageCount.ToString() + "Page&nbsp;&nbsp;</span>");
            if (countNum > pageSize)
            {
                if (currentPage != 1)//As long as it is not the first page
                    sb.Append("<a target='_self' href='" + GetPageUrl(currentPage - 1, Http1, HttpM, HttpN, limitPage) + "' title='On one page'>&laquo;</a>");
                if (pageRoot > 1)
                {
                    sb.Append("<a target='_self' href='" + GetPageUrl(1, Http1, HttpM, HttpN, limitPage) + "'>1..</a>");
                }
                if (stepNum > 0)
                {
                    for (int i = pageRoot; i <= pageFoot; i++)
                    {
                        if (i == currentPage)
                            sb.Append("<span class='currentpage'>" + i.ToString() + "</span>");
                        else
                            sb.Append("<a target='_self' href='" + GetPageUrl(i, Http1, HttpM, HttpN, limitPage) + "'>" + i.ToString() + "</a>");
                        if (i == pageCount)
                            break;
                    }
                }
                if (pageFoot < pageCount)
                {
                    sb.Append("<a target='_self' href='" + GetPageUrl(pageCount, Http1, HttpM, HttpN, limitPage) + "'>.." + pageCount + "</a>");

                }
                if (currentPage != pageCount)//Not as long as the last page
                    sb.Append("<a target='_self' href='" + GetPageUrl(currentPage + 1, Http1, HttpM, HttpN, limitPage) + "' title='The next page'>&raquo;</a>");
                if (stype == "html")
                    sb.Append("<span class='jumppage'>Go to section <input type='text' name='custompage' size='2' onkeyup=\"this.value=this.value.replace(/\\D/g,'')\" onafterpaste=\"this.value=this.value.replace(/\\D/g,'')\" onkeydown=\"if(event.keyCode==13) {window.location='" + HttpN + "'.replace('<#page#>',this.value); return false;}\" /> Page</span>");
            }
            sb.Append("</div>");
            return sb.ToString();
        }

        /// <summary>
        /// Page navigation
        /// </summary>
        /// <param name="mode">Support 1=simple,2=normal,3=full</param>
        /// <param name="stype">html/js,Only when the stype is HTML and mode is turning 3 when display any page</param>
        /// <param name="stepNum">Step number, if the number of steps for the I, digital navigation page is 2i+1</param>
        /// <param name="countNum">Total number of records</param>
        /// <param name="pageSize">The number of records per page</param>
        /// <param name="currentPage">The current page number</param>
        /// <param name="Http1">The first page link address templates, support JS</param>
        /// <param name="HttpM">The M page address templates, support JS, M is less than limitPage</param>
        /// <param name="HttpN">The N page address templates, support JS, N is greater than limitPage</param>
        /// <param name="limitPage"></param>
        /// <returns></returns>
        public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage)
        {
            string pagebar = "";
            //if (countNum > pageSize)
            //{
            int pageCount = countNum % pageSize == 0 ? countNum / pageSize : countNum / pageSize + 1;
            currentPage = currentPage > pageCount ? pageCount : currentPage;
            currentPage = currentPage <1 ? 1 : currentPage;
            int stepageSize = stepNum * 2;
            int pageRoot = 1;
            int pageFoot = pageCount;
            pageCount = pageCount == 0 ? 1 : pageCount;
            if (pageCount - stepageSize <1)//The number of pages less
            {
                pageRoot = 1;
                pageFoot = pageCount;
            }
            else
            {
                pageRoot = currentPage - stepNum > 1 ? currentPage - stepNum : 1;
                pageFoot = pageRoot + stepageSize > pageCount ? pageCount : pageRoot + stepageSize;
                pageRoot = pageFoot - stepageSize <pageRoot ? pageFoot - stepageSize : pageRoot;
            }
           
            pagebar = GetDetailbar(stype, stepNum, pageRoot, pageFoot, pageCount, countNum, pageSize, currentPage, Http1, HttpM, HttpN, limitPage);
                 
            return pagebar;
        }

        public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string HttpN)
        {
            return GetPageBar(mode, stype, stepNum, countNum, pageSize, currentPage, HttpN, HttpN, HttpN, 0);
        }

        public static string GetPageUrl(int chkPage, string Http1, string HttpM, string HttpN, int limitPage)
        {
            string Http = string.Empty;
            if (chkPage == 1)
                Http = Http1;
            else
                Http = (chkPage > limitPage || limitPage == 0) ? HttpN : HttpM;
            return Http.Replace("<#page#>", chkPage.ToString());
        }
    }    

The final result is, the following diagram

Basically write the code, I hope useful for all of us, study together, progress together

Download the source code: http://pan.baidu.com/share/link?shareid=2604334191&uk=2920032010



Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Elizabeth at November 15, 2013 - 9:30 PM