分页控件之jPaginate

1.网上搜索相关的分页控件,下载它的demo文件

2.打开demo文件,里面会有一个html静态页,打开研究

3.查看源代码,找出控件所依赖的js和css

开始实操:

1.新建一个html或者aspx页面,把控件依赖的js和css拉入项目并在页面中引用

2.创建一个div,对其进行控件的初始化,直接复制demo下的源代码即可

3.现在浏览就应该会出现效果了。

---经过以上,仅仅是把控件展示在项目中,但是还没有和我们的业务进行相关的绑定!!!

----重点来了。

当浏览器/Ajax发出请求分页数据时,后台经过处理把查询到得分页数据返回给浏览器,那么什么时候才生成分页控件呢?

答:当后台把分页数据返回给浏览器,浏览器/Ajax通过回调函数,把返回的数据遍历生成表格,再把分页控件生成。

前端演示:

$(funcsion(){

//当页面加载完毕后,通过ajax发送请求后台,返回分页数据

})

function getList(pageIndex){

//1.0 利用ajax请求后台,得到分页的数据(json字符串),开始生成表格或者其他

$.getJson("/qiwo/getlist.aspx?pagesize=8&pageindex="+pageIndex,function(jsonObj){

if(jsObj.status=="error")

{

alert("失败");

}

else if(jsonObj.status=="sucess")

{

//1.0 正常处理逻辑,将数据遍历生成表格,最终把生成好的html代码追加到所要展示的div中

$("#newlist").html();

//2.0 生成分页控件呈现到页面上

createPageBar(jsonObj.totalPage,pageIndex);

}

});

}

//生成分页控件

function createPageBar(totalPage,currentpage){

$("#demo4").paginate({

count:totalpage,  //总页码,总页码=totalcount/pagesize----肯定是后台获取,所以应该为参数传递

start: currentpage//分页控件高亮选中的页码,这也必须要后台获取,应为如果写死,如start:1,那么当我点击第二页的时候,还是1这个页码高亮选择,却显示第二页的内容

display:totalpage  //当前分页控件显示的页码数量,例如:假如display:2,但是我返回的count=4,即有4页,但是由于设置了display=2,所以只展示2页,剩下两页通过下一页获得。

onChage:function(pageIndex){

//当点击页码时,应该重新发出ajax请求后台,返回该页码的分页数据,再重新生成分页控件,所以!

getList(pageIndex);//一开始,肯定是读取第一页的内容

}

});

------解释一下生成分页控件和发出ajax请求分页数据,所需要传递的参数

ajax所带的参数,是根据后台分页存储过程的参数,而对应的。

分页控件所带的参数,是根据分页控件所需要的参数而对应的。

但是通过ajax请求后台,返回的数据,是包含分页数据和分页控件所需要的相关参数的一个分页实体

}

---由上生成分页控件,需要传递参数,进行生成。而数据是从后台获取分页数据时,和分页数据一起返回给前端的,所以应该在后台定义一个分页的实体类

public class AjaxPage

{

public string status{get,set}//状态

public object datas{get,set}//真正的分页数据

public decimal totalcount{get,set}//总行数

public decimal totalpage{get,set}//总页码,即显示有多少页码,假如=3,即1,2,3页

}

时间: 2024-08-14 04:20:17

分页控件之jPaginate的相关文章

asp.net分页控件CSS

.aspx代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample3_DataPager.aspx.cs" Inherits="Sample_03_DataPager" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

WPF 实现 DataGrid/ListView 分页控件

在WPF中,通常会选用DataGrid/ListView进行数据展示,如果数据量不多,可以直接一个页面显示出来.如果数据量很大,2000条数据,一次性显示在一个页面中,不仅消耗资源,而且用户体验也很糟糕.这篇博客将介绍如何创建一个分页控件. 为了简单起见,这个分页控件目前只有 首页/上一页/下一页/末页/总页数/第几页 等功能.实现思路,首页/上一页/下一页/末页 这四个通过路由事件来实现,在使用时可以使用命令进行绑定,或者直接使用均可.总页数和第几页通过依赖属性来实现,使用时将页数进行绑定显示

分页控件AspNetPager的样式美化

自从吴旗娃推出了AspNetPager分页控件之后,受到了广大程序员朋友的喜爱,无数个网站都出现这个控件的身影.可是大部分网站程序员的朋友都是直接套用,导致满世界的分页控件样式都是一样的简洁,伤不起啊 在前段时间的开发网站的过程中,突然觉得这个简洁的样式看着和网站整体的风格实在不搭调,于是看看AspNetPager的最后生成html,写了一段CSS样式,将分页的样式和网站整体风格统一起来了. 效果如下: 做的不是很好看,希望大家不要丢砖头,俺的头没包棉絮,伤不起 ~-_-~ CSS样式表: /*

asp.net分页控件使用详解【附实例下载】

本篇文章主要对asp.net创建事务的方法进行实例介绍,具有很好的参考价值,需要的朋友一起来看下吧 一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer"

在DevExpress程序中使用Winform分页控件直接录入数据并保存

一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数据,这种对于字段比较少,而且内容相对比较简单的情况下,效率是比较高的一种输入方式.本篇随笔主要介绍在DevExpress程序中使用GridView直接录入数据并保存的实现,以及使用Winform分页控件来进行数据直接录入的实现操作. 1.在GridView上展示数据 在GridView上展示数据,只

PagedDataSource数据绑定控件和AspNetPager分页控件结合使用列表分页

1.引用AspNetPager.dll. 2.放置Repeater数据绑定控件. <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> //绑定显示的列表代码 </ItemTemplate> </asp:Repeater> 3.在页面添加AspNetPager分页控件,会出现以下代码. <%@ Register Assembly="Asp

WinForm下编写分页控件,实现DataGridView的分页效果

 前几天做C/S项目的时候用到了分页查询,所以就想去网上找一些封装好的分页控件,类似BS项目中的那种.但是找了好几个都不是特别的好,没有自己想要的.而且WinForm 里面的DataGridView也不像WebForm里面的GridView那样有自带的分页功能.没办法还是自己动手封装一个吧,以后复用也方便. 从网上找了几个demo做了一下,实现挺简单的. 用到的方法就是编写一个用户控件,下面说明如何实现: 一,先画界面 新建一个用户控件,然后拖拽几个标签,文本框和按钮,排列好.如下图所示:

paginationjs一款功能强大的分页控件

在项目中,很多时候需要分页控件,分页控件自己写也比较简单,但是要写一个功能丰富的分页控件话,就麻烦了,这里推荐一款不错的空间,页数太多的话,显示总页数,搜索指定页码. github地址:https://github.com/superRaytin/paginationjs 简单demo代码: <!DOCTYPE html> <html> <head> <title>Paginationjs example</title> <meta htt

iOS中的分页控件(UIPageControl)

#import "RootViewController.h" @interface RootViewController () @end @implementation RootViewController - (void)viewDidLoad { [super viewDidLoad]; /** * UIPageControl 分页控件,提供以下几个功能: 1.展示当前总页数 2.展示当前是第几页 3.切换pageControl的当前显示的点对应显示不同的界面 */ //1.创建控