本文介绍了如何利用JQuery进行后端分页处理，旨在避免一次性加载大量数据库数据并优化展示效果。关键点包括当前页数、每页显示条数和总行数。示例中展示了HTML、Java和SQL的使用，并详细解析了JQuery Pager插件的调用，包括初始页数、总页数和点击事件回调函数。读者可以通过调整参数和自定义PageClick方法实现动态分页功能。
利用JQuery实现分页处理，首先你要了解为什么要分页。分页主要是为了避免一次性从数据库获取大量数据。其次才是为了展示效果。
关键点：第几页 ,每页条数 总行数
效果图:
1、使用的包含文件
<link href="css/Pager.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.pager.js" type="text/javascript"></script>
#pager ul.pages {
display:block;
border:none;
text-transform:uppercase;
font-size:10px;
margin:10px 0 50px;
padding:0;
}
#pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}
#pager ul.pages li:hover {
border:1px solid #003f7e;
}
#pager ul.pages li.pgEmpty {
border:1px solid #eee;
color:#eee;
}
#pager ul.pages li.pgCurrent {
border:1px solid #003f7e;
color:#000;
font-weight:700;
background-color:#eee;
}3、基础代码
html
<div class="box01_content" style="height:38px;">
<div id="pager" style="float:right;"></div>
</div>JS
//每页显示数
var recordPerPage=100;
//总条数
var recordSize='';//总条数未知的情况下，先查询总条数，在赋值
var jsonAll;数据源
$(document).ready(function() {
//查询总条数，并赋值外部变量
get_record_size($("#sdate_id").val(),$("#edate_id").val(),$("#province_id option:selected").val(),actyname,$("#marktcode_id").val(),$("#medianame_id").val(),mic);
$("#pager").pager({ pagenumber: 1, pagecount: (recordSize/recordPerPage+1), buttonClickCallback: PageClick });
}
//表示自定义点击分页数时的function方法，如：function(pageclickednumber){}
PageClick = function(pageclickednumber) {
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: (recordSize/recordPerPage+1), buttonClickCallback: PageClick });
// $("#result").html("Clicked Page " + pageclickednumber);
init_page_new($("#sdate_id").val(),$("#edate_id").val(),$("#province_id option:selected").val(),$("#acty_id").val(),$("#marktcode_id").val(),$("#medianame_id").val(),'',pageclickednumber);
makeTable(null,jsonAll);
}
//-------------------------------------------------------------------------------------------------------------------------------------------
//具体业务，查询数据后赋值给jsonAll;
function init_page_new(js_sdate,js_edate,js_province,js_actyname,js_marktcode,js_medianame,js_mic,page) {
if (page == '')
{
page='1';
}
if (js_mic != '')
{
js_marktcode = js_mic;
}
$.ajax({
url : "admonitor/actyAllInfoNew.do",
async : false, // 注意此处需要同步，因为返回完数据后，下面才能让结果的第一条selected
type : "POST",
data : {
'sdate' : js_sdate,
'edate' : js_edate,
'province' : js_province,
'actyname' : js_actyname,
'marktcode' : js_marktcode,
'medianame' : js_medianame,
'page' : page,//第几页
'recordPerPage' : recordPerPage//每页条数
},
dataType : "json",
success : function(result, resultState) {
//查询出结果取消页面不可编辑
$("#mb").css("display","none");
//关闭等待效果
layer.closeAll();
if (resultState == "success") {
var resultJson = eval(result);
//数据拦截下来分页~
jsonAll = resultJson;
if (resultJson != "") {
//$("#detail_id").html($("#TemplatePutDetail_all").tmpl(resultJson));
//makeTable(null,resultJson)
} else {
$("#detail_id").html("没有查询到数据");
}
} else {
alert("出现错误，请重试!");
}
} });
}
//-------------------------------------------------------------------------------------------------------------------------------------
//查询总条数，此方法参数应于你本身要查询的数据参数相同
function get_record_size(js_sdate,js_edate,js_province,js_actyname,js_marktcode,js_medianame,js_mic){
$.ajax({
url : "admonitor/adManagerRecordSize.do",
async : false, // 注意此处需要同步，因为返回完数据后，下面才能让结果的第一条selected
type : "POST",
data : {
'sdate' : js_sdate,
'edate' : js_edate,
'province' : js_province,
'actyname' : js_actyname,
'marktcode' : js_marktcode,
'medianame' : js_medianame,
},
dataType : "json",
success : function(result, resultState) {
if (resultState == "success") {
//var resultJson = eval(result);
recordSize = result;
} else {
alert("出现错误，请重试!");
}
} });
}
4、后端
通过此方式post请求后会多增加两个参数(int)，即第几页，每页条数
java
/****
* 营销活动-宽表导出营销活动全部信息（分页）
* @param _sdate 开始日期
* @param _edate 结束日期
* @param _province 省份
* @param _actyname 活动名称
* @param _marktcode 营销识别码
* @param _medianame 媒体名称
* @param _page 分页处理-第几页
* @param _recordPerPage 分页处理-每页条数
* @return
* @throws UnsupportedEncodingException
*/
@RequestMapping(value = "/actyAllInfoNew.do", method = RequestMethod.POST)
public @ResponseBody ArrayList<AdMonitorModel> actyAllInfoNew(
@RequestParam(value = "sdate") String _sdate,
@RequestParam(value = "edate") String _edate,
@RequestParam(value = "province") String _province,
@RequestParam(value = "actyname") String _actyname,
@RequestParam(value = "marktcode") String _marktcode,
@RequestParam(value = "medianame") String _medianame,
@RequestParam(value = "page") String _page,
@RequestParam(value = "recordPerPage") String _recordPerPage)
throws UnsupportedEncodingException {
String _timezone = "1";
if("0000-00-00".equals(_sdate) && "0000-00-00".equals(_edate))
{
_timezone = "0";
}
ArrayList<AdMonitorModel> modellist = null;
Map<String, String> map = new HashMap<String, String>();
map.put("_sdate", _sdate);
map.put("_edate", _edate);
map.put("_province", _province);
map.put("_actyname", _actyname);
map.put("_medianame", _medianame);
map.put("_marktcode", _marktcode);
map.put("_timezone", _timezone);
map.put("_start", ""+((Integer.parseInt(_page)-1)*Integer.parseInt(_recordPerPage)));//计算从第几行开始查询数据
map.put("_recordPerPage", _recordPerPage);
modellist = adMonitorModelDao.findActyAllInfoListNew(map);
System.out.println("营销活动-->宽表查询全部信息-->开始日期：" + _sdate + " 结束日期："
+ _edate + " 省份：" + _province + " 活动名称：" + _actyname);
return modellist;
}sql-范例
select * from t limit x offset y --在t表中从y行取，取x行数据5、具体详解
javascript代码(JQuery Pager调用)分析
(1)$("#pager").pager({});部分
pagenumber，表示初始页数，如：1
pagecount，表示总页数，如：15
buttonClickCallback，表示点击分页数按钮调用的方法，如：PageClick
(2)PageClick = function(pageclickednumber) {}部分
PageClick，表示自定义点击分页数时的function方法，如：function(pageclickednumber){}
jQuery插件JQuery Pager分页器只需要起始页数pagenumber，最大页数pagecount，点击页数时的调用buttonClickCallback的function方法就可实现javascript分页功能，实际应用中只需对PageClick方法进行简单修改就可使用，如将pagenumber和pagecount设为变量，可通过GET的方法进行页数值传递，JQuery Pager就可实现javascript分页功能，其它可自行扩展，同时对jQuery插件JQuery Pager分页器buttonClickCallback方法实现
扫一扫
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
