JQuery分页处理(后端)

来源：互联网发布：随机森林算法入门编辑：程序博客网时间：2024/05/26 02:51

利用JQuery实现分页处理，首先你要了解为什么要分页。分页主要是为了避免一次性从数据库获取大量数据。其次才是为了展示效果。
关键点：第几页 ,每页条数总行数

效果图:

1、使用的包含文件

<link href="css/Pager.css" rel="stylesheet" type="text/css" /><script src="js/jquery.pager.js" type="text/javascript"></script>

2、CSS文件内容

#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>

//每页显示数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方法实现

0 0