Extjs4中的分页应用结合前后台

前台部分：


代码如下:

Ext.define('GS.system.role.store.RoleGridStore',{
extend:'Ext.data.Store',
model:'GS.system.role.model.RoleGridModel',
id:'roleStoreId',
pageSize:4,//分页大小
proxy:{
type:'ajax',
url:'/gs_erp/roleAction!getRoleList',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
}
},
sorters: [{
property: 'id', //排序字段
direction: 'asc'// 默认ASC
}],
autoLoad:{start: 0, limit: 4}//start是从第几条开始，limit是每页的条数
});

store.loadPage(1); //加载第一页
后台部分：


代码如下:

private int limit;//每一页的条数
private int start;//从哪一条数据开始查
private int total;//总条数
/**
* 查找所有角色
*/
public void getRoleList()
{

List<Role> roleList=new ArrayList<Role>();
StringBuffer toJson=new StringBuffer();//用来放json数据
System.out.println(start+","+limit+","+total);
try
{
roleList=(List<Role>) pageServiceImpl.commonPagination(Role.class, "", start, limit);
total=pageServiceImpl.getTotalNum(Role.class, "");
toJson.append("{total:").append(""+total+"").append(",success:true,").append("start:")
.append(""+start+"").append(",");
toJson.append("rows:[");
for(int i=0;i<roleList.size();i++)
{
toJson.append("{id:").append("'").append(""+roleList.get(i).getId()+"").append("'")
.append(",name:").append("'").append(""+roleList.get(i).getName()+"")
.append("'").append(",desc:").append("'").append(""+roleList.get(i).getDesc()+"")
.append("'").append("}");
if(i<roleList.size()-1)
{
toJson.append(",");
}
}
toJson.append("]}");
} catch (Exception e1)
{
// TODO Auto-generated catch block
e1.printStackTrace();
}
try
{
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=utf-8");
response.getWriter().print(toJson);
System.out.println(toJson);
} catch (IOException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
}

赞 (0)

相关推荐

  • Extjs4中的分页应用结合前后台

    前台部分: 复制代码 代码如下: Ext.define('GS.system.role.store.RoleGridStore',{ extend:'Ext.data.Store', model:'GS.system.role.model.RoleGridModel', id:'roleStoreId', pageSize:4,//分页大小 proxy:{ type:'ajax', url:'/gs_erp/roleAction!getRoleList', reader: { type: 'js

  • ExtJS4中使用mixins实现多继承示例

    在ExtJS4中使用mixins来实现多继承.具体例子代码如下: 复制代码 代码如下: (function(){ Ext.onReady(function(){ Ext.define('say',{ canSay:function(){ alert("hello"); } }); Ext.define('eat',{ caneat:function(){ alert("eating"); } }); Ext.define("user",{ mix

  • Python的Flask框架中实现分页功能的教程

    Blog Posts的提交 让我们从简单的开始.首页上必须有一张用户提交新的post的表单. 首先我们定义一个单域表单对象(fileapp/forms.py): class PostForm(Form): post = TextField('post', validators = [Required()]) 下面,我们把这个表单添加到template中(fileapp/templates/index.html): <!-- extend base layout --> {% extends &

  • asp.net使用FCK编辑器中的分页符实现长文章分页功能

    本文实例讲述了asp.net使用FCK编辑器中的分页符实现长文章分页功能.分享给大家供大家参考,具体如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SplitContent.aspx.cs" Inherits="SplitContent" %> <%@ Register Assembly="FredCK.FCKeditorV2&

  • BootStrap中Table分页插件使用详解

    BootStrap中Table分页插件使用详解

    分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu

  • YII框架中搜索分页jQuery写法详解

    控制层 use frontend\models\StudUser; use yii\data\Pagination; use yii\db\Query; /** * 查询 * */ public function actionSearch() { //接值 $where=Yii::$app->request->get(); //实例化query $query=new Query(); $query->from('stud_user'); //判断 if(isset($where['sex

  • Android开发中滑动分页功能实例详解

    Android开发中滑动分页功能实例详解

    本文实例讲述了Android开发中滑动分页功能.分享给大家供大家参考,具体如下: android UI 往右滑动,滑动到最后一页就自动加载数据并显示 如图: Java代码: package cn.anycall.ju; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import andro

  • django中上传图片分页三级联动效果的实现代码

    Django1.8.2中文文档:Django1.8.2中文文档 上传图片配置上传文件保存目录 1)新建上传文件保存目录. 2)配置上传文件保存目录. 后台管理页面上传图片 1)设计模型类. 2)迁移生成表格. 3) 注册模型类. 后台管理页面上传图片实例 1.在static下面创建media文件夹(再在media文件夹里面新建booktest文件夹). 2.设置静态文件保存目录 # 设置上传文件的保存目录 MEDIA_ROOT = os.path.join(BASE_DIR, 'static/m

  • 在vue和element-ui的table中实现分页复选功能

    背景 后台管理系统中,使用表格展示数据时,可能的需求是多项选择然后进行批量操作,也期望能翻页多选. 实现 页面结构如下 <el-table class="table" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" ref="asTable" > <el-table

  • 如何在django中实现分页功能

    1.在html页面中导入js文件和css文件 <link rel="stylesheet" href="../../../static/css/jquery.pagination.css" rel="external nofollow" > <script type="text/javascript" src="../../../static/js/jquery-1.12.4.min.js"

随机推荐