JS无刷新分页插件

2022-12-18 15:56:20

本文介绍一个本人自己写的一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 = ;

            int pageindex = ;

            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 = ;//替换成方法获取符合条件的行数

            int pagecount = rowcount % pagesize ==  ? rowcount / pagesize : rowcount / pagesize + ;

            List<Users> list = new List<Users>();

            Users u;

            //替换成获取指定页码的数据

            for (int i = ; i <= pagesize; i++)

            {

                u = new Users();

                u.Id = i + (pageindex - ) * 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文件下载

码农公寓

相关文章