Rendering (displaying news list on the front desk)
Note: The css implementation in the following code is not included, you can implement it yourself. Obtain the data in the database through the ajax callback function success, etc., and then output the data to php through js to dynamically display the data. As a reminder.
Code implementation
<code>pages.js </code>
<code><span>var</span> curPage =<span>1</span>;<span>//当前页码</span><span>var</span> total,pageSize,totalPage;
<span>//获取数据</span><span><span>function</span><span>getData</span><span>(page)</span>{</span>
$.ajax({
type:<span>'POST'</span>,
url:<span>'page.php'</span>,
data:{<span>'pageNum'</span>:page-<span>1</span>},
dataType:<span>'json'</span>,
beforeSend:<span><span>function</span><span>()</span>{</span>
$(<span>"#list ul"</span>).append(<span>"<li>loading...</li>"</span>);
},
success:<span><span>function</span><span>(json)</span>{</span>
$(<span>"#list ul"</span>).empty();
total = json.total;<span>//总记录数</span>
pageSize = json.pageSize;<span>//每页显示条数</span>
curPage = page;<span>//当前页</span>
totalPage = json.totalPage;<span>//总页数</span><span>var</span> li =<span>""</span>;
<span>var</span> list = json.list;
$.each(list,<span><span>function</span><span>(index,array)</span>{</span><span>//遍历json数据列</span><span>if</span>(array[<span>'title'</span>].length ><span>28</span>){
<span>var</span> title_sub = array[<span>'title'</span>].substring(<span>0</span>,<span>20</span>);<span>// 获取子字符串。</span>
}
elsevar title_sub = array[<span>'title'</span>];
<span>if</span>(<span>0</span>==index &&<span>1</span>==curPage)li +=<span>"<li>
<a href="%5C%22%22</span">+ array[<span>'content'</span>]+<span>"\"style=\"color:red;font-weight:900;\"target=\"myIframe\" title=\""</span>+array[<span>'title'</span>]+<span>"\">"</span>+title_sub+<span>"</span></a><div>"+array[<span>'date'</span>]+<span>"</span>
</div>
</li>"</span>;
elseif(<span>1</span>==index &&<span>1</span>==curPage)li +=<span>"<li>
<a href="%5C%22%22</span">+ array[<span>'content'</span>]+<span>"\"style=\"color:Darkorange;font-weight:700;\"target=\"myIframe\" title=\""</span>+array[<span>'title'</span>]+<span>"\">"</span>+title_sub+<span>"</span></a><div>"+array[<span>'date'</span>]+<span>"</span>
</div>
</li>"</span>;
elseif(<span>2</span>==index &&<span>1</span>==curPage)li +=<span>"<li>
<a href="%5C%22%22</span">+ array[<span>'content'</span>]+<span>"\"style=\"color:Greenyellow;font-weight:500;;\"target=\"myIframe\" title=\""</span>+array[<span>'title'</span>]+<span>"\">"</span>+title_sub+<span>"</span></a><div>"+array[<span>'date'</span>]+<span>"</span>
</div>
</li>"</span>;
<span>else</span> li +=<span>"<li>
<a href="%5C%22%22</span">+ array[<span>'content'</span>]+<span>"\"target=\"myIframe\" title=\""</span>+array[<span>'title'</span>]+<span>"\">"</span>+title_sub+<span>"</span></a><div>"+array[<span>'date'</span>]+<span>"</span>
</div>
</li>"</span>;
});
$(<span>"#list ul"</span>).append(li);
},
complete:<span><span>function</span><span>()</span>{</span><span>//生成分页条</span>
getPageBar();
},
error:<span><span>function</span><span>()</span>{</span>
alert(<span>"数据加载失败"</span>);
}
});
}
<span>//获取分页条</span><span><span>function</span><span>getPageBar</span><span>()</span>{</span><span>//页码大于最大页数</span><span>if</span>(curPage>totalPage) curPage=totalPage;
<span>//页码小于1</span><span>if</span>(curPage1) curPage=<span>1</span>;
pageStr =<span>"<span>共"</span>+total+<span>"条</span><span>"</span>+curPage+<span>"/"</span>+totalPage+<span>"</span>"</span>;
<span>//如果是第一页</span><span>if</span>(curPage==<span>1</span>){
pageStr +=<span>"<span>首页</span> <span>上一页</span> "</span>;
}<span>else</span>{
pageStr +=<span>"<span><a rel="1">首页</a> </span><span><a rel='"</span>+(curPage-<span>1</span>)+<span>"'>上一页</a> </span>"</span>;
}
<span>//如果是最后页</span><span>if</span>(curPage>=totalPage){
pageStr +=<span>"<span>下一页</span> <span>尾页</span> "</span>;
}<span>else</span>{
pageStr +=<span>"<span><a rel='"</span>+(<span>parseInt</span>(curPage)+<span>1</span>)+<span>"'>下一页</a> </span><span><a rel='"</span>+totalPage+<span>"'>尾页</a> </span>"</span>;
}
$(<span>"#pagecount"</span>).html(pageStr);
}
$(<span><span>function</span><span>()</span>{</span>
getData(<span>1</span>);
$(<span>"#pagecount span a"</span>).live(<span>'click'</span>,<span><span>function</span><span>()</span>{</span><span>var</span> rel = $(<span>this</span>).attr(<span>"rel"</span>);
<span>if</span>(rel){
getData(rel);
}
});
});</code><code>page.php </code>
<code><span><?php </span><span>/*数据库连接文件，这个只需连接即可*/</span><span>include_once</span>(<span>'../connect/connect.php'</span>);
<span>$page</span>=intval(<span>$_POST</span>[<span>'pageNum'</span>]);
<span>$result</span>=mysql_query(<span>"select id from news"</span>);
<span>$total</span>=mysql_num_rows(<span>$result</span>);<span>//总记录数</span><span>$pageSize</span>=<span>6</span>;<span>//每页显示数</span><span>$totalPage</span>=ceil(<span>$total</span>/<span>$pageSize</span>);<span>//总页数</span><span>$startPage</span>=<span>$page</span>*<span>$pageSize</span>;
<span>$arr</span>[<span>'total'</span>]=<span>$total</span>;
<span>$arr</span>[<span>'pageSize'</span>]=<span>$pageSize</span>;
<span>$arr</span>[<span>'totalPage'</span>]=<span>$totalPage</span>;
<span>$query</span>=mysql_query(<span>"select id,title,content,date from news order by id desc limit $startPage,$pageSize"</span>);
<span>while</span>(<span>$row</span>=mysql_fetch_array(<span>$query</span>)){
<span>$arr</span>[<span>'list'</span>][]=<span>array</span>(
<span>'id'</span>=><span>$row</span>[<span>'id'</span>],
<span>'title'</span>=><span>$row</span>[<span>'title'</span>],
<span>'content'</span>=><span>$row</span>[<span>'content'</span>],
<span>'date'</span>=>date(<span>"Y-m-d"</span>,<span>$row</span>[<span>'date'</span>])
);
}
echojson_encode(<span>$arr</span>);
<span>?></span></span></code><code>news_manager.php </code>
Be careful to include it in the js file.
<code>...
<divid>"list"<span><span>class</span>="<span>list</span>">
ul</span>><span>ul</span>>
<span>div</span>>
divid="<span>pagecount</span>"><span>div</span>>
...</divid></code>Copyright statement: This article is an [original] article by the blogger. It may be reproduced without the permission of the blogger. Please indicate the source of the blog: [http://blog.csdn.net/FreeApe]
The above introduces the paging implementation of php---mysql+ajax unordered list (ul li), including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
