总页数是手动填写,后续进行更改………………

效果:

html代码:

<!--使用标签创建-->
<%--<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background: #efefef; border: 1px solid #ccc;"></div>--%> <!--用来显示数据-->
<div id="p" title="显示数据" style="width: 602px; height: 200px; padding: 10px; background: #ffffff; border: 1px solid #ccc;"></div>
<!--使用js创建-->
<div id="pp" style="background: #efefef; border: 1px solid #ccc; width: 600px;"></div>

JavaScript代码:

$(function () {
//panel组建,用来显示分页数据
$('#p').panel({
title: '显示数据',
href: '../Json/Pagination_Josn.ashx?page=1&pageSize=10',
}); //分页组建
$('#pp').pagination({
total: ,//总条数
pageSize: ,//每一页显示多少条
pageNumber: ,//刚开始创建时候,显示第几页数据
pageList: [, , , , ],//每一页显示多少条 //按钮组
buttons: [{
text: '添加',
iconCls: 'icon-add',
handler: function () {
alert("add");
}
}, {
text: '删除',
iconCls: 'icon-cancel',
handler: function () {
alert("delete");
}
}], //指定显示的图标,比如说前一页,后一页,刷新等等
//layout:['first', 'last'], //showPageList: false,//是否显示【每一页显示条数】
//showRefresh: false,//是否显示刷新按钮 beforePageText: '第',
afterPageText: '共计{pages}页',
displayMsg: '第{from}到{to}页,总计{total}条数据', //选择一个新页面时候触发,使用上一页,下一页
onSelectPage: function (pageNumber, PageSize) {
$('#p').panel('refresh', '../Json/Pagination_Josn.ashx?page='+pageNumber+'&pageSize='+PageSize+'');
}
})
})

HttpHandler(一般处理程序):

using System.Web;

namespace EasyUI.Json
{
/// <summary>
/// Pagination_Josn 的摘要说明
/// </summary>
public class Pagination_Josn : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html"; //接受传递来的参数:第几页,每页显示几条
string page = context.Request.QueryString["page"].ToString();
string pageSize = context.Request.QueryString["pageSize"].ToString(); //数据库操作: //根据传递来的参数,可以在此实现数据库操作。
//将数据库返回的数据,格式化为html数据,传给页面,形成分页的结果。
//此例子没有使用数据库,直接返回的是,传递来的参数略加格式化的html数据。 //返回传递来的数据
context.Response.Write("页数:[" + page + "]<br/><br/>每页条数:[" + pageSize + "]"); } public bool IsReusable
{
get
{
return false;
}
}
}
}

EasyUI - pagination 分页组件的更多相关文章

  1. 第二百零九节,jQuery EasyUI,Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  2. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  3. Vue 2.0 pagination分页组件

    最近写了一个分页组件,效果如下图: f-pagination.js文件 Vue.component('f-pagination',{ template:'<div class="fPa ...

  4. [转载]EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...

  5. EasyUI Pagination 分页的两种做法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: p ...

  6. EasyUI Pagination 分页

    通过 $.fn.pagination.defaults 重写默认的 defaults. 分页(pagination)允许用户通过翻页导航数据.它支持页面导航和页面长度选择的可配置选项.用户可以在分页的 ...

  7. angular实现简单的pagination分页组件

    不想使用第三方库,只想使用一个分页器,那么就简单的实现一个,效果如下: 1.使用方式: <custom-pagination *ngIf="enterpriseList.length& ...

  8. EasyUI Pagination 分页分页布局定义 显示按钮布局

    //分页布局定义.该属性自版本 1.3.5 起可用.//布局项目包括一个或多个下列值://1.list:页面尺寸列表.//2.sep:页面按钮分割.//3.first:第一个按钮.//4.prev:前 ...

  9. easyUI pagination分页控件点击下一页后跳转到最后一页

    easyui-pagination点击下一页直接跳转到最后一页的可能原因 今天做到聊天记录展示页面的时候发现一个bug:初次进入页面加载出第一页的数据,点击下一页的时候不是到第二页而是到最后一页. 如 ...

随机推荐

  1. PendingIntent.getBroadcast第四个参数flags

    (1) android.app.PendingIntent.FLAG_UPDATE_CURRENT 如果PendingIntent已经存在,保留它并且只替换它的extra数据. (2) android ...

  2. BZOJ 2730: [HNOI2012]矿场搭建( tarjan )

    先tarjan求出割点.. 割点把图分成了几个双连通分量..只需dfs找出即可. 然后一个bcc有>2个割点, 那么这个bcc就不用建了, 因为一定可以走到其他救援出口. 只有一个割点的bcc就 ...

  3. POJ 1379 Run Away 【基础模拟退火】

    题意:找出一点,距离所有所有点的最短距离最大 二维平面内模拟退火即可,同样这题用最小圆覆盖也是可以的. Source Code: //#pragma comment(linker, "/ST ...

  4. 在DE1-SOC上运行Linux

    1,设定串口终端 安装驱动 :使用mini-USB线将计算机与DE1-SoC的UART转USB接口.drivers\USB2UART_driver文件夹内放置有驱动程序 设定串口终端规格 : 设定串口 ...

  5. javascript入门视频第一天 小案例制作 零基础开始学习javascript

    JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...

  6. 解决struts2中UI标签出现的问题: The Struts dispatcher cannot be found

    解决struts2中UI标签出现的问题: The Struts dispatcher cannot be found 异常信息: The Struts dispatcher cannot be fou ...

  7. SDCard助手类

    package com.zyh.sdcardHelper; import java.io.BufferedInputStream; import java.io.BufferedOutputStrea ...

  8. WinForm 使用皮肤,且单击按更换皮肤。

    运行效果: 首先把DLL程序集文件和SSK皮肤文件放在要运行程序的DEBug文件夹下,然后引入引用. 之后可以在程序里写代码了. private void Form2_Load(object send ...

  9. oracle 11gR2默认密码修改

    很久以前装了Oracle,今天终于下决心要学一学了,结果一上午的时间就贡献给如何连接数据库上了 忘记了安装时设置的用户名和密码怎么办?查了下网上的资料,终于解决了! 方法一: 首先进入sqlplus: ...

  10. BZOJ 3011: [Usaco2012 Dec]Running Away From the Barn( dfs序 + 主席树 )

    子树操作, dfs序即可.然后计算<=L就直接在可持久化线段树上查询 -------------------------------------------------------------- ...