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; }
    }
}

View Code

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>

View Code

smart.page.min.zip文件下载

秒客网

JS无刷新分页插件

相关文章