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

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

高洛峰원래의: 2017-01-10 13:53:09993검색

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

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

성명：

이전 기사：JavaScript 트리 구조에 대한 자세한 설명다음 기사：JavaScript 트리 구조에 대한 자세한 설명

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

관련 기사