文档章节

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

 墨染宁
发布于 2016/06/10 17:19
字数 811
阅读 220
收藏 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
comet学习(一)异步Servlet 与Comet 风格应用程序(转)

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

Airship
2016/11/02
6
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
杨慧强/android-page

android-page 前言 android 分页列表数据加载引擎,主要封装了android分页列表数据加载的各个组件,如果你有一个需要分页加载的List列表,都可以使用此框架实现。该框架主要的功能有: 自动维...

杨慧强
2016/10/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

deepin系统使用deepin-wine安装exe程序

deepin自带原生deepin-wine使用命令如下: deepin-wine QQMusicSetup.exe deepin-wine的程序位置: /root/.wine 默认安装的QQ浏览器快捷方式位置: /root/.wine/drive_c/'Program Files'/Te...

临江仙卜算子
39分钟前
1
0
快速get到学习Linux操作系统的点

快速get到学习Linux操作系统的点 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。Linux能够运行主要的UNIX工具软件...

linuxCool
45分钟前
2
0
聊聊:Linux分区的那些方案

安装linux的整体步骤其实比较简单,唯一可能值得说明的地方,大概就是linux的分区了。 下面来给大家推荐一些分区方案。 1 分两个区 实际上,很多时候我们只需要分两个区:`/`和交换分区,日常...

Linux就该这么学
56分钟前
1
0
适配器模式和外观模式

适配器模式: 将一个类的接口,转换成客户期望的另一个接口。适配器让原本不兼容的类可以合作无间。 例子: //将Enumeration转换成Iteratorpublic class EnumerationIterator implements Iter...

王怀楼
58分钟前
2
0
7-CXF与Spring整合发布webservice

Spring+CXF整合来管理webservice 实现步骤: 1. 添加cxf.jar 包(集成了Spring.jar、servlet.jar ),spring.jar包 ,servlet.jar 包 2. 编写业务类,通过CXF来发布webservice 员工管理: 方法...

江戸川
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部