dedecms 自定义表单前台JQUERY分页详解

昨天一个活需要用到自定义表单分页，由于php还不是很精通，所以就从网上找了几个JQUERY的代码进行分页，首先做一个jquery库跟css引入

<link rel="stylesheet" href="../lib/jquery_pagination/pagination.css">
<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="#">' + 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] + '">' + 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 ={ "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;"}
                $.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分页旅程吧！