easyui输入页数点击按钮手动翻页效果
easyui分页组件Pagination，在页数显示输入框内输入页码后，一般情况下是需要按下回车键才会执行分页操作。要想手动翻页，给easyui分页组件Pagination增加新按钮，可以按照一下步骤进行扩展，效果如下
easyui版本为1.4.4，其他版本注意查看dom结构，通过插入的按钮获取到页码输入框。及jquery.easyui.min.js中页面输入框绑定的事件名称，easyui1.4.4绑定的事件名称为：keydown.pagination。示例居于jquery-easyui-1.4.4\demo\pagination\basic.html修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>easyui分页组件Pagination按钮扩展</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script>
//翻页工具栏文字，注意放在easyui框架后面
if ($.fn.pagination) {
$.fn.pagination.defaults.showPageList = true;
$.fn.pagination.defaults.beforePageText = "第";
$.fn.pagination.defaults.afterPageText = "页 <a style='border:0;text-decoration:none; font-size:15px;font-weight:bold;color:#8DB2E3' href='javascript:void(0);' onclick='jumpPage(this)'>GO</a> 共 {pages} 页";
$.fn.pagination.defaults.displayMsg = "当前{from}-{to} 条 共{total}条记录";
}
window.jumpPage = function (btn) {
var ipt = $(btn).closest('td').prev().find('input');//其他版本注意修改这里
ipt.trigger('keydown.pagination', { keyCode: 13 });
}
</script>
</head>
<body>
<h2>easyui分页组件Pagination按钮扩展</h2>
<p>实现功能：扩展easyui Pagination分页组件，添加新按钮，点击此按钮进行翻页操作。</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel">
<div class="easyui-pagination" data-options="total:114"></div>
</div>
</body>
</html>
jquery.easyui.min.js源代码修改
/*bb.num.unbind(".pagination").bind("keydown.pagination",function(e){//大概在1057行，其他版本搜索pagination关键字定位到页面输入框
if(e.keyCode==13){
var _aa=parseInt($(this).val())||1;
_ae(_a2,_aa);
return false;
}
});
=======》*/
bb.num.unbind(".pagination").bind("keydown.pagination",function(e,data){//新增data参数，接收trigger触发事件传递的参数值
if(e.keyCode==13||(data&&data.keyCode==13)){//判断data参数是否传递及是否为keyCode 13
var _aa=parseInt($(this).val())||1;
_ae(_a2,_aa);
return false;
}
});
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui输入页数点击按钮手动翻页效果