Home Web Front-end JS Tutorial JQuery Ajax non-refresh paging example code_jquery

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)
{

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to get variables from PHP method using Ajax? How to get variables from PHP method using Ajax? Mar 09, 2024 pm 05:36 PM

How to get variables from PHP method using Ajax?

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery?

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

jQuery Tips: Quickly modify the text of all a tags on the page

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Use jQuery to modify the text content of all a tags

Best way to implement array pagination in PHP Best way to implement array pagination in PHP May 04, 2024 pm 02:39 PM

Best way to implement array pagination in PHP

PHP vs. Ajax: Solutions for creating dynamically loaded content PHP vs. Ajax: Solutions for creating dynamically loaded content Jun 06, 2024 pm 01:12 PM

PHP vs. Ajax: Solutions for creating dynamically loaded content

PHP and Ajax: Ways to Improve Ajax Security PHP and Ajax: Ways to Improve Ajax Security Jun 01, 2024 am 09:34 AM

PHP and Ajax: Ways to Improve Ajax Security

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute?

See all articles