JPAGES分页控件案例

合集下载

jpage分页

今天，我给大家写出我的一个分页例子，希望对大家有用：首先inbox.jsp<%@page language="java"contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@taglib prefix="c"uri="/jsp/jstl/core"%><%@taglib prefix="f"uri="/jsp/jstl/fmt"%><%@taglib prefix="fn"uri="/jsp/jstl/functions"%><html><head><title>无标题文档</title><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><meta name="viewport"content="width=device-width, initial-scale=1.0"><link rel="stylesheet"href="${pageContext.request.contextPath}/css/jPages.css"><!-- jQuery文件。

务必在bootstrap.min.js 之前引入 --><link rel="stylesheet"href="/twitter-bootstrap/3.0.3/css/bootstrap.min.css"><link rel="stylesheet"href="/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css"><link rel="stylesheet"href="/bootstrap-datepicker/1.3.0/css/datepicker.min.css"><!-- jQuery文件。

java pagehelper条件分页用法

java pagehelper条件分页用法PageHelper是一个Java分页插件，用于MyBatis和MyBatis-Spring集成。

它可以帮助你轻松实现分页功能，而无需修改任何SQL语句。

以下是使用PageHelper进行条件分页的示例：1. 首先，确保你已经将PageHelper添加到你的项目中。

你可以使用Maven或Gradle来添加依赖。

2. 在MyBatis的XML映射文件中，你需要配置一个名为"pagehelper"的插件。

xml复制代码：<plugins><plugininterceptor="com.github.pagehelper.PageHelper"><param name="offsetAsPageNum" value="true"/><param name="rowBoundsWithCount" value="true"/><param name="rowsAffectedExtractorForQuery" value="com.github.pagehelper.stat.RowBoundsWithCount"/> </plugin></plugins>3. 在你的Java代码中，你可以使用PageHelper的helper方法来执行分页查询。

以下是一个示例：java复制代码：import com.github.pagehelper.Page;import com.github.pagehelper.PageHelper;import com.github.pagehelper.PageInfo;import org.apache.ibatis.session.SqlSession;import org.apache.ibatis.session.SqlSessionFactory;// 省略其他导入...public List<User> getUsersByPage(int pageNum, int pageSize, Map<String, Object> params) {// 获取SqlSessionFactory实例SqlSessionFactory sqlSessionFactory = ...; // 获取SqlSessionFactory的方法// 创建SqlSession实例SqlSession session = sqlSessionFactory.openSession();try {// 使用PageHelper进行分页查询PageHelper.startPage(pageNum, pageSize);List<User> users = session.selectList("erMapper.selectUsers", params);// 获取分页信息PageInfo<User> pageInfo = new PageInfo<>(users);return pageInfo.getList(); // 返回当前页的用户列表} finally {session.close();}}在上面的示例中，getUsersByPage方法接受页码和每页大小作为参数，并使用PageHelper进行分页查询。

ipage分页的用法

ipage分页的用法
iPage是一个基于jQuery的分页插件，以下是使用步骤：
1. 引入iPage库。

将iPage库的文件引入到你的网页中。

可以通过将以下代码添加到你的HTML代码中来引入iPage库：
```
<script src=""></script>
```
2. 创建一个分页实例。

需要创建一个iPage实例来管理你的分页。

可以使用以下代码来创建一个实例：
```
var myIpage = new iPage();
```
3. 配置分页参数。

可以设置总页数、每页显示数量、当前页等参数。

例如：
```
(5); //总页数
(10); //每页显示数量
(1); //当前页
```
4. 绑定分页事件。

可以绑定点击页码时的回调函数，可以在此函数中进行数据的异步加载。

例如：
```
(function (page) { // 点击页码时的回调函数
// 在此处进行数据的异步加载
});
```
以上步骤仅供参考，建议访问iPage官网查看更详细的使用说明。

mybatis的pagehelper分页案例

mybatis的pagehelper分页案例
以下是一个使用Mybatis的pagehelper插件进行分页的案例：
1. 添加依赖：在Spring Boot项目中引入pagehelper的依赖。

2. 配置分页插件：在配置文件中配置分页插件，配置内容如下：
```xml
< plugins>
<plugin
interceptor="com.github.pagehelper.PageInterceptor" /> </plugins>
```
3. 设置分页参数：在查询方法中设置分页参数，示例代码如下：
```java
Page<Article> page = articleMapper.findByTitle(title, new Page<Article>(pageNo, pageSize));
```
其中`Article`是实体类，`articleMapper`是对应的mapper接
口，`findByTitle`是查询方法，`title`是查询条件，`new Page(pageNo, pageSize)`是分页参数，分别表示页码和每页显示的条数。

4. 获取分页结果：通过分页对象`page`的方法获取分页结果，示例代码如下：
```java
List<Article> articles = page.getResult();
```
其中`articles`是分页结果。

以上是Mybatis的pagehelper分页案例的基本步骤。

请注意，具体的配置和参数可能因项目而异，你可以根据实际情况进行调整。

pagination 使用示例

pagination 使用示例
Pagination是一种常见的页面分页技术，用于将大量数据分成较小的、更易于管理的部分，以便用户可以逐页浏览。

以下是一个简单的Pagination使用示例：
假设有一个包含100条数据的列表，我们想要将它分成每页10条数据的多个页面。

我们可以使用Pagination来实现这个功能。

首先，我们需要确定每页显示的数据数量。

在这个例子中，我们将每页显示10条数据。

然后，我们需要计算总页数。

使用以下公式可以计算出总页数：总页数= 总数据量/ 每页数据量。

在这个例子中，总页数= 100 / 10 = 10页。

接下来，我们可以在前端页面上创建一个Pagination组件，用于显示当前页码和总页数等信息。

我们还可以添加一些功能，比如上一页、下一页、跳转到指定页等。

当用户点击上一页或下一页按钮时，我们可以通过发送Ajax请求来获取相应页码的数据。

在服务器端，我们可以通过查询数据库来获取对应页码的数据，并将数据返回给前端。

最后，我们可以在前端将获取到的数据显示在列表中。

