ThinkPHP + jquery implements the "load more" function code, thinkphpjquery
ThinkPHP + jQuery implements "load more"
In many web interfaces, the demo of clicking the button to load the latest data is used. The following example uses thinkphp + jquery to implement the example:
The implementation result is roughly as follows:
Step 1
Template File
<! -- Software --> <div class = "lists switcher-panel-cur"> <ul class = "xinhao"> {volist name = "apps" id = "vo"} <li class = "app-item link"> <div class = "list-img"> </div> <div class =" list-cont "> <div class =" lt-c-tit ">
Step 2
Background File
Class Index {// print the Home Page public function index () {$ total = db ('apps ')-> count (); $ apps = db ('apps ') -> where ('appstatus', 1)-> limit (5)-> order ("AppID ASC")-> select (); // var_dump ($ apps ); $ view = new View (); $ view-> assign ('Total', $ total); $ view-> assign ('apps ', $ apps ); return $ view-> fetch ('index');} public function data () {$ start = Input ('Post. start'); // echo ($ start); $ list = db ('apps')-> limit ($ start, 5)-> order (' AppID asc ')-> select (); return (array ('result' => $ list, 'status' => 1, 'msg' => 'is obtained successfully! '));}}
Step 3
Asynchronous js in the template
<Script> // load more var nStart = 5; $ ('# loadmore '). click (function () {var _ this = $ (". xinhao "); if (nStart >={ $ total}) {// alert ('There is no data behind it! '); $ ("# Loadmore" developer.text('no data exists. ..'developer.css ({"border-top": "1px solid # d4d5d6", "height": "30px", "line-height ": "30px"}); return false;} else {$. post ("{: url ('index/data')}", {start: nStart}, function (res) {$. each (res ['result'], function (I, item) {_ this. append ('<li class = "app-item link"> \ <div class = "list-img"> \ </div> \ <div class =" list-cont "> \ <div class =" lt-c-tit ">\< h2 >\< a href = "# nogo" rel = "external nofollow" rel = "external nofollow"> '+ item. appName + '</a>
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.