EasyUi datagrid はテーブル paging_jquery を実装します

1. まずはeasyuiのcssファイルとjsファイルを導入します

2.フロントで記述する必要があるjs

コードをコピーします コードは次のとおりです:

//ソースデータ
function Async(action,args,callback){
$.ajax({
URL: アクション、
タイプ:"POST",
データタイプ:"json",
タイムアウト: 10000、
データ: 引数、
成功: function(data){
if(コールバック){
コールバック(データ);
}
}
});
}
//データをバインドし、ページングを設定します
function BingData(pid,args,action,callback){
Async(アクション,引数,関数(データ){
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: 'th',
afterPageText: 'ページ {pages}',
displayMsg: '現在、{from} ～ {to} レコード、合計 {total} レコードを表示しています',
pageSize: args.pageSize,
合計: _dataCount、
ページ番号: args.pageIndex,
pageList:args.pageList,
onSelectPage: 関数 (pageNumber, pageSize) {
args.pageIndex = pageNumber;
args.pageSize = pageSize;
BingData(pid, args, action,null);
}、
onRefresh: 関数 (pageNumber, pageSize) {
args.pageIndex = pageNumber;
args.pageSize = pageSize;
BingData(pid, args, action,null);
}
});
}
});
}
//フォームをオブジェクトにシリアル化します
$.fn.serializeObject = function(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name, v = o.value;
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 rows = tb.datagrid('getRows');
for ( var i = 0; 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({
タイトル: '資金返却バッチクエリ結果',
ストライプ: true、
fitColumns: true, //適応型列サイズ
行番号: true、
nowrap: true, // true に設定すると、データ長が列幅を超えると、自動的にインターセプトされます
ストライプ: true、
幅:fixWidth(0.99),
高さ: '430'、
singleSelect:true,
loadMsg: 'データをロード中...',
列:[[
{field:'interfaceInfoCode',title:'Capital Channel Code',width:fixWidth(0.3),align: "center"},
{field:'retreatBatchCode',title:'Funds Return Batch Number',width:fixWidth(0.2),editor:'text',align: "center"},
                                                                                                                                                                                  {フィールド:'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:function(data){
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"));
// ページネーションエンティティ
String obj = request.getParameter("obj");
if (StringUtils.notBlank(obj)) {
funRetreatVoucher = JsonUtils.toObject(obj, FundRetreatVoucherParam.class) // シリアル化された json オブジェクトをエンティティに変換します
}
out = response.getWriter();
List frvs = FundRetreatVoucherService.findAllFundRetreatVoucher(page, FundRetreatVoucher);
int total = funRetreatVoucherService.findAllFundRetreatVoucher(getTotal(), funRetreatVoucher).size();//データサイズ
JSONObject json = new JSONObject();
json.put("list", frvs);//データ、ここでの put のキーは list である必要があります。変更されている場合は、BingData
内のデータを変更する必要があります。 json.put("サイズ", 合計);
out.print(json);