通过这个简单的Pagination使用示例，我们可以看到Pagination可以帮助用户更好地浏览大量数据，提高用户体验。

在实际开发中，我们可以根据具体需求和场景选择合适的Pagination实现方式。

PageHelper分页插件及相关案例介绍

PageHelper分页插件及相关案例介绍pagehelper是⼀个分页插件,⽤来后端API进⾏分页处理,pagehelper只需要pageNum(当前页)和pageSize(页⼤⼩)就可以⾃动实现查询的分页数据.只对紧接着后续⼀条查询语句起作⽤.项⽬运⾏成功后,查询语句之前加PageHelper.startPage(pageNum, pageSize)即可实现分页,PageHelper只对紧跟着的第⼀个SQL语句起作⽤.分页成功后,实际分会的结果list类型是Page<E> ,可使⽤PageInfo<E>进⾏封装,后⽂有相应源码.pagehelper可以与前端datatables或pagination插件配合使⽤.前端具体插件具体怎么使⽤这⾥不再介绍.1.maven中引⼊依赖<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.2.3</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.16.18</version></dependency>2.controller@GetMapping("/testresult/{project}/{pageNum}/{pagesize}")public ResponseEntity<TestResultResponse>getPhaseSmokeResult(@PathVariable(value="pageNum",defaultValue="1")Integer pageNum,@PathVariable(value="pageSize",defaultValue="6")Integer pageSize,@PathVariable("project")String project){log.debug("REST request to get {} phase smoke result from {} to {} ", project, pageNum, pageSize);TestResultResponse response = smokeResultService.getPhaseSmokeResult(pageNum,pagesize,project);return new ResponseEntity<>(response, HttpStatus.OK);}3.serviceImpl@Overridepublic TestResultResponse getPhaseSmokeResult(Integer pageNum, Integer pagesize, String project) {PageHelper.startPage(pageNum, pagesize);List<SmokeResult> smokeResultList = smokeResultMapper.getPhaseSmokeResult(project);PageInfo<SmokeResult> pageInfo = new PageInfo<>(smokeResultList);TestResultResponse response = new TestResultResponse();response.setProject(project).setPageInfo(pageInfo);return response;}4.entityTestResultResponse类@Data@NoArgsConstructor@AllArgsConstructor@Accessors(chain = true)public class TestResultResponse {private String project;private String version;private String starttime;private String endtime;private String total;private PageInfo pageInfo;}5.PageInfo源码import com.github.pagehelper.Page;import lombok.Data;import java.io.Serializable;import java.util.Collection;import java.util.List;@Datapublic class PageInfo<T> implements Serializable{private static final long serialVersionUID = 1L;//当前页private int pageNum;//每页的数量private int pageSize;//当前页的数量private int size;//由于startRow和endRow不常⽤，这⾥说个具体的⽤法 //可以在页⾯中"显⽰startRow到endRow 共size条数据" //当前页⾯第⼀个元素在数据库中的⾏号private int startRow;//当前页⾯最后⼀个元素在数据库中的⾏号private int endRow;//总记录数private long total;//总页数private int pages;//结果集private List<T> list;//前⼀页private int prePage;//下⼀页private int nextPage;//是否为第⼀页private boolean isFirstPage = false;//是否为最后⼀页private boolean isLastPage = false;//是否有前⼀页private boolean hasPreviousPage = false;//是否有下⼀页private boolean hasNextPage = false;//导航页码数,页码导航连续显⽰的页数private int navigatePages;//所有导航页号private int[] navigatepageNums;//导航条上的第⼀页private int navigateFirstPage;//导航条上的最后⼀页private int navigateLastPage;private int navigateLastPage;public PageInfo() {}/*** 包装Page对象** @param list*/public PageInfo(List<T> list) {this(list, 8);}/*** 包装Page对象** @param list page结果* @param navigatePages 页码数量,页码导航连续显⽰的页数 */public PageInfo(List<T> list, int navigatePages) {if (list instanceof Page) {Page page = (Page) list;this.pageNum = page.getPageNum();this.pageSize = page.getPageSize();this.pages = page.getPages();this.list = page;this.size = page.size();this.total = page.getTotal();//由于结果是>startRow的，所以实际的需要+1if (this.size == 0) {this.startRow = 0;this.endRow = 0;} else {this.startRow = page.getStartRow() + 1;//计算实际的endRow（最后⼀页的时候特殊）this.endRow = this.startRow - 1 + this.size;}} else if (list instanceof Collection) {this.pageNum = 1;this.pageSize = list.size();this.pages = this.pageSize > 0 ? 1 : 0;this.list = list;this.size = list.size();this.total = list.size();this.startRow = 0;this.endRow = list.size() > 0 ? list.size() - 1 : 0;}if (list instanceof Collection) {this.navigatePages = navigatePages;//计算导航页calcNavigatepageNums();//计算前后页，第⼀页，最后⼀页calcPage();//判断页⾯边界judgePageBoudary();}}/*** 计算导航页*/private void calcNavigatepageNums() {//当总页数⼩于或等于导航页码数时if (pages <= navigatePages) {navigatepageNums = new int[pages];for (int i = 0; i < pages; i++) {navigatepageNums[i] = i + 1;}} else { //当总页数⼤于导航页码数时} else { //当总页数⼤于导航页码数时navigatepageNums = new int[navigatePages];int startNum = pageNum - navigatePages / 2;int endNum = pageNum + navigatePages / 2;if (startNum < 1) {startNum = 1;//最前navigatePages页for (int i = 0; i < navigatePages; i++) {navigatepageNums[i] = startNum++;}} else if (endNum > pages) {endNum = pages;//最后navigatePages页for (int i = navigatePages - 1; i >= 0; i--) {navigatepageNums[i] = endNum--;}} else {//所有中间页for (int i = 0; i < navigatePages; i++) {navigatepageNums[i] = startNum++;}}}}/*** 计算前后页，第⼀页，最后⼀页*/private void calcPage() {if (navigatepageNums != null && navigatepageNums.length > 0) {navigateFirstPage = navigatepageNums[0];navigateLastPage = navigatepageNums[navigatepageNums.length - 1]; if (pageNum > 1) {prePage = pageNum - 1;}if (pageNum < pages) {nextPage = pageNum + 1;}}}/*** 判定页⾯边界*/private void judgePageBoudary() {isFirstPage = pageNum == 1;// isLastPage = pageNum == pages;isLastPage = pageNum == pages || pages == 0;hasPreviousPage = pageNum > 1;hasNextPage = pageNum < pages;}}参考链接:。

GridView控件自定义分页详解

GridView控件自定义分页详解在这里我们将用一个隐藏字段来保存这个PageIndex,即当前页码.当点击上一页时,将它的值减一,知道为0,要注意的一点这里的第一页页码是0而不是1.下面看看代码,然后我们再分析分析!1<asp:GridView ID="NewsGrid" runat="server" AutoGenerateColumns="False" AllowPaging="false" Width="100%">2 <Columns>3 <asp:BoundField DataField="NewsId" HeaderText="新闻ID"/>4 <asp:HyperLinkField DataNavigateUrlFields="NewsId" DataNavigateUrlFormatString="~/Details.aspx?ID={0}"5 DataTextField="Title" HeaderText="新闻标题" ItemStyle-Width="70%"/>6 <asp:BoundField DataField="PostTime" HeaderText="发布时间"/>7 <asp:CommandField HeaderText="新闻管理" ShowCancelButton="False" ShowDeleteButton="True"8 ShowEditButton="True"/>9 </Columns>10 </asp:GridView>实用文档11 <div style=" height:16px; padding-top:5px; margin-right:30px; float:right">12 <asp:HiddenField ID="CurrentPage" runat="server" Value="0"/>13 <asp:LinkButton ID="First" runat="server" CommandArgument="first" OnClick="PagerButton_Click">首页</asp:LinkButton>14 <asp:LinkButton ID="Prev" runat="server" CommandArgument="prev" OnClick="PagerButton_Click">上一页</asp:LinkButton>15 <asp:LinkButton ID="Next" runat="server" CommandArgument="next" OnClick="PagerButton_Click">下一页</asp:LinkButton>16 <asp:LinkButton ID="Last" runat="server" CommandArgument="last" OnClick="PagerButton_Click">尾页</asp:LinkButton>17 </div> CS文件中的代码:1 protected void PagerButton_Click(object sender, EventArgs e)2 {3 int pageIndx = Convert.ToInt32(CurrentPage.Value);4 int totals = NewsManager.GetNews(0, pageSize).TotalRecords;5 int pages = (totals % pageSize) == 0 ? (totals / pageSize) : (totals / 实用文档pageSize + 1);6 string arg = ((LinkButton)sender).CommandArgument.ToString().ToLower();7 switch (arg)8 {9 case "prev":10 if (pageIndx > 0)11 {12 pageIndx -= 1;13 }14 break;15 case "next":16 if (pageIndx < pages - 1)17 {18 pageIndx += 1;19 }20 break;21 case "last":实用文档22 pageIndx = pages - 1;23 break;24 default:25 pageIndx = 0;26 break;27 }28 CurrentPage.Value = pageIndx.ToString();29 NewsGrid.DataSource = NewsManager.GetNews(pageIndx , pageSize).Entities;30 NewsGrid.DataBind();31 }如何在GridView中增加效果protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e){//将满足特定条件的行标为高亮if (e.Row.RowType == DataControlRowType.DataRow)//判定当前的行是否属于datarow类型的行实用文档{int money = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "MONEY"));//取当前行的列值if (money == 77)e.Row.BackColor = Color.Red;//string customer = (string)DataBinder.Eval(e.Row.DataItem, "CUSTOMER");string customer = DataBinder.Eval(e.Row.DataItem, "CUSTOMER").ToString();if (customer == "sdf")e.Row.BackColor = Color.Red;}//加入鼠标滑过的高亮效果if (e.Row.RowType == DataControlRowType.DataRow)//判定当前的行是否属于datarow类型的行{//当鼠标放上去的时候先保存当前行的背景颜色并给附一颜色e.Row.Attributes.Add("onmouseover", 实用文档"currentcolor=this.style.backgroundColor;this.style.backgroundColor='yellow',t his.style.fontWeight='';");//当鼠标离开的时候将背景颜色还原的以前的颜色e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor,this.style.fontWeight='';");}//单击行改变行背景颜色if (e.Row.RowType == DataControlRowType.DataRow){e.Row.Attributes.Add("onclick","this.style.backgroundColor='#99cc00'; this.style.color='buttontext';this.style.cursor='default';");}如何在GridView中一次性批量更新多行数据2.0下含有DropDownList的GridView编辑、删除的完整例子！<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" PageSize="10"实用文档Width="542px" AllowPaging="True" AllowSorting="True"DataKeyNames="DB31_1,DB31_2" OnRowCancelingEdit="GridView1_RowCancelingEdit"OnRowDeleting="GridView1_RowDeleting"OnRowEditing="GridView1_RowEditing"OnRowUpdating="GridView1_RowUpdating"OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"OnSorting="GridView1_Sorting" ><Columns><asp:TemplateField HeaderText="序号"><ItemTemplate><%# this.GridView1.PageIndex * this.GridView1.PageSize + this.GridView1.Rows.Count + 1%></ItemTemplate></asp:TemplateField>实用文档<asp:TemplateField HeaderText="学历代码" SortExpression="DB1_1"><EditItemTemplate><%--<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("DB1_1") %>'></asp:TextBox>--%><asp:DropDownList ID ="ddlXL"runat="server" DataValueField='<%#Bind("DB1_1") %>'></asp:DropDownList></EditItemTemplate><ItemTemplate><asp:Label ID="Label1" runat="server" Text='<%# Bind("xueliText") %>'></asp:Label></ItemTemplate></asp:TemplateField><asp:TemplateField HeaderText="学历名称" SortExpression="DB1_2"><EditItemTemplate>实用文档<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("DB1_2") %>'></asp:TextBox></EditItemTemplate><ItemTemplate><asp:Label ID="Label2" runat="server" Text='<%# Bind("DB1_2") %>'></asp:Label></ItemTemplate></asp:TemplateField><asp:TemplateField HeaderText="操作" ShowHeader="False"><EditItemTemplate><asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update"Text="更新"></asp:LinkButton><asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel"实用文档Text="取消"></asp:LinkButton></EditItemTemplate><ItemTemplate><asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit"Text="编辑" OnClientClick="return confirm('确认要编辑吗？');"></asp:LinkButton><asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" CommandName="Delete"Text="删除" OnClientClick="return confirm('确认要删除吗？');"></asp:LinkButton><asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Select"Text="选择"></asp:LinkButton></ItemTemplate>实用文档</asp:TemplateField></Columns><AlternatingRowStyle BackColor="Aquamarine" /></asp:GridView>/// <summary>/// 绑定数据到GridView/// </summary>private void GridViewBind(){检索数据库string strSql = "SELECT * FROM DB1";得到数据集this.GridView1.DataSource=conn.GetDs(strSql).Tables[0].DefaultView;this.GridView1.DataBind();实用文档}/// <summary>/// 编辑当前行/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e){GridView1.EditIndex = e.NewEditIndex;//当前编辑行背景色高亮this.GridView1.EditRowStyle.BackColor = Color.FromName("#F7CE90");GridViewBind();}/// <summary>实用文档/// 取消编辑状态/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e){GridView1.EditIndex = -1;GridViewBind();}/// <summary>/// 删除记录过程/// </summary>/// <param name="sender"></param>/// <param name="e"></param>实用文档protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e){//得到单位编号string rowToDelete =GridView1.DataKeys[e.RowIndex].Values[0].ToString();//转换为整数//int ID=Convert.ToInt32(rowToDelete);//从数据库中删除string str = "DELETE FROM DB1 where DB1_1=" + "'" + rowToDelete + "'" + "";try{conn.RunSql(str);//重新绑定数据实用文档GridViewBind();}catch (Exception ex){Response.Write("数据库错误，错误原因：" + ex.Message);Response.End();}}/// <summary>/// 更新记录过程/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)实用文档{string ID = GridView1.DataKeys[e.RowIndex].Values[0].ToString();string DB1_1 =((TextBox)GridView1.Rows[e.RowIndex].FindControl("TextBox1")).Text;//string DB1_2 =((TextBox)GridView1.Rows[e.RowIndex].FindControl("TextBox2")).Text;string DB1_2 =(((DropDownList))GridView1.Rows[e.RowIndex].FindControl("ddlXL")).SelectedI tem.Text;//判断表单项是否有空并给出提示信息if (DB1_1 == "" || DB1_2 == ""){conn.Alert("请输入完整信息！", Page);return;}实用文档try{conn.BuilderEdit("select * from DB1 where DB1_1 ='" + ID + "'");conn.dr["DB1_1"] = DB1_1;conn.dr["DB1_2"] = DB1_2;conn.BuilderEditClose();}catch (OracleException err){if (err.Code.ToString() == "1")conn.Alert("错误：已存在具有相同主键的记录", Page);elseconn.Alert("错误：未能添加记录", Page);}实用文档Response.Write("<script language='javascript'>alert('数据已被保存!');</script>");//返回浏览状态GridView1.EditIndex = -1;GridViewBind();}/// <summary>/// 分页事件/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e){GridView1.PageIndex = e.NewPageIndex;GridViewBind();实用文档}/// <summary>/// 加入鼠标效果及为DropDownList绑定值/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e){//为DropDownList绑定值if (((DropDownList)e.Row.FindControl("ddlXL")) != null){DropDownList ddlXL = (DropDownList)e.Row.FindControl("ddlXL");ddlXL.Items.Clear();ddlXL.Items.Add(new ListItem("博士", "1"));实用文档ddlXL.Items.Add(new ListItem("硕士", "2"));ddlXL.Items.Add(new ListItem("学士", "3"));}//加入鼠标滑过的高亮效果if (e.Row.RowType == DataControlRowType.DataRow)//判定当前的行是否属于datarow类型的行{//当鼠标放上去的时候先保存当前行的背景颜色并给附一颜色e.Row.Attributes.Add("onmouseover","currentcolor=this.style.backgroundColor;this.style.backgroundColor='yellow',t his.style.fontWeight='';");//当鼠标离开的时候将背景颜色还原的以前的颜色e.Row.Attributes.Add("onmouseout","this.style.backgroundColor=currentcolor,this.style.fontWeight='';");}//单击行改变行背景颜色实用文档if (e.Row.RowType == DataControlRowType.DataRow){e.Row.Attributes.Add("onclick", "this.style.backgroundColor='#99cc00'; this.style.color='buttontext';this.style.cursor='default';");}}2.0下含有CheckBox的GridView删除选定记录实例<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" PageSize="5"2 Width="726px" AllowPaging="True" AllowSorting="True"3 DataKeyNames="DB1_1,DB1_2" OnRowDeleting="GridVie w1_RowDeleting" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound"OnSorting="GridView1_Sorting" Height="279px" >4 <Columns>实用文档5 <asp:TemplateField HeaderText="序号" >6 <ItemTemplate>7 <%# this.GridView1.PageIndex *this.GridView1.PageSize + this.GridView1.Rows.Count + 1%>8 </ItemTemplate>9 </asp:TemplateField>10 <asp:TemplateField HeaderText="选择" >11 <ItemTemplate>12 <asp:CheckBox ID="chkSelect" runat="server" ></asp:CheckBox>13 </ItemTemplate>14 </asp:TemplateField>15 <asp:TemplateField HeaderText="操作" ShowHeader="False">16 <ItemTemplate>实用文档17 <asp:LinkButton ID="lbtnDelete" runat="server" CausesValidation="False" CommandName="Delete"18 Text="删除" OnClientClick="return confirm('确认要删除吗？');"></asp:LinkButton>19 </ItemTemplate>20 </asp:TemplateField>21 </Columns>22 <AlternatingRowStyle BackColor="Aquamarine" />23 </asp:GridView>1 <asp:CheckBox ID="chkSelectAll" runat="server" Text="全部选中" OnCheckedChanged="chkSelectAll_CheckedChanged"AutoPostBack="True" ></asp:CheckBox>2 <asp:Button ID="btnDelete" runat="server" Text="删除" OnClick="btnDelete_Click" />1 protected void btnDelete_Click(object sender, EventArgs e)2 {实用文档3 string strDelete = "";4 for (int i = 0; i < this.GridView1.Rows.Count; i++)5 {6 string Label;7 bool isChecked =((CheckBox)GridView1.Rows[i].FindControl("chkSelect")).Checked;8 Label = ((Label)GridView1.Rows[i].FindControl("labXH")).Text;9 if (isChecked)10 {11 strDelete = "DB1_1" + "=" + Label;12 }13 }14 conn.RunSql("Delete from DB1 where " + strDelete15 this.chkSelectAll.Checked = false;16 GridViewBind();实用文档17 }1819 protected void chkSelectAll_CheckedChanged(object sender, EventArgs e)20 {21 //遍历GridView行获取CheckBox属性22 for (int i = 0; i < this.GridView1.Rows.Count; i++)23 {24 ((CheckBox)GridView1.Rows[i].FindControl("chkSelect")).Checked = this.chkSelectAll.Checked;25 }26 }实用文档。

分页控件及实例

/// <returns>页数</returns>
private int GetPageCount(int recordCount, int pageSize)
{
if(recordCount % pageSize == 0)
{
return recordCount / pageSize;
using System.Web.UI.HtmlControls;
using System.Collections;
Байду номын сангаас
/// <summary>
/// 分页控件
/// </summary>
public class Pager : erControl
/// 分页存储过程名
/// </summary>
public string Sql
{
set
{
this._sSql = value;
//ViewState["sql"] = value;
}
}
/// <summary>
/// 获取总记录数的存储过程名称
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
#region 属性
/// <summary>
/// 设置DataGrid
/// </summary>
public void SetDataGrid(System.Web.UI.WebControls.DataGrid dg)

pagehelper 用法

pagehelper 用法pagehelper 用法详解什么是pagehelper？PageHelper是一个用于处理分页查询的开源插件，可以方便地在Java项目中处理和展示分页数据。

它可以与MyBatis等ORM框架无缝集成，提供简单、快速、灵活的分页功能。

使用前的准备工作在使用PageHelper前，首先需要在你的项目中添加PageHelper 的依赖。

常用的构建工具，如Maven或Gradle，都可以很方便地引入PageHelper的依赖。

用法示例下面是一些常见的PageHelper用法示例：•基本用法PageHelper的基本用法非常简单，只需在查询前调用(pageNum, pageSize)方法即可开启分页查询。

int pageNum = 1; // 当前页码int pageSize = 10; // 每页显示的数据条数(pageNum, pageSize);List<User> userList = ();PageInfo<User> pageInfo = new PageInfo<>(userList);在上面的示例中，我们设置了当前页码为1，每页显示10条数据。

在接下来的查询中，PageHelper会自动给查询语句添加上合适的分页条件。

•排序用法PageHelper还提供了排序功能，可以通过调用(orderBy)方法指定查询结果的排序方式。

String orderBy = "create_time desc"; // 按创建时间倒序排序(orderBy);List<User> userList = ();在上面的示例中，我们通过orderBy参数指定了按照创建时间倒序排序的方式进行查询。

•分页插件PageHelper还提供了一些额外的插件功能，可以根据需求进行配置和使用。

例如，可以配置reasonable参数来判断当前页码的合理性，或者设置countColumn参数指定统计总数的列名。

jsp分页技术实现

title: JSP分页技术实现summary:使用工具类实现通用分页处理author: evan_zhaoemail目前比较广泛使用的分页方式是将查询结果缓存在HttpSession或有状态bean中，翻页的时候从缓存中取出一页数据显示。

这种方法有两个主要的缺点：一是用户可能看到的是过期数据；二是如果数据量非常大时第一次查询遍历结果集会耗费很长时间，并且缓存的数据也会占用大量内存，效率明显下降。

其它常见的方法还有每次翻页都查询一次数据库，从ResultSet中只取出一页数据（使用();()获得总计录条数，使用()定位到本页起始记录）。

这种方式在某些数据库(如oracle)的JDBC实现中差不多也是需要遍历所有记录，实验证明在记录数很大时速度非常慢。

至于缓存结果集ResultSet的方法则完全是一种错误的做法。

因为ResultSet在Statement或Connection关闭时也会被关闭，如果要使ResultSet有效势必长时间占用数据库连接。

因此比较好的分页做法应该是每次翻页的时候只从数据库里检索页面大小的块区的数据。

这样虽然每次翻页都需要查询数据库，但查询出的记录数很少，网络传输数据量不大，如果使用连接池更可以略过最耗时的建立数据库连接过程。

而在数据库端有各种成熟的优化技术用于提高查询速度，比在应用服务器层做缓存有效多了。

在oracle数据库中查询结果的行号使用伪列ROWNUM表示（从1开始）。

例如select * from employee where rownum<10 返回前10条记录。

但因为rownum是在查询之后排序之前赋值的，所以查询employee按birthday排序的第100到120条记录应该这么写：select * from (select my_table.*, rownum as my_rownum f rom (select name, birthday from employ ee order by birthday) my_table where rownum <120) where my_rownum>=100mySQL可以使用LIMIT子句：select name, birthday from employee order by birthday LIMIT 99,20 DB2有rownumber()函数用于获取当前行数。

java中page分页对象的用法

java中page分页对象的用法在Java中，Page是Spring Data中用于分页查询的对象，它提供了一些方法来处理分页数据。

首先，你需要在查询方法的参数中添加一个Pageable对象。

Pageable代表一个分页请求，通过它可以设置页码、每页显示的数据量以及排序规则等。

例如，假设存在一个名为userRepository的Repository接口，并希望对用户数据进行分页查询，可以这样使用Pageable对象：```javaimport org.springframework.data.domain.Page;import org.springframework.data.domain.Pageable;importorg.springframework.data.repository.PagingAndSortingRepositor y;public interface UserRepository extends PagingAndSortingRepository<User, Long> {Page<User> findAll(Pageable pageable);}```在上述示例中，`Page<User> findAll(Pageable pageable)`方法返回一个Page对象，其中User是实体类，Long是实体类的主键类型。

Page对象代表了查询结果的一个分页片段。

对于Page对象，可以使用以下方法来获取分页数据的相关信息：- `int getTotalPages()`：获取总页数。

- `long getTotalElements()`：获取总记录数。

- `int getNumber()`：获取当前页码，从0开始。

- `int getSize()`：获取每页显示的数据量。

- `boolean isFirst()`：判断是否为首页。

- `boolean isLast()`：判断是否为末页。

使用javascript实现前端分页效果的方法

一、引言随着互联网技术的发展和普及，前端开发在全球信息湾和应用程序中扮演着越来越重要的角色。

前端分页是前端开发中常见的需求之一，通过分页可以将大量数据分割成多个页面，提高数据展示效率和用户体验。

本文将介绍如何使用javascript实现前端分页效果的方法。

二、基本原理在进行前端分页操作时，需要做到以下几点：获取总数据量和每页显示的数量；根据总数据量和每页数量计算出总页数；根据当前页码和每页数量，截取相应的数据进行展示。

三、实现步骤1. 获取总数据量和每页显示的数量在实现前端分页效果时，首先需要获取总数据量和每页显示的数量。

总数据量通常来自后端接口返回的数据或者在前端进行模拟数据。

每页显示的数量由业务需求确定，可以在代码中进行指定。

2. 计算总页数根据获取到的总数据量和每页显示的数量，可以通过简单的算术运算得到总页数。

如果总数据量为100条，每页显示10条数据，则总页数为100/10=10。

3. 根据当前页码截取数据在进行分页展示时，需要根据当前页码和每页显示的数量来截取相应的数据进行展示。

可以通过数组的slice方法来实现数据的截取。

4. 分页组件的实现为了方便使用，可以将上述步骤封装成一个独立的分页组件。

该组件可以接受总数据量、每页数量等参数，同时提供页码切换、数据截取等功能。

四、代码示例下面是一个简单的javascript代码示例，用于实现前端分页效果：```javascript// 假设有一个包含100条数据的数组const data = Array.from({ length: 100 }, (v, k) => k + 1);// 每页显示10条数据const pageSize = 10;// 根据页码和每页数量进行数据截取function getPageData(pageNum) {const start = (pageNum - 1) * pageSize;const end = start + pageSize;return data.slice(start, end);}// 测试console.log(getPageData(1)); // 第1页数据console.log(getPageData(2)); // 第2页数据// ...```五、总结通过上述步骤和代码示例，我们可以实现一个简单的前端分页效果。

page指令的功能,写法、并示例

Page指令是一种用于网页制作的功能性指令，它能够在网页中实现诸如分页、页面定位等功能。

在网页设计和开发中，Page指令被广泛应用，它为用户提供了更加方便快捷的浏览网页的方式，同时也提高了网页的可读性和用户体验。

下面将对Page指令的功能、写法及示例进行详细介绍。

一、Page指令的功能1.分页功能Page指令的主要功能之一就是实现网页的分页功能。

通过Page指令，我们可以将大量的内容进行分页处理，使用户能够逐页浏览，不至于一次性加载过多内容造成页面过长、加载缓慢。

这对于内容较多的网页来说非常重要，能够提高用户的浏览体验。

2.页面定位除了分页功能外，Page指令还能够实现页面定位的功能。

通过Page指令可以设置页面的锚点，用户在点击信息时能够直接跳转到指定位置，方便用户查找和阅读特定内容。

3.其他功能除了分页和页面定位功能，Page指令还可以实现一些其他功能，如自定义页面样式、插入广告等。

二、Page指令的写法Page指令的写法一般是在HTML或其他网页制作语言中使用指定的标签进行编写。

不同的网页制作语言会有一些差异，下面以HTML为例对Page指令的写法进行介绍。

1.HTML页面中使用Page指令的写法示例：```html<!DOCTYPE html><html><head><title>Page指令示例</title></head><body><h1>这是第一页</h1><p>这里是第一页的内容。

</p><page num="2"><h1>这是第二页</h1><p>这里是第二页的内容。

</p></page></body></html>```通过以上示例可以看出，Page指令在HTML中使用了`<page>`标签，并通过`num`属性指定了页码。

用jQuery与jTemplates插件实现客户端分页的表格展现

一直以来觉得用JSON和JavaScript在客户端绑定数据给一个表格或者Grid是件很麻烦的事情。

Microsoft Ajax提供了类似，也可以用for循环来动态构建表格，但这些都显得很麻烦而且很不灵活。

jQuery的jTemplates插件实现了一种灵活的方式来控制显示，它允许我们定义好一个显示模板，jQuery在展现数据时根据选择的模板来动态生成。

这就类似于中的ItemTemplate，也和XSLT有些类似。

通过这样的方式，你可以很容易的在客户端通过自定义模板以很灵活的方式展现列表数据。

jQuery官方网站给jTemplates的定义是：jTemplates is a template engine 100% in JavaScript.更多的信息可以参考。

接下来我们实现一个小例子来演示如何使用jTemplate去构建一个RSS阅读器。

创建RSS阅读器RSS源通常都位于另外的domain中，而在AJAX中浏览器通常禁止cross-domain的访问，在这里，为了避开这个问题我们可以在服务端去取得数据。

通常我们可以将这些方法做成WebMethod方法放到WebServices中，但这里我们可以将这些方法放到页面的cs文件中。

需要注意的是，这个方法必须被声明为Static 方法，而且要以WebMethod标注。

这样做的目的是，只有在标注为WebMethod，客户端才能正常访问这个方法。

而Static标记标识了这个方法不与任何这个页面的实例相关，而是而这个页面本身相关，对于任何一个实例而言都是相同的。

所以在你调用的时候，你不需要与任何页面类的实例相关。

1页在上边的方法中设定了RSS的地址，并通过LINQ to XML来取得我们想要的属性。

Skip和Take函数联合起来实现了一个分页的功能。

通过jQuery调用Page MethodjQuery.Ajax方法实现了用Ajax的方式来请求一个页面并设定回调函数来处理相应状态和结果。

JPAGES分页控件案例

JPAGES分页控件案例//需要导入的样式表,与js文件/***css*jPages.css控制分页按钮条的样式，不需要样式的可以不用导入*animate.css控制要显示的数据的动画效果,不需要动画可以不用导入*github.css这个不知道是搞什么的，不导入也没发现改变了什么*js文件jPages.js和jquery肯定是必须的,其他的就看自己了*/Js代码:$("#tbody").empty();//删除tbody中已经存在的数据var str="";$.ajax({url:'jq/getShipInfoByShipName.action',data:{"shipName":$("#shipNameId").val()},//执行后台Action 参数dataType:'json',type:'post',//回调函数执行之前的动作beforeSend:function(){//这是我设置的一个加载中的图标,trShow为图标显示的行//在数据加载出来之前,显示加载中这个图标,加载完成,隐藏$('#trShow').css("display","block");},success:function(data){var result=data;//返回数据位json格式，遍历json，拼凑成table中的行for(var i=0;i<result.length;i++){< p="">str+=""+result[i].shipId+""+result[i].shipName+" "+result[0].remark+"</result.length;i++){<>。

【自然框架】js版的QuickPager分页控件V2.0

-【自然框架】js版的QuickPager分页控件V2.0优点：1、通过更换模板可以控制各个分页元素（比如首页、末页，页号导航等）的位置和是否显示。

2、通过更换css可以实现各种UI风格和效果。

（附带24套css效果）3、Js的方式创建分页UI，不占用服务器资源。

4、可以通过插件的方式更换各部分js代码。

如果自带的js代码不能满足您的需求，那么您自己写的插件实现需要的效果。

5、Ajax的方式获取记录集，减轻网络负担。

6、多种调用方式，让“偷懒”和灵活共存。

缺点：1、不支持SEO。

因为用js和ajax，所以不支持搜索引擎的收录。

2、不支持服务器端控件，比如GridV iew。

内容介绍：1、模板设置一个htm页面，存放分页用的模板，这样只要保证及格ID不变，其他的都可以随意编排，想怎么编排就怎么编排，限制降到最低。

模板如下：共条记录第/页每页条记录首页上一页下一页末页GO2、Css用css来控制UI样式。

这样更换css文件就可以实现更换风格。

前一阵子有园友分享了24套样式，借鉴了一下。

在这里大家一起感谢园友的分享。

div.pager {text-align: center; padding-bottom: 10px; background-color: #000; margin: 3px; padding-left: 3px; padding-right: 3px; color: #a0a0a0; font-size: 80%; padding-top: 10px}div.pager a {background-image: url(bar.gif); border-bottom: #909090 1px solid; border-left: #909090 1px solid; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; background-position: 50% bottom; color: #c0c0c0; border-top: #909090 1px solid; margin-right: 3px; border-right: #909090 1px solid; text-decoration: none; padding-top: 2px}div.pager a:hover {background-image: url(invbar.gif); border-bottom: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; background-color: #404040; color: #ffffff; border-top: #f0f0f0 1px solid; border-right: #f0f0f0 1px solid}div.pager a:active {background-image: url(invbar.gif); border-bottom: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; background-color: #404040; color: #ffffff; border-top: #f0f0f0 1px solid; border-right: #f0f0f0 1px solid}div.pager span.current {border-bottom: #ffffff 1px solid; border-left: #ffffff 1px solid; padding-bottom: 2px; background-color: #606060; padding-left: 5px; padding-right: 5px; color: #ffffff; border-top: #ffffff 1px solid; font-weight: bold; margin-right: 3px; border-right: #ffffff 1px solid; padding-top: 2px}div.pager span.disabled {border-bottom: #606060 1px solid; border-left: #606060 1px solid; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; color: #808080; border-top: #606060 1px solid; margin-right: 3px; border-right: #606060 1px solid; padding-top: 2px}3、Js脚本分为三个部分，默认值、主体和扩展。

js分页工具实例-电脑资料

js分页工具实例-电脑资料这篇文章主要介绍了js分页工具及其具体用法,包括js与css的详细实现代码与使用方法,需要的朋友可以参考下本文实例讲述了js分页工具的用法，。

分享给大家供大家参考。

具体实现方法如下：js代码部分：代码如下:/*** 分页js*/var Page;(function(){var Page = {version:"1.0",author:"liuxingmi"};var showPage = 9;Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){var nav = ‘‘;nav += ‘总记录数：‘ + totalRecord +‘‘;nav += ‘总页数：‘ + totalPage + ‘‘;nav += ‘当前页：‘ + currentPage + ‘‘;if(currentPage == 1){nav += ‘首页‘;nav += ‘前一页‘;} else {nav += ‘首页‘;nav += ‘前一页‘;}nav += ‘‘;var start = currentPage - Math.floor(showPage/2); var end = currentPage + Math.floor(showPage/2); if(end > totalPage){start -= (end - totalPage);}if(start <= 0){start = 1;}if(currentPage < showPage && end < showPage){ end = showPage;}if(end > totalPage){end = totalPage;}for(var i = start; i <= end; i++){if(i == currentPage){nav += ‘1.‘ + i + ‘‘;} else {nav += ‘‘ + i+ ‘‘;}}nav += ‘‘;if(currentPage == totalPage){ nav += ‘后一页‘;nav +=‘尾页‘;} else {nav += ‘后一页‘;nav +=‘尾页‘;}nav += ‘‘;$("#" + divId).html(nav); };this.Page = Page;})();css部分：代码如下:/*分页样式开始*/.pagination{overflow:hidden;margin:0 0 0 25px; padding:10px 10px 6px 150px; border-top:1px solid #c8c8c8; _zoom:1;text-align: center;}.pagination *{display:inline;float:left;margin:0;padding:0;font-size:12px;}.pagination i{float:none;padding-right:1px;}.currentPage b{float:none;color:#f00;}.pagination li{list-style.:none;margin:0 5px;}.pagination li li{position:relative;margin:-2px 0 0;font-family: Arial, Helvetica, sans-serif}.firstPage a,.previousPage a,.nextPage a,.lastPage a{ overflow:hidden;height:0;text-indent:-9999em;border-top:8px solid #fff;border-bottom:8px solid #fff;}.pagination li li a{margin:0 1px;padding:0 4px;border:3px double #fff;+border-color:#eee;background:#eee;color:#06f;text-decoration:none;}.pagination li li a:hover{background:#f60;border-color:#fff;+border-color:#f60;color:#fff;}li.firstPage{margin-left:40px;border-left:3px solid #06f;}.firstPage a,.previousPage a{border-right:12px solid #06f;}.firstPage a:hover,.previousPage a:hover{border-right-color: #f60;}.nextPage a,.lastPage a{border-left:12px solid #06f;}.nextPage a:hover,.lastPage a:hover{border-left-color:#f60;}.pagination stPage{border-right:3px solid #06f;}.pagination li li.currentState a{position:relative;margin:-1px 3px;padding:1px 4px;border:3px double #fff;+border-color:#f60;background:#f60;color:#fff;}.pagination li.currentState,.currentState a,.currentState a:hover{border-color:#fff #ccc;cursor:default;}/*分页样式结束*/调用方法：代码如下:Page.navigation("pageNav", 100, 10, 1, "xxxList");希望本文所述对大家的javascript程序设计有所帮助，电脑资料《js分页工具实例》(https://www.)。

js多功能分页组件layPage使用方法详解

这篇文章主要为大家详细分享了laypage分页控件使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文的主要目的就是为大家分享layPage 多功能的js分页组件具体操作方法，供大家参考，具体内容如下php 部分function index(){  header('Content-Type:text/html;charset=utf-8');  // 获取当前页码，默认第一页，设置每页默认显示条数  $nowpage = I('get.page', 1, 'intval');  $limits = 8;  // 获取总条数  $count = M('Article') -> where(array('status'=>array('egt', 0))) -> count();  // 计算总页面  $allpage = ceil($count / $limits);  $allpage = intval($allpage);  $lists = M('Article') -> where(array('status'=>array('egt', 0)))          -> page($nowpage, $limits) // page 方法分页          -> order('createtime desc')          -> select();  // 跳转分页输出  $this -> assign('lists', $lists);  $this -> assign('allpage', $allpage);  $this -> assign('nowpage', $nowpage);  $this->display();  /*  // ajax 分页输出  $info = array('lists'=>$lists,'allpage'=>$allpage,'nowpage'=>$nowpage);  $this->ajaxReturn($info,'json');  */ }js 中laypage(新版本) 跳转分页// 分页laypage({  cont: 'show_pages', // 分页容器  pages: "{$allpage}",   // 总页数  skip: true, //是否开启跳页  curr: function(){    var page = "{$nowpage}"; // 当前页(后台获取到的)    return page ? page : 1; // 返回当前页码值  }(),  jump: function(e, first){ //触发分页后的回调(单击页码后)    if(!first){ //一定要加此判断，否则初始时会无限刷新      var urls = "{:U('article/index',array('page'=>'pageval'))}";      var nowpage = e.curr; // (被单击的页码)      urls = urls.replace('pageval',nowpage); // 替换链接样式和页码      window.location.href = urls;    }  } });js 中laypage(新版本) ajax 分页function demo(curr){  $.getJSON("{:U('article/index')}", {    page: curr //向服务端传的参数，此处只是演示  }, function(res){ // 服务器返回的json 结果    // 这里处理res.lists 中的数据内容，使用html() 方法显示    // 略……         //显示分页    laypage({      cont: 'show_pages', // 容器      pages: res.allpage,   // 总页数(后台的)      curr: res.nowpage, //当前页(后台获取到的)      jump: function(obj, first){ //触发分页后的回调(单击页码后)        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr           demo(obj.curr); // (被单击的页码)        }      }    });  }); }; // 初始化运行demo();以上就是本文的全部内容，希望对大家学习分页组件layPage有所帮助。

简单封装分页功能pageView.js

简单封装分页功能pageView.js分页是一个很简单，通用的功能。

作为一个有经验的前端开发人员，有义务把代码中类似这样公共的基础性的东西抽象出来，一来是改善代码的整体质量，更重要的是为了将来做类似的功能或者类似的项目，能减少不必要的重复工作量。

在实际项目中，尤其是网站类型的项目中，分页部分的设计总是个性化比较强，基本上都不会长的一样，所以可能之前抽象出来的东西，如果写的不够灵活的话，对这些个性化强的项目来说，可能直接应用的时候也得做些调整才行。

本文尝试提供一个尽量满足这两方面要求的分页组件。

先介绍下写这个东西的背景：一直以来，我都想写一个相对比较灵活简单的列表组件，去年写过一个版本，后来改了几次，现在已经用到好几个项目里面去了，重构起来也有不少的工作量，因为应用到的页面已经把比较多了，所以就没有轻易地去做这个事情。

最近的工作，涉及到一个相对简单的列表页面，然后给的时间也比较多，于是我准备趁这个时候把我一直想写的列表组件给写出来。

现有的那个列表管理组件，没有做好职责分离，列表的管理跟分页的管理是揉在一起的，代码也比较乱，所以这次我打算先从分页组件下手。

因为分页组件与列表之间并没有太多耦合的逻辑，所以当把它们分离出来的时候，代码会更加清晰，独立，将来要维护也方便些。

前端虽然做不到像后台那样，考虑那么多的设计模式，但要是能把代码写的更让人容易理解的话，对团队对公司来说，真的是一件很好的事情。

虽然网上有不少的分页插件，但是都不值得去用，一来是有轻微的学习成本，二来是不符合自己的封装的思想，看着别扭；而且像这样简单的封装，最适合自己动手去写，加强面向对象编程的锻炼了。

下面就开始这个分页组件的内容。

1 基本思想先来说下我的基本想法。

分页这个部分，从内容上可能包括有：上一页，首页，下一页，尾页以及具体页；页码输入跳转；分页大小；记录总数；记录范围等；从结构上，必须知道分页大小，当前页的索引以及记录总数才能构造所有的内容；从操作上：改变分页大小，或者是点击上一页，首页，下一页，尾页以及具体页，或者是直接输入页码，都会引发外部分页内容的拉取。