1. 程式人生 > >分頁demo 前端+後臺 (union 與union all 的區別 以及分頁limit,offset的應用)

分頁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

分頁功能搞定