分頁demo 前端+後臺 (union 與union all 的區別 以及分頁limit,offset的應用)
記重點
1.UNION去重且排序,UNION ALL不去重不排序。
2.
sql 中 limit 與 limit,offset連用的區別
① select * from table limit 2,1;
//含義是跳過2條取出1條資料,limit後面是從第2條開始讀,讀取1條資訊,即讀取第3條資料
② select * from table limit 2 offset 1;
//含義是從第1條(不包括)資料開始取出2條資料,limit後面跟的是2條資料,offset後面是從第1條開始讀取,即讀取第2,3條
來源: http://blog.csdn.net/yplee_8/article/details/52252549
通過limit和offset 或只通過limit可以實現分頁功能。
假設 numberperpage 表示每頁要顯示的條數,pagenumber表示頁碼,那麼 返回第pagenumber頁,每頁條數為numberperpage的sql語句:
程式碼示例:
語句3:select * from studnet limit (pagenumber-1)*numberperpage,numberperpage
語句4:select * from student limit numberperpage offset (pagenumber-1)*numberperpage
例子:
前端:
<div class="div-rs"> <div class="maplist"> <div style="text-align:right;color:#999;" class="totalnum pr10 pt10">共 0 個</div> <ul> <li> </li> </ul> </div> <div style="padding:15px 0;text-align:center;display: none" class="gspager"> <div class="prev">上頁</div> <div class="indi"> <div class="now">1</div> / <div class="total">1</div> </div> <div class="next">下頁</div> </div> </div> </div>
效果:
js:
分頁
// 查詢 翻頁
$('#searchall-result').on('click', '.gspager .next,.gspager .prev', function() {
var gspager = $(this).closest('.gspager');
var nowobj = gspager.find('.now');
var total = gspager.find('.total');
var num = nowobj.text() * 1;
if($(this).hasClass('next')) {
nowobj.text(num + 1);
if(nowobj.text() * 1 == total.text() * 1) {
gspager.find('.next').hide();
gspager.find('.prev').show();
}
} else {
nowobj.text(num - 1);
if(nowobj.text() * 1 == 0) {
gspager.find('.prev').hide();
gspager.find('.next').show();
}
}
$('#form-searchall').trigger('submit');
})
/**
* @param pager:翻頁div;allsize 總資料條數;pagesize:條數; pagenum:頁碼;
*/
var renderPage = function(pager, allsize, pagesize, pagenum) {
pagenum = pagenum * 1;
//翻頁數字更新
var num = Math.ceil(allsize.count * 1 / pagesize * 1);
pager.find('.total').text(num + "");
pager.find('.now').text(pagenum + "");
if(pagenum == 1) {
pager.find('.prev').hide();
} else {
pager.find('.prev').show();
}
if(pagenum == num) {
pager.find('.next').hide();
} else {
pager.find('.next').show();
}
if(num > 1) {
pager.show();
} else {
pager.hide();
}
}
$weixiuhistory.on('change', 'select', function() {
var pagesize = 1,
gspager = $weixiuhistory.find('.gspager');
pagenum = 1; //預設查第一頁
var userid = JSON.parse(localStorage.getItem('sysuser')).userid;
history_list(userid, PageSize_history, pagenum);
})
$('#weixiuhistory').on('click', '.gspager .next,.gspager .prev', function() {
var gspager = $(this).closest('.gspager');
var nowobj = gspager.find('.now');
var total = gspager.find('.total');
var num = nowobj.text() * 1;
if($(this).hasClass('next')) {
nowobj.text(num + 1);
if(nowobj.text() * 1 == total.text() * 1) {
gspager.find('.next').hide();
gspager.find('.prev').show();
}
} else {
nowobj.text(num - 1);
if(nowobj.text() * 1 == 0) {
gspager.find('.prev').hide();
gspager.find('.next').show();
}
}
var userid = JSON.parse(localStorage.getItem('sysuser')).userid;
userid === "" ? 'c9ffe1ae4f5043d5bd3c091198f313bf' : userid;
history_list(userid, PageSize_history, gspager.find('.now').text());
})
})
java:
分頁: sql最後ssql += "limit @pagesize OFFSET @pagestart";
int pagesize = allp.getInt("pagesize");
int pagenum = allp.getInt("pagenum") - 1;
int pagestart = pagenum * pagesize;
sql.params().set("pagesize", pagesize);
sql.params().set("pagestart", pagestart);
sql.vars().set("likemassage", likemassage);
postgreSql:
with tmp_obj as (select d.name,'' as adress,'point' as category,st_astext(geom) as geom from ytqpoint d where d.name like '%科技二路%'
union all
select b.name,'','line',st_astext(geom) as geom from ytqline b where b.name like '%科技二路%'
union all
select c.name,'','area',st_astext(geom) as geom from ytqmian c where c.name like '%科技二路%'
union all
select a.name,a.adress,a.category,st_astext(geom) as geom from ytcypoi a where (a.name like '%科技二路%' or a.category like '%科技二路%'))
select distinct on(name) name,adress,category,geom,st_astext(ST_Centroid(geom)) as center from tmp_obj limit 4 OFFSET 0
上面是搜尋科技二路的sql
分頁功能搞定