jquery.pagination.js 可以通过异步请求服务端在客户端无刷新分页
jquery.pagination.js 可以通过异步请求服务端在客户端无刷新分页
墨染宁 发表于2年前
jquery.pagination.js 可以通过异步请求服务端在客户端无刷新分页
  • 发表于 2年前
  • 阅读 132
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

摘要: 操作代码简介易懂易于上手,样式可以自己进行优化。自己要用的时候找代码是最积极的- -

 

图样:


视图页

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Scripts/pagination_zh/lib/pagination.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/pagination_zh/lib/jquery.pagination.js"></script>
</head>

<body>
<script type="text/javascript">
   
    var pageSize = 10; //每页显示多少条信息
    $(function () {
       
        var sum = $("#sum").text();
        
        alert(sum);
        // 创建分页
        $("#Pagination").pagination(sum, {
            num_edge_entries: 1, //边缘页数
            num_display_entries:10, //主体页数
            callback: paginationCallback, //回调函数
            items_per_page: pageSize, //每页显示多少项
            prev_text: "前一页",
            next_text: "后一页"
        });
    });
    function paginationCallback(page_index, jq) {
        $.post("/Home/GetPageList", { "PageIndex": page_index, "pageSize": pageSize }, function (result) {
            var str = "";
            //result=eval("("+result+")");

//这里的拼接凭个人喜好。可以写Class优化 可以更改标签。
            $.each(result, function (index, item) {
                str += "<li><span>" + (item.Lid) + "</span><span>" + item.Ltxt + "</span></li>";
            });
            $("#List>li").remove();

//每次调用的时候删除所有的子集,然后再添加新的
            $("#List").append(str);
        })
    }
</script>

//最好不要放在一个容器里,如果放在一个容器,Pagination这个DIV最好用相对定位到该容器底部


<div id="a" style="width:1000px;height:500px;background:#0094ff;color:white">
    <ul id="List">

    </ul>
</div>
<div id="Pagination" class="meneame"></div>
  <div>
        <span id="sum">@ViewBag.a</span>

//测试用,取值可以用Input type="hidden" value="" 来取

 //原贴有些没写出来
  </div>
</body>
</html>


控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        FenYeEntities db = new FenYeEntities();
        public ActionResult Index()
        {
            ViewBag.a = db.LiuYan.ToList().Count; //获得当前行数,在前台用JS取到,这种办法很笨,我是第一次用,有好的办法或者优化的请多指教- -
            return View();
        }
      
        public ActionResult GetPageList(int pageIndex,int pageSize)
        {
    
            var list = db.LiuYan.ToList();
            return Json(list.Skip(pageIndex * pageSize).Take(pageSize), JsonRequestBehavior.AllowGet);

//取值 跳过多少行,返回多少行
        }
    }
}
 


原贴中有DTO,我这里直接用的EF数据模型,DTO是需要啥就填啥- -需要的请前往查看

http://www.cnblogs.com/madyina/articles/4019211.html


数据库 SQL Server

create database FenYe
use FenYe
go

create table LiuYan
(
Lid int identity(1,1) primary key,
LName varchar(20),
LQQ varchar(20),
Ltxt varchar(500)
)

declare @i int
set @i=1
while @i<=30
begin
insert into LiuYan (LName,LQQ,Ltxt) values(concat('测试人员',cast(@i as varchar)),'1979843404','这是第'+cast(@i as varchar)+'条数据')
set @i=@i+1
end

select * from LiuYan


不知道怎么上传文件- -,JS文件可以在网上有下到,样式美化请到http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html

样式可以自行编写,CSS文件写的很清晰。

刚刚看了下没有首页和尾页 功能,然后自己去修改了下JS。话说第一次修改这种脚本好激动。。。虽然改之后感觉自己特别逗。。


在主函数中加字段: Last_text:"Last", next_text:"Next",

因为首页和返回上一页到顶点的显示效果同,所以只需要添加

if (opts.Index_text && (current_page > 0 || opts.prev_show_always)) {
                appendItem(0, { text: opts.Index_text, classes: "prev" });
            }

同上原因,末尾和下一页的最末相同

if (opts.Last_text && (current_page < np - 1 || opts.next_show_always)) {
                appendItem(np, { text: opts.Last_text, classes: "next" });
            }
      //改了之后前面初始化的时候也可以加上首页,尾页。

暂时无法修改导航栏过长的问题- -默认最长为10个数字显示格加...要是有人进一步优化就好了= =

第二篇博客完成。。。。

有直接需要的留邮箱。。。。

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 2
码字总数 1299
×
墨染宁
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: