小白 關於使用laypage分頁 的運用簡述
- WBOY原創
- 2016-08-04 08:56:241294瀏覽
本人小白一枚，所以之前都是用自帶的分頁，後來有大神推薦我了這個，感覺不錯，所以就推荐一下，分頁一般是用GET來傳值的，所以，一旦要進行搜索執行時，需把搜尋值加在URL上，否則會點擊下一頁，搜尋條件被刷掉，第一次發帖，（歡迎大神給小的指點改進），主要是寫給同為小白苦苦掙扎的小夥伴們看的（共勉）。
//这里是前端页面需要引入的文件，去 http://laypage.layui.com/ 官网下载放在项目下即可（我将文件放在了Public下，然后再调用出来），<script src="/Public/laypage/laypage.js"></script>//好像很实用的样子，后端的同学再也不用写分页逻辑了。这里只要复制进来就可以了。不用改<b><script></b><br>
<b>laypage({<br>
cont: 'page11',<br>
pages: 18,</b> //假设我们获取到的是18（后端计算完总页数后将总页数值传过来，放在这里即可（类似{$totalpage}））.<br>
<b>curr: function(){ </b>//通过url获取当前页，也可以同上（pages）方式获取<br>
<b> var page = location.search.match(/page=(\d+)/);<br>
return page ? page[1] : 1;//如果没有页数显示时，默认是第一页<br>
}(), </b><br>
<b> jump: function(e, first){ </b>//触发分页后的回调<br>
<b> if(!first){</b> //一定要加此判断，否则初始时会无限刷新<br>
<b> location.href=setParam("page",e.curr);<br>
}<br>
}<br>
});</b>//设置url中连接符（为什么要加这段呢？因为我们要带搜索条件时，一般的URL要带"？","&"，这两个符号，这里就是为了，在追加页码时，当有了“？”符号时，会换成“&”，没有时则是“？”加page=页数，以下也是直接复制进去就可以了。）<b>function setParam(param,value){<br>
var query = location.search.substring(1);<br>
var p = new RegExp("(^|)" + param + "=([^&]*)(|$)");<br>
if(p.test(query)){<br>
//query = query.replace(p,"$1="+value);<br>
var firstParam=query.split(param)[0];<br>
var secondParam=query.split(param)[1];<br>
if(secondParam.indexOf("&")>-1){<br>
var lastPraam=secondParam.split("&")[1];<br>
return '?'+firstParam+'&'+param+'='+value+'&'+lastPraam;<br>
}else{<br>
if(firstParam){<br>
return '?'+firstParam+''+param+'='+value;<br>
}else{<br>
return '?'+param+'='+value;<br>
}<br>
}<br>
}else{<br>
if(query == ''){<br>
return '?'+param+'='+value;<br>
}else{<br>
return '?'+query+'&'+param+'='+value;<br>
}<br>
} <br>
}<br>
</script></b>//最后在你显示数据（例如后）最后添加下面这个<b><div style="margin-top:15px; text-align:center;" id="page11"></div></b>//上面的 id是自己的設定的，改的話，注意前面的cont: 'page11', 這裡也要換。到此前端的準備已經完成了。
搜尋條件的也要附上URL地址的話，我是這麼寫的
//點選搜尋<b>$("#sou").bind("click",function(event){<br>
event.preventDefault();</b>//這裡不懂的可以自己查查（用來取消事件的預設行為 一般是有<from>時，沒有就直接去掉）。 <br>
<b>var type=$("#type").val();</b>//取得假設的搜尋條件值<br>
<b>var url=$(this).attr("souid");</b>//這裡的是取得點擊是要跳轉的位址（例如：souid=""跳轉地址自己換）<br>
<b> window.location.href=url+"?typeid="+type;<br>
});</b></from>（小白只能這麼寫了，見諒，基本的JQ，應該還是可以理解吧！）
二。現在是後端的部分<b>public function text(){</b><br>
//下面是取得GET傳來的頁數，如果沒有頁數時，頁數為1.<br>
<b>$nowpage=I('page',1);</b><br>
//$totalpage就是計算你要取得的最大頁數，ceil 是向前取整，這裡是設定為10個資料為1頁（注意括號）。 <br>
<b>$totalpage=ceil((M('order')->where(條件)<br>
->count())/10);</b>//這裡盡量簡寫了。 <br>
//下面要注意加上 這句 limit(($nowpage-1)*10,10)，就是資料控制每頁顯示資料的條數，取得頁數後乘以設定的條數，取得該頁的10條（自行設定）數據<br>
<b>$res=M('order')->where(條件)<br>
->limit(($nowpage-1)*10,10)<br>
->select();</b><br>
//最後，就是把資料和最大頁數傳到前端接受了完成。 （搜尋條件的也要的話也要傳。）<br>
<b> $this->assign("totalpage",$totalpage);<br>
$this->assign("res",$res);</b><br>
<b>}</b>