EasyUi DataGrid는 테이블 paging_jquery를 구현합니다.

1. 먼저 easyui의 CSS와 js 파일을 소개합니다

2. 프런트에서 작성해야 하는 js

코드 복사 코드는 다음과 같습니다.

//소스 데이터
함수 Async(액션,인수,콜백){
$.ajax({
 URL: 액션 ,
​유형:"POST",
​데이터 유형:"json",
시간 초과: 10000,
​데이터: args,
성공: 함수(데이터){
​​if(콜백){
​ 콜백(데이터);
}
}
});
}
//데이터 바인딩 및 페이징 설정
함수 BingData(pid,args,action,callback){
비동기(액션,인수,함수(데이터){
if(data!=null&&data.list!=null){
var _dataCount=data.size;//총 항목 수
var _data=data.list;//데이터
if(콜백){
콜백(_data);
}
$(pid).datagrid('loadData', _data);
$(pid).datagrid('getPager').pagination({
beforePageText: '일',
afterPageText: '페이지 {페이지}',
displayMsg: '현재 {from} - {to} 레코드를 표시 중입니다. 총 {total} 레코드입니다.',
페이지 크기: args.pageSize,
총계: _dataCount,
페이지 번호: args.pageIndex,
페이지 목록:args.pageList,
onSelectPage: 함수(pageNumber, pageSize) {
args.pageIndex = 페이지번호;
args.pageSize = 페이지 크기;
BingData(pid, args, action,null);
},
onRefresh: 함수(pageNumber, pageSize) {
args.pageIndex = 페이지번호;
args.pageSize = 페이지 크기;
BingData(pid, args, action,null);
}
});
}
});
}
//양식을 객체로 직렬화
$.fn.serializeObject = 함수(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.이름, v = o.값;
obj[n] = obj[n] === 정의되지 않음 v
: $.isArray( obj[n] ) ? obj[n].concat( v )
: [ obj[n], v ];
});
return JSON.stringify(obj);
};
//너비
함수 fixWidth(퍼센트){
document.body.clientWidth * 퍼센트 반환 ;
}
//편집 종료
함수 endEdit(vid){
vid = "#" vid;
var tb=$(vid);
var 행 = tb.datagrid('getRows');
for ( var i = 0; i < 행.길이; i ) {
tb.datagrid('endEdit', i);
}
}
함수 GetData(obj){
var url = contextPath '/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm';//작업 경로
var args={};
args.pageIndex=1;//페이지 색인
args.pageSize=10;//페이지 용량
if(obj!=null){ //직렬화된 객체 형성
args.obj=obj
}
BingData("#tab",args,url,null);
}
함수 getTab(){
GetData();
var tb=$('#tab');
tb.datagrid({
title: '펀드 반환 일괄 조회 결과',
줄무늬: 사실,
fitColumns: true, //적응형 열 크기
행 번호: true,
nowrap: true, //true로 설정하면 데이터 길이가 열 너비를 초과하면 자동으로 차단됩니다.
줄무늬: 사실,
너비:고정 너비(0.99),
키:'430',
단일 선택:true,
loadMsg: '데이터 로드 중...',
열:[[
{field:'interfaceInfoCode',title:'수도 채널 코드',width:fixWidth(0.3),align: "center"},
              {field:'retreatBatchCode',title:'자금 반환 배치 번호',width:fixWidth(0.2),editor:'text',align: "center"},
~                                                     {field:'totalMoney',title:'총액',width:fixWidth(0.1),align:'right',editor:'text',align: "center"},
{field:'def2',title:'Operation',width:fixWidth(0.3),editor:'text',align:'right',align: "center",
포맷터:함수(값, 행, 인덱스){
　　var vcode =row.retreatBatchCode;
　　var e = '세부정보';
　　var d = '감사 통과 　　var f = '감사 거부 　　return e d f;
　　}}
]],
onLoadSuccess:함수(데이터){
​if (data.total == 0) {
}
},
페이지 매김: true,
pageIndex:1,//페이지 인덱스
pageSize:10,//페이지 용량
페이지 목록: [10,15,20]
})
}

2 백스테이지

코드 복사 코드는 다음과 같습니다.

int currentPage = request.getParameter("pageIndex") == null ? 1 : Integer.parseInt(request.getParameter("pageIndex"));
//페이지당 줄 수
int showCount = request.getParameter("pageSize") == null ? 10 : Integer.parseInt(request.getParameter("pageSize"));
// 페이지 매김 엔터티
문자열 obj = request.getParameter("obj");
if (StringUtils.notBlank(obj)) {
fundRetreatVoucher = JsonUtils.toObject(obj, FundRetreatVoucherParam.class); //직렬화된 json 객체를 엔터티로 변환
}
출력 = response.getWriter();
List frvs =fundRetreatVoucherService.findAllFundRetreatVoucher(page,fundRetreatVoucher);
int total =fundRetreatVoucherService.findAllFundRetreatVoucher(getTotal(),fundRetreatVoucher).size();//데이터 크기
JSONObject json = 새로운 JSONObject();
json.put("list", frvs);//Data, 여기에 넣을 키는 목록이어야 합니다. 변경된 경우 BingData에서 데이터를 변경해야 합니다
json.put("크기", 합계);
out.print(json);