文档章节

jquery.pagination.js 可以通过异步请求服务端在客户端无刷新分页

 墨染宁
发布于 2016/06/10 17:19
字数 811
阅读 168
收藏 0

 

图样:


视图页

@{
    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
作品 0
武汉
jquery.pagination.js分页

jquery.pagination.js分页 序言 这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家。 友情提示下:我有...

charley158
2014/01/06
0
0
dotNetFlexGrid v1.22 发布

dotNetFlexGrid- Web2.0 asynchronous grid control for asp.net What is it? dotNetFlexGrid是一款asp.net原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部......

磊华
2010/08/23
854
0
JQuery FlexiGrid的asp.net完美解决方案:dotNetFlexGrid-asp.net原生的异步表格控件登录 开源中国

dotNetFlexGrid- Web2.0 asynchronous grid control for asp.net What is it? dotNetFlexGrid是一款asp.net原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部......

磊华
2010/08/23
0
0
comet学习(一)异步Servlet 与Comet 风格应用程序(转)

简介: 自 JSR 315 规范(即Servlet 3.0)的草案公开发布以来,最新一代Servlet 规范的各种新特性被越来越多的 开发人员所关注。规范中提到的一系列高级目标:如可插拔的Web 框架、便捷开发特...

Airship
2016/11/02
6
0
高并发业务接口开发思路(实战)

高并发业务除了需要有支撑高并发的服务器架构,还需要根据业务需求和架构体系。 . 设计出合理的开发方案,这里根据一个实践过业务场景分析开发思路,罗列出高并发接口需要注意的点,以及设计...

SFLYQ
2017/06/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java IO类库之PrintStreamWriter

* A <code>PrintStream</code> adds functionality to another output stream, * namely the ability to print representations of various data values * conveniently. Two other fea......

老韭菜
52分钟前
0
0
qduoj~前端~二次开发~笔记

青岛大学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上部署运行,其实整体运行还是建立在docker的容器虚拟环境里,这里暂时不需要docker。安装环境是Ubuntu14-64bit 1.安装一大...

虚拟世界的懒猫
55分钟前
6
0
ConcurrentHashMap源码解读

部分内容转自:http://jiabinyuan.xyz/#/app/archive/detail/25 内部结构 内部采用了segment结构,每一个segment相当于一个hashtable。看下面的结构图: 从图的结构我们可以了解到,Concurr...

edwardGe
今天
1
0
Ubuntu终端Tab键自动补全

打开 /etc/bash.bashrc,找到下列代码,取消注释。 #enable bash completion in interactive shells#if ! shopt -oq posix; then# if [-f /usr/share/bash-completion/bash_compl......

大熊猫
今天
0
0
polipo socks5代理转http代理

天朝的网络,哎~ 装个 yarn 都时而会卡 假设在SSlocal 已经装好运行的前提下,来安装设置 polipo sudo apt-get install polipo sudo vim /etc/polipo/config 追加下列配置内容,并保存 socksP...

纯洁徐
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部