jquery 分页类简单用法

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Pagination Demo I - Simple pagination</title>
        <link rel="stylesheet" href="pagination.css" />
        <link rel="stylesheet" href="demo.css" />
        <script type="text/javascript" src="lib/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.pagination.js"></script>

       
        <script type="text/javascript">  
        function pageselectCallback(page_index, jq){
            var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
            $('#Searchresult').empty().append(new_content);
            return false;
        }
      
        /**
         * Initialisation function for pagination
         */
        function initPagination() {
            // count entries inside the hidden content
            var num_entries = jQuery('#hiddenresult div.result').length;
            // Create content inside pagination element
            $("#Pagination").pagination(num_entries, {
                callback: pageselectCallback,
                items_per_page:1 // Show only one item per page
            });
         }
       
        // When document is ready, initialize pagination
        $(document).ready(function(){ 
         var new_content = jQuery('#hiddenresult div.result:eq('+0+')').clone();
         $('#Searchresult').empty().append(new_content);   
            initPagination();
        });
        </script>
    </head>
    <body>
        <h1>jQuery Pagination Plugin Demo</h1>
        <div id="Pagination"></div>
        <br style="clear:both;" />
        <div id="Searchresult">
          <script type="">pageselectCallback(1)</script>
        </div>

        <?php $arr = $this->arr ;print_r($arr) ;?>
        <!-- Container element for all the Elements that are to be paginated -->
        <div id="hiddenresult" style="display:none;">
          
           <?php
            $_count = count($arr) ;
            $limit = 23 ;
            
            $items = ceil($_count/$limit) ;
            for($i = 1 ; $i <= $items; $i++) {
             echo "<div class='result'>";
             $start = ($i-1)*$limit ;
             for($j = $start ; $j < $i*$limit ; $j++) {
              if(!empty($arr[$j])) {
               echo $arr[$j] ;
              }
             }
             echo "</div>";
            }
       
            
            
           ?>
          
        </div>

       
        <div id="footer">
            Copyright &copy; 2010 by <a href="http://www.d-scribe.de/">describe europe Ltd.</a>.
        </div>
    </body>
</html>


在使用的时候IE下对浮动元素加上宽度限制或者使用css中的white-space:nowrap;属性


你可能感兴趣的:(jquery,function,XHTML,div,callback,stylesheet)