JS实现分页功能

下面是一段SQL查询代码，将符合条件的数据都调用出来。要显示的数据很多，都在同一页面显示导致页面相应时间过长，我想加个分页功能，每页显示100条。用JS可以实现吗？
我用的是MYSQL数据库，用的是DEDECMS系统，程序是PHP程序，当前页是静态页面。              <div class="BJFuJinMain">
                 <ul>
{dede:sql sql="SELECT a.id,p.aid,a.title,p.dfjiudianxingji,p.dfxianfujiayi FROM dede_addonshop p left join dede_archives a on a.id = p.aid WHERE p.dfshangyequ =522 and p.typeid < 622 and p.typeid > 603 and a.flag like '%c%' order by a.id desc LIMIT 0 , 6"}                      <li><span class="HotelName"><a href="http://www.123.com.cn/html/hotel/zhixiashi/beijing/2010/0619/[field:aid/].html" title="[field:title/]">[field:title/]</a></span><span class="HotelXingJi"><img src="http://www.123.com.cn/templets/default/images/bj[field:dfjiudianxingji /].jpg" /></span><span class="HotelJiaGe">￥[field:dfxianfujiayi /]</span></li>
{/dede:sql}
                    </ul>
                </div>

解决方案 »

  1.   


    我可以用JS控制 <li></li>显示的条目吗？
      

  2.   

    分页逻辑最好不要写在JS端，而应该写在PHP端，
    另外全部取出列表再分页是很不好的设计，要把指定的页数据返回给客户端就好了。
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        var PAGE_SIZE = 3;
        var currentPage = 1;
        
        function priviousPage() {
            var tBody = document.getElementById('container');
            var startIndex = (currentPage - 1) * PAGE_SIZE;
            for (var index = startIndex; index < startIndex + PAGE_SIZE; index++) {            if (!tBody.childNodes[index]) {
                    continue;
                }
                
                tBody.childNodes[index].style.display = 'none';
            }
            
            currentPage = currentPage == 1 ? 1 : currentPage - 1;
            startIndex = (currentPage - 1) * PAGE_SIZE;
            for (var index = startIndex; index < startIndex + PAGE_SIZE; index++) {
                if (!tBody.childNodes[index]) {
                    continue;
                }
                tBody.childNodes[index].style.display = '';
            }
        }    function nextPage() {
            var tBody = document.getElementById('container');
            
            var pageNum = parseInt((tBody.childNodes.length - 1) / PAGE_SIZE) + 1;        var startIndex = (currentPage - 1) * PAGE_SIZE;
            
            for (var index = startIndex; index < startIndex + PAGE_SIZE; index++) {
                if (!tBody.childNodes[index]) {
                    continue;
                }
                tBody.childNodes[index].style.display = 'none';
            }
            
            currentPage = currentPage >= pageNum ? pageNum : currentPage + 1;
            
            startIndex = (currentPage - 1) * PAGE_SIZE;
            for (var index = startIndex; index < startIndex + PAGE_SIZE; index++) {
                
                if (!tBody.childNodes[index]) {
                    continue;
                }
                
                tBody.childNodes[index].style.display = '';
            }
        }    function initPage() {
            var tBody = document.getElementById('container');
            var startIndex = PAGE_SIZE;        for (var index = PAGE_SIZE; index < tBody.childNodes.length; index++) {
                tBody.childNodes[index].style.display = 'none';
            }
        }    window.onload = function() {
            initPage();
        };
    </script></head>
    <body>
        <input type="button" value="priviousPage" onclick="priviousPage();"></input>
        <input type="button" value="nextPage" onclick="nextPage();"></input>
        <table>
            <tbody id="container">
                <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>2</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>3</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>4</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>5</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>6</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>7</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
                <tr><td>8</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
            </tbody>
        </table>
    </body>
    </html>把记录全部打出来，然后用以上方法设置隐藏