JQuery+Ajax 새로 고치지 않는 페이징 예제 코드-JS 튜토리얼-php.cn

JQuery+Ajax 새로 고치지 않는 페이징 예제 코드

高洛峰

풀어 주다： 2017-01-10 13:53:09

원래의

962명이 탐색했습니다.

먼저 렌더링을 살펴보세요.

JQuery+Ajax 새로 고치지 않는 페이징 예제 코드

구현 원리는 매우 간단합니다. 페이지 번호를 클릭할 때마다 비동기적으로 수행됩니다. 페이지의 데이터를 가져오기 위해 서버로 이동합니다. 간략한 소개는 다음과 같습니다.
1. 데이터베이스 테이블 구조: 매우 간단합니다. 4개의 필드는 News_id News_title News_time News_readtimes

코드:

<head runat="server">
    <title>JQuery无刷新分页</title>
    <link href="Styles/common.css" rel="stylesheet" type="text/css" />
    <link href="Styles/paging.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.pagination.js" type="text/javascript"></script>
    <script type="text/javascript">    
    var pageIndex = 0;
    var pageSize = 3;

    $(function() {       
        InitTable(0);              

        $("#Pagination").pagination(<%=pageCount %>, {
            callback: PageCallback,
            prev_text: &#39;上一页&#39;,
            next_text: &#39;下一页&#39;,
            items_per_page: pageSize,
            num_display_entries: 6,//连续分页主体部分分页条目数
            current_page: pageIndex,//当前页索引
            num_edge_entries: 2//两侧首尾分页条目数
        });

        //翻页调用
        function PageCallback(index, jq) {           
            InitTable(index);
        }
        //请求数据
        function InitTable(pageIndex) {                                
            $.ajax({ 
                type: "POST",
                dataType: "text",
                url: &#39;Ajax/PagerHandler.ashx&#39;,
                data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,
                success: function(data) {                                 
                    $("#Result tr:gt(0)").remove();//移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
                    $("#Result").append(data);//将返回的数据追加到表格
                }
            });            
        }
    });
    </script>
</head>

로그인 후 복사

<form id="form1" runat="server">
    <center>
        <table id="Result" border="1" cellpadding="5" style="border-collapse: collapse; margin:20px;
            border: solid 1px #85A8BE;width:60%">
            <tr>
                <th style="width: 10%">
                    ID
                </th>
                <th style="width: 60%">
                    标题
                </th>
                <th style="width: 20%">
                    更新时间
                </th>
                <th style="width: 10%">
                    点击量
                </th>
            </tr>
        </table>
        <div id="Pagination" class="paging">
        </div>
    </center>
    </form>

로그인 후 복사

3. 여기의 페이지 배경 파일

은 주로 총 레코드 수를 가져오는 데 사용됩니다.

public string pageCount = string.Empty;//总条目数
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                pageCount = new News().GetNewsCount();
            }
        }

로그인 후 복사

4. 가장 중요한 것은 ajax 핸들러입니다: PagerHandler.ashx

 public class PagerHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string str = string.Empty;
            int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
            int size = Convert.ToInt32(context.Request["pageSize"]);
            if (pageIndex == 0)
            {
                pageIndex = 1;
            }
            int count = 0;
            News n = new News();
            List<News> list = n.GetNewsList(pageIndex, size, ref count);
            StringBuilder sb = new StringBuilder();
            foreach (News p in list)
            {
                sb.Append("<tr><td>");
                sb.Append(p.News_id);
                sb.Append("</td><td>");
                sb.Append("<a href=&#39;#&#39;>"+p.News_title+"</a>");
                sb.Append("</td><td>");
                sb.Append(p.News_time);
                sb.Append("</td><td>");
                sb.Append(p.News_readtimes);
                sb.Append("</td></tr>");
            }
            str = sb.ToString();
            context.Response.Write(str);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

로그인 후 복사

자세히 보기 여러 JQuery+Ajax 새로 고치지 않는 페이징 예제 코드와 관련된 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!