前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SSE+easyui 分页

SSE+easyui 分页

作者头像
用户5640963
发布2019-07-28 14:19:13
6950
发布2019-07-28 14:19:13
举报
文章被收录于专栏:卯金刀GG卯金刀GG

记录过程

1、dom添加分页支持

代码语言:javascript
复制
<dependency>
	<groupId>com.github.miemiedev</groupId>
	<artifactId>mybatis-paginator</artifactId>

</dependency>

2、mybatis.xml 配置分页

代码语言:javascript
复制
<plugins>
	<plugin
		interceptor="com.github.miemiedev.mybatis.paginator.OffsetLimitInterceptor">
		<property name="dialectClass"
			value="com.github.miemiedev.mybatis.paginator.dialect.OracleDialect" />
	</plugin>
</plugins>

3、mybatis的maper和xml文件对应,配置位置spring.xml 此为我备忘的记录

代码语言:javascript
复制
<!--事务管理 -->
<bean id="transactionManager"
	class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
	<property name="dataSource" ref="dataSource" />
</bean>
<!-- 配置Jdbc模板 -->
<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
    <property name="dataSource" ref="dataSource"></property>
</bean>
<!-- Session Factory -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
	<property name="dataSource" ref="dataSource" />
	<property name="typeAliasesPackage" value="cn.qazit.app.core.**.model" />
	<property name="configLocation" value="classpath:mybatis/mybatis-config.xml"></property>
	<!-- <property name="mapperLocations" value="classpath:cn/qazit/app/core/**/persistence/*.xml" /> -->
</bean>

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
	<property name="basePackage" value="cn.qazit.app.core.**.persistence" />
	<!-- <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" /> -->
</bean>

<!-- 事务(注解 ) -->  
<tx:annotation-driven transaction-manager="transactionManager" />

4、开始写js代码

代码语言:javascript
复制
 //初始化加载第一页主要方法
 function loadPage(pri_url,pagenum,pagesize){
    //此处是获取查询条件的js通用方法
$entity = getQueryData();

var localurl = pri_url+"?page="+pagenum+"&rows="+pagesize;
$('#dta_zybjczs').datagrid({
	//title: "查询结果",
	loadMsg:'数据加载中,请稍后……',
	iconCls: 'icon-edit', //图标
    height: 240,
    url: localurl,
    method: 'POST',
    queryParams: {'entity':JSON.stringify($entity)},
    idField: 'ID',
    singleSelect: false,
    rownumbers: true,
    pagination: true,
    pageSize: pagesize,
    pageList: [5, 10, 15, 20],
    showFooter: true,
    columns: [[
   	         { field: 'ck', checkbox: true }
   	        ,{ field: 'mc', title: '名称', width: 180, align: 'left' }
   	        ,{ field: 'gjz', title: '关键字', width: 150, align: 'left' }
   	        ,{ field: 'wjlx', title: '文件类型', width: 100, align: 'left' }
   	        ,{ field: 'zddw', title: '制定单位', width: 180, align: 'left'}
   	        ,{ field: 'zdrq', title: '制定日期', width: 100, align: 'left',
   	        	formatter:function(value)  
                { /* 调用函数显示时间 */  
                    return formatdate(value);  
                }  
   	         }
   	        ,{ field: 'bbrq', title: '颁布日期', width: 100, align: 'left' ,
   	        	formatter:function(value)  
                { /* 调用函数显示时间 */  
                    return formatdate(value);  
                } 
   	        }
   	        ,{ field: 'ssrq', title: '实施日期', width: 100, align: 'left',
   	        	formatter:function(value)  
                { /* 调用函数显示时间 */  
                    return formatdate(value);  
                } 
   	        }
   	        ,{ field: 'bbh', title: '版本号', width: 80, align: 'left'}
   	        ,{ field: 'id', title: '操作', width: 80, align: 'left',
   	           formatter:function(value){ 
                               //返回详细按钮的公用方法
   	        	   var btn = addCaozButton('editcls','editRow',value,'详细');
   	        	   return btn;
   	           }  
   	        }
   	]],
   	onBeforeLoad: function (param) {
   	},
    onLoadSuccess: function (data) {
            //修改详细按钮样式的方法
    	addXiangxClass('editcls','详细');
    },
    onLoadError: function () {
    },
    onClickCell: function (rowIndex, field, value) {
    }
});

//分页 var pager=$('#dta_zybjczs').datagrid('getPager'); pager.pagination({ total:0, rows : 0, pageNumber : 1, pageList : [ 10,20,30 ],// 可以设置每页记录条数的列表 onBeforeRefresh: function () { }, onSelectPage: function (pageNumber, pageSize) {//分页触发 find(pageNumber, pageSize); } }); };

//通用方法 /**

  • 详细按钮easyui样式
  • @param classid class的标签值
  • @param textval 按钮的显示值 */ function addXiangxClass(classid,textval){ $('.'+classid).linkbutton({text:textval,plain:true,iconCls:'icon-edit'}); }

/**

  • 操作按钮
  • @param classid 定义的按钮的class标签值
  • @param method 方法名
  • @param val 修改的id值
  • @param textval 显示的按钮内容
  • @returns {String} */ function addCaozButton(classid,method,val,textval){ var btn = '<a class="'+classid+'" onclick="'+method+'(\''+val+'\')" href="javascript:void(0)">'+textval+'</a>'; return btn; }

5、跳转页的方法 function find(pageNumber, pageSize) { $entity = getQueryData();

代码语言:javascript
复制
$("#dta_zybjczs").datagrid('getPager').pagination({pageSize : pageSize, pageNumber : pageNumber});//重置
$("#dta_zybjczs").datagrid("loading"); //加屏蔽
$.ajax({
    type : "POST",
    dataType : "json",
    url : pri_url+"?page="+pageNumber+"&rows="+pageSize,
    data:{'entity':JSON.stringify($entity)},
    success : function(data) {
        $("#dta_zybjczs").datagrid('loadData',pageData(data.rows,data.total));//这里的pageData是我自己创建的一个对象,用来封装获取的总条数,和数据,data.rows是我在控制器里面添加的一个map集合的键的名称
        //var total =data.total;
        $("#dta_zybjczs").datagrid("loaded"); //移除屏蔽
    },
    error : function(err) {
        $.messager.alert('操作提示', '获取信息失败...请联系管理员!', 'error');
        $("#dta_zybjczs").datagrid("loaded"); //移除屏蔽
    }
});

};

//自用方法 /**

  • 组合要显示的数据
  • @param list
  • @param total
  • @returns {___anonymous3546_3548} */ function pageData(list,total){ var obj=new Object(); obj.total=total; obj.rows=list; return obj; }; 6、后台java代码 @RequestMapping(value = "/listZybjczs") public void listZybjczs(HttpServletRequest request, HttpServletResponse response) { String spage = request.getParameter("page"); String srows = request.getParameter("rows"); int page = Integer.parseInt((spage==null||Integer.parseInt(spage)<=0)?"1":spage); int rows = Integer.parseInt((srows==null||Integer.parseInt(srows)<=0)?"10":srows); String entity = request.getParameter("entity"); JSONObject obj = JSONObject.fromObject(entity); // 拼装分页条件 PageBounds pageBounds = new PageBounds(page, rows); String result = ""; try{ result = gfxwjService.queryByPage(obj, pageBounds); }catch(Exception e){ e.printStackTrace(); log.error(e.getMessage()); } log.debug(page + ":" + rows); log.debug(result); try { this.ajax(response, result, AbstractBaseController.JSON); } catch (IOException e) { e.printStackTrace(); log.error(e.getMessage()); } } 此处参考了网上的部分代码,记录已备遗忘,
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档