집 >웹 프론트엔드 >JS 튜토리얼 >JQuery+Ajax 새로 고치지 않는 페이징 예제 코드

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

高洛峰원래의: 2017-01-11 09:49:271127검색

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

구현 원리는 매우 간단합니다. 페이지 번호를 클릭할 때마다 비동기적으로 수행됩니다. 페이지의 데이터를 가져오기 위해 서버로 이동합니다. 간략한 소개는 다음과 같습니다.
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 중국어 웹사이트에 주목하세요!

성명：

이전 기사：jQuery 스크롤 이벤트 구현 모니터링 스크롤 막대 페이징 예제다음 기사：jQuery 스크롤 이벤트 구현 모니터링 스크롤 막대 페이징 예제

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

관련 기사