异步分页

 

 

 

异步分页: 即不刷新页面加载数据;

当需要将网页的数据进行浏览时,就需要使用分页技术,实际上就是当单击某一页的链接时,将该页的数据查询查询出来;

3个参数;

1. total : 表中的数据的记录的总条数; // int result =(int)SqlHelper.ExecuteScalar("select count(*) from tableName");

2.pageSize:每页显示多少条记录(设定一个默认值);

3.pageIndex: 当前需要单击的页码(初次加载pageIndex = 1)；

实现原理:index.html + Handle.ashx(一般处理程序)实现异步分页

初次加载页面

1. 后台向前台提供total值;   前台初始化分页导航栏

2.后台向前台提供 表中 1，pageSize ] 行的记录;

 前台 刷新 table;

 

// 用户单击页码;

 

3.单击页码, 前台向后台提供[ start,end ] 

   其中:   var start = pageSize * (pageIndex - 1) + 1;
             var end = start + pageSize - 1;

   前台接受到数据刷新table;

上代码:

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using Entity;
namespace aspWeb
{
    /// <summary>
    /// GetStudentList 的摘要说明
    /// </summary>
    public class StudentList: IHttpHandler
    {
        public int total = (int)SqlHelper.ExecuteScalar("select count(*) from Student_tb");
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            HttpRequest request = context.Request;
            string  method = context.Request.HttpMethod;
            if(method == "GET") { context.Response.Write(this.total);return; }
            int start = 0, end = 0;//获取 前台 start,end 数据;
            int.TryParse(request.Form["start"], out start);
            int.TryParse(request.Form["end"], out end);
            List<Student> students = GetStudentList(start, end);
            JavaScriptSerializer json = new JavaScriptSerializer();
            context.Response.Write(json.Serialize(students));
        }

//获取表中 [start,end] 行的记录
        public List<Entity.Student> GetStudentList(int start, int end)
        {
            List<Entity.Student> students = new List<Student>();
            string sql = "select * from (select row_number() over (order by Id) as rowNum,* from Student_tb) as t where rowNum between " + start + " and " + end;
            SqlDataReader reader = SqlHelper.ExecuteReader(sql);
            if (reader.HasRows)
            {
                while (reader.Read())
                {
                    Student stu = new Student();
                    stu.ID =reader.GetInt32(1);
                    stu.StuNum = reader.GetString(2);
                    stu.StuName = reader.GetString(3);
                    stu.StuClass = reader.GetString(4);
                    stu.StuBirth = reader.GetDateTime(5).ToShortDateString();
                    stu.StuSex = reader.GetString(6);
                    stu.StuPhone = reader.GetString(7);
                    students.Add(stu);
                }

 

            }

 

            return students;
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

/*前台核心代码*/

    <script type="text/javascript">
        var  table_data = [];  //存放表中的数据;
        $(function () {
            var a = { color: 'blur', sex: 'black', border: '1px solid #ddd' };
            var b = { background: 'red' };
            var totalData = 0; //总记录条数, 默认为0，实际值从后台获取;
            var pageSize = 6; //默认每页显示的10条记录
            $.ajax({
                url: "../StudentList.ashx",
                type: "get",
                dataType: "text",
                data: { start: 1, end: pageSize },
                success: function (data) {
                    totalData = Number(data);//获取总记录条数
                    //开始布局分页导航栏
                    $(".pagination").Paging({
                        classStyle: a,//a标签样式的对象,也可以不定义使用默认值
                        backClass: b,//选中的页数的背景，也可以不定义使用默认值
                        isFirst: true,   //首页按钮是否显示
                        isPre: true,     //下一页按钮是否显示
                        showRecordNum: pageSize, // 一页列表数量
                        totalNum: totalData,   // 总列表数量
                        //单击页码按钮showNum函数被调用
                        showNum: function (pageIndex, total) {
                            //pageIndex 页码,total 总页数
                            var start = pageSize * (pageIndex - 1) + 1;
                            var end = start + pageSize - 1;
                            //向后台要第start 到 end的学生记录;
                            $.ajax({
                                url: "../StudentList.ashx",
                                type: "POST",
                                dataType: "json",
                                data: { start: start, end: end },
                                success: function (data) {
                                    table_data = data;

 

                                    $("#tbody").empty();
                                        $('#table').renderTable();
                                   
                                }

 

                            });

 

                        }
                    });
                }

 

            });
            //获取pageIndex =1 的信息;
            $.ajax({
                url: "../StudentList.ashx",
                type: "POST",
                dataType: "json",
                data: { start: 1, end: pageSize },
                success: function (data) {
                    table_data = data;

 

                    $("#tbody").empty();
                    $('#table').renderTable();

 

                }

 

            });

 

        });

 

    </script>

//加油!

效果图