jquery 分页

Posted roak

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 分页相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单实用且功能齐全的jQuery分页插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link href="dist/pagination.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        ul, li{
            list-style: none;
        }
        #wrapper{
            width: 900px;
            margin: 20px auto;
        }
        .data-container{
            margin-top: 5px;
        }
        .data-container ul{
            padding: 0;
            margin: 0;
        }
        .data-container li{
            margin-bottom: 5px;
            padding: 5px 10px;
            background: #66677c;
            color: #fff;
        }
    </style>
</head>
<body>
    <article class="htmleaf-container">
        <header class="htmleaf-header">
            <h1>简单实用且功能齐全的jQuery分页插件 <span>A jQuery plugin to provide simple yet fully customisable pagination</span></h1>
            <div class="htmleaf-links">
                <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
                <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201511202805.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
            </div>
        </header>
        <div id="wrapper">
            <section>
                <div class="data-container"></div>
                <div id="pagination-demo1"></div>
            </section>
        </div>
    </article>
    
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="dist/pagination.js"></script>
    <script>
        $(function(){

            function createDemo(name){
                var container = $(‘#pagination-‘ + name);
                var sources = function(){
                    var result = [];

                    for(var i = 1; i < 196; i++){
                        result.push(i);
                    }

                    return result;
                }();

                var options = {
                    dataSource: sources,
                    className: ‘paginationjs-theme-blue‘,
                    callback: function(response, pagination){
                        window.console && console.log(response, pagination);

                        var dataHtml = ‘<ul>‘;

                        $.each(response, function(index, item){
                            dataHtml += ‘<li>‘+ item +‘</li>‘;
                        });

                        dataHtml += ‘</ul>‘;

                        container.prev().html(dataHtml);
                    }
                };

                //$.pagination(container, options);

                container.addHook(‘beforeInit‘, function(){
                    window.console && console.log(‘beforeInit...‘);
                });
                container.pagination(options);

                container.addHook(‘beforePageOnClick‘, function(){
                    window.console && console.log(‘beforePageOnClick...‘);
                    //return false
                });

                return container;
            }

            createDemo(‘demo1‘);

        });
    </script>
</body>
</html>

 

  <!doctype html>
  <html lang="zh">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单实用且功能齐全的jQuery分页插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
  <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="css/default.css">
  <link href="dist/pagination.css" rel="stylesheet" type="text/css">
  <style type="text/css">
  ul, li{
  list-style: none;
  }
  #wrapper{
  width: 900px;
  margin: 20px auto;
  }
  .data-container{
  margin-top: 5px;
  }
  .data-container ul{
  padding: 0;
  margin: 0;
  }
  .data-container li{
  margin-bottom: 5px;
  padding: 5px 10px;
  background: #66677c;
  color: #fff;
  }
  </style>
  </head>
  <body>
  <article class="htmleaf-container">
  <header class="htmleaf-header">
  <h1>简单实用且功能齐全的jQuery分页插件 <span>A jQuery plugin to provide simple yet fully customisable pagination</span></h1>
  <div class="htmleaf-links">
  <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
  <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201511202805.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
  </div>
  </header>
  <div id="wrapper">
  <section>
  <div class="data-container"></div>
  <div id="pagination-demo1"></div>
  </section>
  </div>
  </article>
   
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="dist/pagination.js"></script>
  <script>
  $(function(){
   
  function createDemo(name){
  var container = $(‘#pagination-‘ + name);
  var sources = function(){
  var result = [];
   
  for(var i = 1; i < 196; i++){
  result.push(i);
  }
   
  return result;
  }();
   
  var options = {
  dataSource: sources,
  className: ‘paginationjs-theme-blue‘,
  callback: function(response, pagination){
  window.console && console.log(response, pagination);
   
  var dataHtml = ‘<ul>‘;
   
  $.each(response, function(index, item){
  dataHtml += ‘<li>‘+ item +‘</li>‘;
  });
   
  dataHtml += ‘</ul>‘;
   
  container.prev().html(dataHtml);
  }
  };
   
  //$.pagination(container, options);
   
  container.addHook(‘beforeInit‘, function(){
  window.console && console.log(‘beforeInit...‘);
  });
  container.pagination(options);
   
  container.addHook(‘beforePageOnClick‘, function(){
  window.console && console.log(‘beforePageOnClick...‘);
  //return false
  });
   
  return container;
  }
   
  createDemo(‘demo1‘);
   
  });
  </script>
  </body>
  </html>

以上是关于jquery 分页的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

片段被视图分页器布局切割

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）