dedecms 自定義表單前台JQUERY分頁詳解

昨天一個活需要用到自定義表單分頁，由于php還不是很精通，是以就從網上找了幾個JQUERY的代碼進行分頁，首先做一個jquery庫跟css引入

<link rel="stylesheet" href="../lib/jquery_pagination/pagination.css" target="_blank" rel="external nofollow" >
<script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery_pagination/jquery.pagination.js"></script>
           

通過這個js我們可以得到一個members數組，裡邊包含了查詢到的資料

然後再用一個JS将資料分頁顯示：

<script type="text/javascript">
function pageselectCallback(page_index, jq){
                // Get number of elements per pagionation page from form
                var items_per_page = $('#items_per_page').val();//設定每頁顯示數量，這裡是獲得id為items_per_page的數值
                var max_elem = Math.min((page_index+1) * items_per_page, members.length);//獲得分頁需顯示的總數量
                var newcontent = '';//初始化定義資料

                // Iterate through a selection of the content and build an HTML string
                for(var i=page_index*items_per_page;i<max_elem;i++)
                {
                newcontent += ' <div class="jieshao1"><div class="jieshao-2">' + members[i][0] + '</div><div class="jieshao-1">';
                newcontent += '<div class="jieshao-1-1-1"><div class="ren"><img src="../../../templets/img/renwu_07.png" /></div><div class="wenzi"><a href="#" target="_blank" rel="external nofollow" >' + members[i][1] + '</a></div>';
                newcontent += ' </div><div class="jieshao-1-1-2">Category :<span>' + members[i][2] + '</span> </div>';
newcontent += '<div class="jieshao-1-1-5">E-mail : <a href="mailto:' + members[i][3] + '" target="_blank" rel="external nofollow" >' + members[i][3] + '</a> </div>';
newcontent += '<div class="jieshao1-1-3" >' + members[i][5] + '</div>';
newcontent += '<div class="xiaologo"><' + members[i][4] + '></div></div></div>';
                }

               $('#Searchresult').html(newcontent);

               return false;
            }


function getOptionsFromForm(){
                var opt = {callback: pageselectCallback};

                $("input:text").each(function(){
                    opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) : this.value;
                });

                var htmlspecialchars ={ "&":"&", "<":"<", ">":">", '"':"""}
                $.each(htmlspecialchars, function(k,v){
                    opt.prev_text = opt.prev_text.replace(k,v);
                    opt.next_text = opt.next_text.replace(k,v);
                })
                return opt;
            }

            $(document).ready(function(){
                var optInit = getOptionsFromForm();
                $("#Pagination").pagination(members.length, optInit);

$("#setoptions").click(function(){
                    var opt = getOptionsFromForm();

                    $("#Pagination").pagination(members.length, opt);
                }); 

            });

        </script>


<div id="Searchresult">
{dede:sql sql="select * from dede_table"}
<!--這裡擷取并顯示第一頁的資料-->
{/dede:sql}
</div>
<div
id="Pagination"><!--頁碼-->  </div>
       <!--下面是表單，可以設定分頁的相關屬性，我們設定為隐藏，一般用不上> 
   <div style="display:none">
  <form name="paginationoptions">
<p><label for="items_per_page">每頁顯示數量</label><input type="text" value="4" name="items_per_page" id="items_per_page" class="numeric"/></p>
<p><label for="num_display_entries">Number of pagination links shown</label><input type="text" value="10" name="num_display_entries" id="num_display_entries" class="numeric"/></p>
<p><label for="num">Number of start and end points</label><input type="text" value="2" name="num_edge_entries" id="num_edge_entries" class="numeric"/></p>
<p><label for="prev_text">"Previous" label</label><input type="text" value="Previous Post" name="prev_text" id="prev_text"/></p>
<p><label for="next_text">"Next" label</label><input type="text" value="Next Post" name="next_text" id="next_text"/></p>
<input type="button" id="setoptions" value="Set options" />
</form>
</div>
           

這樣，一個分頁的模闆就調試好了，完全按照官方的例子改的，有不足之處，歡迎高手指點，趕快開始你的dede jquery分頁旅程吧！