SSE+easyui 分页

记录过程

1、dom添加分页支持

<dependency>
	<groupId>com.github.miemiedev</groupId>
	<artifactId>mybatis-paginator</artifactId>

</dependency>

2、mybatis.xml 配置分页

<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 此为我备忘的记录

<!--事务管理 -->
<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代码

 //初始化加载第一页主要方法
 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();

$("#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()); } } 此处参考了网上的部分代码,记录已备遗忘,

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券