JQuery Ajax non-refresh paging example code

Home

Web Front-end

JS Tutorial

JQuery Ajax non-refresh paging example code_jquery

May 16, 2016 pm 05:01 PM

ajax jquery Pagination

Let’s take a look at the renderings first:

The implementation principle is very simple. It uses the jquery.pagination plug-in. Whenever a page number is clicked, it asynchronously goes to the server to get the data of the page. A brief introduction is as follows:
1. Database table structure: very simple, only four fields They are News_id News_title News_time News_readtimes

2. Front page code:

Copy code The code is as follows:

<head runat="server">
<title>JQuery no refresh paging</title>
<link href="Styles/common.css" rel="stylesheet" type="text/css" /> js" type="text/javascript"></script>
<script src="Scripts/jquery.pagination.js" type="text/javascript"></script>
<script type="text/javascript"> >
$("#Pagination").pagination(<%=pageCount %>, {
callback: PageCallback,
prev_text: 'Previous page',
next_text: 'Next Page',
items_per_page: pageSize,
num_display_entries: 6,//Number of paging entries in the main part of continuous paging
current_page: pageIndex,//Current page index
num_edge_ent ries: 2//Paging at the beginning and end of both sides The number of entries
});

// Page call calls
Function PageCallback (INDEX, JQ) {
Inittable (INDEX);
}

// Request data
Function Inittable (PageIndex) {
$ .ajax ({
Type: "Post",
Datatype: "Text",
URL: 'Ajax// PagerHandler.ashx',
data: "pageIndex=" (pageIndex 1) "&pageSize=" pageSize, success: function(data) { $("#Result tr:gt(0)") .remove();//Remove the rows in the table with the ID of Result, starting from the second row (the page changes here according to the page layout) Append the returned data to the table ;

Copy code The code is as follows:

<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%">
                                                                                                                         < ; Th style = "width: 60%" & gt; 
 Title 
 & lt;/th & gt; 
 & lt; th style = "width: 20%" & gt; 
 update time 
 & lt; /th>
                                                                                                                                               ;/tr>
        </table>
                                                                                                           , page background file


The main purpose here is to get the total number of records: 




Copy code 


 The code is as follows: 

public string pageCount = string.Empty;//Total number of entries

protected void Page_Load(object sender, EventArgs e)
{

if (!IsPostBack) { pageCount = new News().GetNewsCount(); } }

Four. The most important thing is the ajax handler: PagerHandler.ashx

Copy code

Code As follows:

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='#'>" 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;
            }
        }
    }

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn