JS无刷新分页插件

本文介绍一个本人自己写的一JS分页插件

 <script src="/Js/smart.page.min.js" type="text/javascript"></script>

页面JS调用，实例化带参数的函数

function pageplugin(pagesize, url, ext, async) 

参数说明

pagesize：指定每页行数

url：请求数据的接口地址

ext：class名称的后缀，本文写了1，每个class名称后面都有个1，就是这个1了，这样一个页面就可以实例多次

async：是否异步

<script type="text/javascript">
        //实例化函数,每页3行，接口为/Test/Page.ashx?a=1，class名称后缀为1
        var page = new pageplugin(3, '/Test/Page.ashx?a=1',1);
        // page.append = true;//加载更多的方式翻页 
        page.dataspace = "smart_page_dataspace1";//放置展示数据的容器
        page.setdata = function (data) {
            var json = eval('(' + data + ')');
            var html = "<table>";
            for (var i = 0; i < json.list.length; i++) {
                html += "<tr>";
                html += "<td>" + json.list[i].Id + "</td><td>" + json.list[i].UserName + "</td>";
                html += "</tr>";
            }
            html += "</table>";
            this.sethtml(html); //将拼接的Html打印出来
        }
        page.getdata(); //初始化加载第一页数据      
     
    </script>

 

显示class名称

当前页：smart_page_pageindex

总页数：smart_page_pagecount

每页行数：smart_page_pagesize

总行数：smart_page_rowcount

<span title="当前页" class="smart_page_pageindex1"></span>/<span title="总页数" class="smart_page_pagecount1"></span>页
<span title="每页行数" class="smart_page_pagesize1"></span>条每页 总共<span title="总行数" class="smart_page_rowcount1"></span>条

按钮class名称

首页：smart_page_first

上一页：smart_page_pre

下一页：smart_page_next

末页：smart_page_last

<input class="smart_page_first1" type="button" value="首页" />
<input class="smart_page_pre1" type="button" value="上一页" />
<input class="smart_page_next1" type="button" value="下一页" />
<input class="smart_page_last1" type="button" value="末页" />

如果是手机加载更多的方式点下一页也是smart_page_next

<div class="smart_page_next1">加载更多</div>

放置数据的容器class名称smart_page_dataspace

<div class="smart_page_dataspace1"></div>

接口的page.ashx文件全文

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace TestWeb.Test
{
    /// <summary>
    /// page 的摘要说明
    /// </summary>
    public class page : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int pagesize = 10;
            int pageindex = 1;
            if (!string.IsNullOrEmpty(context.Request["pagesize"]))
                pagesize = Convert.ToInt32(context.Request["pagesize"]);
            if (!string.IsNullOrEmpty(context.Request["pageindex"]))
                pageindex = Convert.ToInt32(context.Request["pageindex"]);

            int rowcount = 208;//替换成方法获取符合条件的行数
            int pagecount = rowcount % pagesize == 0 ? rowcount / pagesize : rowcount / pagesize + 1;

            List<Users> list = new List<Users>();
            Users u;
           
            //替换成获取指定页码的数据
            for (int i = 1; i <= pagesize; i++)
            {
                u = new Users();
                u.Id = i + (pageindex - 1) * pagesize;
                u.UserName = this.GetType().Name + u.Id;
                list.Add(u);
            }

            string result = ObjectToJSON(new
            {
                @list = list,
                @time1 = DateTime.Now.ToString(),
                @time2 = DateTime.Now.ToString("yyyy-MM-dd-HH-mm-ss-fff"),
                @pagesize = pagesize,
                @pageindex = pageindex,
                @rowcount = rowcount,
                @pagecount = pagecount
            });

            context.Response.Write(result);
        }

        /// <summary>
        /// 对象转JSON
        /// </summary>
        /// <param name="obj">对象</param>
        /// <returns>JSON格式的字符串</returns>
        public static string ObjectToJSON(object obj)
        {
            JavaScriptSerializer jss = new JavaScriptSerializer();
            try
            {
                return jss.Serialize(obj);
            }
            catch (Exception ex)
            {

                throw new Exception("JSONHelper.ObjectToJSON(): " + ex.Message);
            }
        }

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

    public class Users
    {
        public int Id { get; set; }
        public string UserName { get; set; }
    }
}

HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/Js/smart.page.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="smart_page_dataspace1">
    </div>
    <div>
        <span title="当前页" class="smart_page_pageindex1"></span>/<span title="总页数" class="smart_page_pagecount1"></span>页
        <span title="每页行数" class="smart_page_pagesize1"></span>条每页 总共<span title="总行数" class="smart_page_rowcount1"></span>条
    </div>
    <input class="smart_page_first1" type="button" value="首页" />
    <input class="smart_page_pre1" type="button" value="上一页" />
    <input class="smart_page_next1" type="button" value="下一页" />
    <input class="smart_page_last1" type="button" value="末页" />
    <div class="smart_page_next1">
        加载更多</div>
</body>
<script type="text/javascript">
    //实例化函数,每页3行，接口为/Test/Page.ashx?a=1，class名称后缀为1
    var page = new pageplugin(3, '/Test/Page.ashx?a=1', 1);
    page.append = true; //加载更多的方式翻页 
    page.dataspace = "smart_page_dataspace1"; //放置展示数据的容器

    page.setdata = function (data) {
        var json = eval('(' + data + ')');

        var html = "<table>";
        for (var i = 0; i < json.list.length; i++) {
            html += "<tr>";
            html += "<td>" + json.list[i].Id + "</td><td>" + json.list[i].UserName + "</td>";
            html += "</tr>";
        }
        html += "</table>";
        this.sethtml(html); //将拼接的Html打印出来
    }
    page.getdata(); //初始化加载第一页数据      
     
</script>
</html>

smart.page.min.zip文件下载