npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

jq-paging

v0.1.12

Published

jq 分页组件

Downloads

5

Readme

jq-paging

pagination for jQuery 分页组件

使用

  • 使用时,应指定在何处插入分页,即传入root对应的选择器,配置项如下:
      /**
       * 当前页
       * */
      currentPage:1,
      /**
       * 每页展示条目数量
       * */
      pageSize:5,
      /**
       * 总条目数量
       * */
      total:20,
      /**
       * 分页标签显示个数
       * */
      showNum: 5,
      /**
       * 插入分页的元素标记
       * */
      root:'#pages',
      /**
       * 是否显示提示,默认显示
       * */
          showTip: true,
      /**
       * tip是否显示在左边,true为左false为右,默认为true
       * */
          leftTip: true,
      /**
       * 点击回调事件
       * 返回参数为要显示的页数
       * */
      clickCallBack: function(num){
  
      },
      /**
       * 动态改变配置项参数
       * */
      setOpts:function(opts){}
      

使用实例: js:


   import { Paging } from '../../src/index.js';
   (()=>{
      new Paging({
         pageSize:5,
         total:203,
         showNum:9,
         root:'#pages',
         clickCallBack:function(num){
            console.log('第'+num+'页');
         }
      });
   })();
   //实例化后更改配置项
   let a = Paging({
         pageSize:5,
         total:192,
         showNum:5,
         showTip:true,
         leftTip:false,
         clickCallBack:function(num){
            location.hash = num;
            console.log('第'+num+'页');
         }
      });
     a.setOpts({
       pageSize:6,
       total:40,
       showNum:5,
       clickCallBack:function(num){
           console.log('第'+num+'页2');
       }
     });  
     

html:


   <div id="root" style="padding: 10px">
       <div id="pages" class="jq-pages"></div>
   </div>
   
  • 注:若要兼容ie8及以下版本请引入es5-shim。
    在html中判断版本,ie9以下引入。例如:
   <!--[if lt IE 9] >
   <script src="http://cdn.bootcss.com/es5-shim/4.5.9/es5-shim.js"></script>
   <!--[endif]-->

update

  • 0.1.11 修复临界值bug
  • 0.1.10 更新setOpts之后分页的bug
  • 之前版本 init及修复

Command

	#测试	
	npm run test	
	#打包	
	npm run build	
	#例子演示	
	npm run demo