关于借助prototype进行分页的一个小插件

(function (win, undefined) {
  var pagefen = win.pagefen = function (inforAllcount) {
  this.nowpage = 1; //当前页
  this.pagecount = 10; //一次性加载十条
  //总共有多少页
  this.pageAllcount = (inforAllcount % this.pagecount == 0 ? (inforAllcount / this.pagecount) : (parseInt(inforAllcount / this.pagecount) + 1));

};
//上一页的方法 (当前页,每页显示的条数)
pagefen.prototype.uppage = function (nowpage, pagecount) {
  this.nowpage -= 1;
  this.nowpage = (this.nowpage == 0 ? 1 : this.nowpage)
  pagecontrol.seach(this.nowpage, this.pagecount);
}
//下一页的方法
pagefen.prototype.nextpage = function (nowpage, pagecount) {
  this.nowpage += 1;
  this.nowpage = (this.nowpage == (this.pageAllcount + 1) ? this.pageAllcount : this.nowpage);
  pagecontrol.seach(this.nowpage, this.pagecount);
  }
} (window));

//查询方法
var pagecontrol = {
  seach: function (nowpage, pagecount) {
  var pagefirst = (nowpage - 1) * pagecount + 1; //1条数据
  var pageend = nowpage * pagecount; //10条数据
  $(‘.addlistul li‘).hide();
  $(‘.addlistul li‘).slice(pagefirst - 1, pageend).show();
  }
};

$(function(){

  //此处是获取数据 添加进去ul里面的地方
  var ele = $(‘.addlistul‘);
  for (var i = 0; i < 100; i++) {
    ele.append("<li>" + (i + 1) + "</li>");
  }

  //实例化分页
  var pageMethod = new pagefen(100);
    pagecontrol.seach(1, 10);
  //上一页修改当前页加一
  $(‘.have_small‘).click(function () {
    pageMethod.uppage(this.nowpage, this.pagecount);
  });
  //下一页修改当前页减一
  $(‘.next_page‘).click(function () {
    pageMethod.nextpage(this.nowpage, this.pagecount);
  });

  //点击数字显示第几页的时候
  $(‘.num‘).click(function () {
    var getnumpage = parseInt($(this).text());

    //当前选中的页数然后调用查询方法

    pagecontrol.seach(getnumpage, 10);
    pageMethod.nowpage = getnumpage;
  });

});

<div class="r-h-3">
  <ul class="addlistul"></ul>
</div>

时间: 2024-10-05 23:32:21

关于借助prototype进行分页的一个小插件的相关文章

自动切换输入焦点的一个小&quot;插件&quot;

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> form{ margin-bottom:10px; } form#inputs>input,form#inputs2>input,form#inputs3>input{ width:40px; height:40px; border-right-co

Eclipse中的一个小插件easyExplorer--用于打开文件所在目录

最近格式化了硬盘,里面的诸多有价值的插件都没了,开发时需要打开java文件所在的目录,每次都很麻烦,实在无法忍受,就又重新下载了一个小插件,用以很方便的打开文件所在目录: easyExplorer 仅有7kb 一:官方下载地址: http://sourceforge.net/projects/easystruts/ 由于天朝网络问题,等个大概十来秒的时间出现下图: 二:配置方式: 直接将下载后的文件:org.sf.easyexplore_1.0.4.jar复制到eclipse下的plugins下

浏览器首页设置(当被小插件占用时)

之前打开浏览器的时候都显示自己设置的首页,突然有一天显示的不是我设置的百度首页了,原来是金山的一个小插件,到设置里面设置了好几次都不行. 问题在这里: 右键浏览器(chrome为例)---> 属性 ---> 快捷方式  目标 ---> 删除掉其中不认识的网址 (如果其中出现了莫名奇妙的网址) 如果修改不了  再看下面:右键浏览器(chrome为例) ---> 常规 ----> 只读的复选框去掉

仿javascript中confirm()方法的小插件

10天没有写博客了,不知道为什么,心里感觉挺不舒服的,可能这是自己给自己规定要去完成的事情,没有按照计划执行,总会心里不怎么舒服.最近事情挺多的,终于今天抽空来更新一下博客了. 今天写的是一个小插件.平时我们习惯于使用javascript中自带的confirm()函数做出一个弹窗的效果,但是问题在于这样的弹窗非常不美观,大大降低了网页的整体效果. 好吧废话不多说,首先先来了解一下confirm()函数,下面应该注释得很清楚了. if(confirm("我们去阿里转山吧,好吗?")){/

NppFTP小插件的使用

大家在Linux系统中配置运行环境时,一定会遇到相关配置文件的修改,虽说在Linux系统中可以使用vi,vim的命令进行文本编辑,但是操作起来还是没有在Windows系统中用的爽,特别是操作大文本量的文件时.Notepad++里提供了一个小插件,可以方便的对Linux里的文件进行文档编辑. 一.插件的下载与安装 如果大家下载的Notepad++里没有NppFTP插件的话(图一),可以点击下面的连接根据自己的位数选择下载.下载完成后将解压包里的.dll文件拽到Notepad++文件夹里的plugi

使用clean-webpack-plugin小插件报错CleanWebpackPlugin is not a constructor

clean-webpack-plugin是webpack的一个小插件: 由于每次打包的时候有可能文件名称不一样,打包后的文件就叠加到dist目录下了. 所以cleanWebPackPlugin作用就是在每次打包之前,先把dist目录删掉,创建最新的目录,避免一些不必要的文件还留在dist目录下 安装:npm install clean-webpack-plugin -D 正确的使用方法如下: //引入clean-webpack-plugin的包 const { CleanWebpackPlugi

vue五星评分小插件

原文地址:https://blog.phyer.cn/article/6884.新人博主,欢迎大家访问(●'?'●) 最近做毕设,一个电商网站,类似某宝某东.在学一些新的东西,#[Sass](https://github.com/sass/sass)和#[Vue](https://github.com/vuejs/vue)(对我来说是新的![stk-img](ka/8)). 五星评分插件 做电商网站要用到评分功能,于是自己写了一个小插件`vue_star.js`. 测试html: <!DOCTY

先做一个“小程序”——关于微信应用号的六大猜想

先做一个“小程序”——关于微信应用号的六大猜想 9月 21 日,苦等了9个多月的时间,应用号终于与我们见面了,命名为「小程序」. 01 为什么推出小程序? 考虑到小程序对整个APP市场的影响,毫无疑问会对现有的APP生态带来一定的冲击.但是,之所以推出小程序,最直接的原因可能是为了构建和扩充微信生态链,让微信更具开放性. 如我们所知,目前微信公众号分为三类: • 服务号,连接人和商品,目前很多电商企业,以及在微信端提供产品和服务的企业都用服务号. • 订阅号,微信官方的定位是阅读,连接人和资讯的

ACCESS(VBA)上的一个小项目 —— 2、读取ACCESS表数据到TreeView和ListView

有人问我能不能做一个程序的时候,我第一反应都说“能”. --这次在ACCESS中,借助TreeView和ListView做了一个数据联动的模型. 简析过程: 1)从网上找了一份TreeView学习教程<三小时学会树控件>,了解了TreeView的建立以及节点的使用方法: 2)把数据表中的某列按一定规则生成的数据再按一种规则解析成TreeView中的树结构(VPPS): 3)通过遍历TreeView中节点的折叠状态,通过上述一定规则生成的数据(唯一性)把数据表中的内容读取到ListView中: