JQuery+Ajax without refreshing the paged instance code

  • 2020-03-30 01:38:27
  • OfStack

First look at the renderings:
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201402/20140208091437.png ">

The implementation principle is very simple, using the plug-in jquery. Pagination, whenever the page number is clicked asynchronously to the server to fetch the data of the page, a brief introduction is as follows:
Database table structure: simple   The four fields are News_id& PI; News_title   News_time   News_readtimes

Ii. Front page code:

<head runat="server">
    <title>JQuery No refresh pagination </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() {       

        $("#Pagination").pagination(<%=pageCount %>, {
            callback: PageCallback,
            prev_text: ' The previous page ',
            next_text: ' The next page ',
            items_per_page: pageSize,
            num_display_entries: 6,//Number of page entries in the continuous page body section
            current_page: pageIndex,//Current page index
            num_edge_entries: 2//The number of page entries on both sides

        //Page calls
        function PageCallback(index, jq) {           
        //The request data
        function InitTable(pageIndex) {                                
                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 Result, starting with the second row (which changes depending on the page layout)
                    $("#Result").append(data);//Appends the returned data to the table

<form id="form1" runat="server">
        <table id="Result" border="1" cellpadding="5" style="border-collapse: collapse; margin:20px;
            border: solid 1px #85A8BE;width:60%">
                <th style="width: 10%">
                <th style="width: 60%">
                     The title 
                <th style="width: 20%">
                     Update time 
                <th style="width: 10%">
                     Click on the quantity 
        <div id="Pagination" class="paging">

Three, the page background file

Here is mainly to get the total number of records:

public string pageCount = string.Empty;//The total number of entries
        protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)
                pageCount = new News().GetNewsCount();

The main one is the ajax handler: 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("<a href='#'>"+p.News_title+"</a>");
            str = sb.ToString();
        public bool IsReusable
                return false;

Related articles: