jPage.js插件使用文档

这一款插件主要是为了bootstrap原生的分页功能效果不理想而诞生的一款插件。

jPage.js代码更新地址为：https://github.com/leslieSie/font-end-tools/tree/master/jquery/bootstrapCss/jPage

*. 插件支持的配置

pageNo:这个参数主要是用来指定当前的页码的，传入的类型为number
count:这个参数是标识总的数据条数，传入的类型为number
pageSize:这个参数是指定每页要渲染的数据条数，这个与count参数配合可以最终确定页数，传入类型为number
color:这个为主题颜色，目前只支持默认的浅蓝色主题，所以现在的无需传参
btnName:这个参数是用来改变确认按钮的文本的，默认的文本是“确定”
skipPart:配置是否支持分页插件的拓展部分，默认值为true
showNum:这个参数主要是用来设定默认分页插件的显示页码数的，默认值为6，传入的类型为number

*. 插件的依赖
这一款插件是依赖于bootstrap、Jquery来实现的，所以在引入插件的同时必须保证bootstrap和jquery已经引入

*. 一个简单的使用案例

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

    <div id="test"></div>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

    <script type="text/javascript" src="jPage.js"></script>

    <script type="text/javascript">

        $("#test").page({count:70,pageSize:3,skipPart:true});

    </script>

</body>

</html>

这样就生成了一个总计24页，每页有3条数据的分页组件

*. 插件与ajax的交互
这款插件目前没有在内部实现ajax的交互方式，但是我们可以通过在外添加事件绑定来实现这个需求
例如：要为确定按钮添加一个ajax事件我们可以这样做

$(document).on('click','#test .pagination_search',function(){

        if($(document).find("#test .pagination_change_page").val()==""){

            alert("跳转页码不能为空");

        }else{

            var num=parseInt($(document).find("#test .pagination_change_page").val());

            $("#test").page({count:12,pageNo:num,pageSize:3,skipPart:true});

        }

    });

    $(document).on("click","#test .pagination li",function(){

        var num=$(this).attr("num");

        if($(this).attr("class")=="disabled"){

            return false;

        }

        if(num==0 || num==(count+1)){

        }else{

            $("#test").page({count:12,pageNo:num,pageSize:3,skipPart:true});

        }

    });

这样我们就实现了ajax交互的功能

以下为jPage-1.2.js版本的详细代码:

(function($){
  $.fn.page=function(options){
  var defaultOptions={
  pageNo:1, //当前页码，用于点亮对应的页码
  pageSize:10, //每页渲染的最大页码数
  count:0, //
  showNum:6, //初始化的显示页码，默认的是显示到6页
  color:'orange',
  btnName:'确定', //按钮名称
  skipPart:true, //跳转模块是否添加
  fontSize:16,
  // statisMsgPart:false, //静态信息显示，默认为不显示
  }
  var that=this;
  var settings=$.extend({},defaultOptions,options);
  var pageCount=0;
  $(this).empty();
  //主函数
  var main=function(){
  var val=ValidatePageCount();
  if(val==false){
  return false;
  }
  var pageNo=parseInt(settings.pageNo);
  var pageSize=parseInt(settings.pageSize);
  var count=parseInt(settings.count);
  if(count%pageSize==0){
  pageCount=count/pageSize;
  }else{
  pageCount=parseInt(count/pageSize)+1;
  }
  var showNum=parseInt(settings.showNum);
  var pageJson=PageAlgorithm(pageNo,pageSize,pageCount,showNum);
  PageDraw(pageJson);
  $(that).off();
  };
  main();
   
  //按键触发
  // $(document).on('click','.pagination li',function(e){
  // //alert(2);
  // var num=$(this).attr("num");
  // console.log("NUM:"+num);
  // if($(this).attr("class")=="disabled"){
  // return false;
  // }
  // if(num==0 || num==(settings.count+1)){
   
  // }else{
  // var json=PageAlgorithm(parseInt(num),settings.pageSize,pageCount,settings.showNum);
  // //console.log(json);
  // PageDraw(json);
  // $(".pagination li").off("click");
  // }
  // });
   
  // $(document).on('click','.pagination_search',function(){
  // //alert(3);
  // //输入为空不做处理
  // if($(that).find(".pagination_change_page").val()==""){
  // alert("跳转页码不能为空");
  // }else{
  // var num=parseInt($(that).find(".pagination_change_page").val());
  // var json=PageAlgorithm(parseInt(num),settings.pageSize,pageCount,settings.showNum);
  // PageDraw(json);
  // }
  // });
   
  //验证传入数据是否符合渲染规则
  function ValidatePageCount(){
  if(settings.pagNo<0 || settings.pageSize<0 || settings.count<0){
  console.error("请检查 pagNo,pageSize,count这个三个参数是否存在非法输入");
  return false;
  }
  //如果showNum为为非法数值，那么设置为默认值
  if(settings.showNum<0){
  setting.showNum=6;
  }
   
  }
   
  //分页渲染
  function PageDraw(json){
  if(parseInt(settings.count)>0){
  var html='<ul class="pagination">';
  for(var i in json.algorithm){
  if(json.algorithm[i].status=="disabled"){
  html+='<li class="'+json.algorithm[i].status+'" num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>';
  }
  else if(json.algorithm[i].status=="active"){
  html+='<li class="'+json.algorithm[i].status+'" num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>';
   
  }else if(json.algorithm[i].num=="more"){
  html+='<li class="disabled" num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>';
  }else{
  html+='<li num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>';
  }
  }
  $(that).html(html);
  if(settings.skipPart==true){
  $(that).find(".pagination").append('<span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:18px;font-size:'+settings.fontSize+'px">共有'+pageCount+'页/'+settings.count+'个</span><div style="display:inline-block" name="changePage"><span class="text-muted" style="margin:5px;margin-left:0px;display:inline-block;font-size:'+settings.fontSize+'px">,到第</span> <input type="number" min="1" max="'+pageCount+'"class="pagination_change_page" style="width:45px;border-color:#ddd"> <span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:font-size:'+settings.fontSize+'px">页</span> <button class="btn btn-default btn-sm pagination_search">'+settings.btnName+'</button></div>');
  }
  }else{
   
  }
   
  }
   
  //分页算法逻辑，主要对分页进行逻辑运算，不做渲染，返回值为JSON
  function PageAlgorithm(pageNo,pageSize,count,showNum){
  var data="";
  if(pageNo==1){
  data='{"algorithm":[{"text":"上一页","num":0,"status":"disabled"}';
  }else{
  data='{"algorithm":[{"text":"上一页","num":"'+(pageNo-1)+'","status":"abled"}';
  }
  //判断分页类型
  if(count>showNum){
  if(pageNo<=showNum+2){
  //判断pageNo是否在要初始化显示的页码内
  if(pageNo<=showNum){
  for(var i=1;i<=showNum;i++){
  if(pageNo==i){
  data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
   
  }else{
  data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
  }
  }
  if(pageNo==showNum){
  data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
  }
  }else{
  for(var i=1;i<=pageNo;i++){
   
  if(i==pageNo){
  data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
  }else{
  data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
  }
  }
  if(pageNo!=count){
  data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
  }
  }
  //选中最后一页时，将省略号隐藏
  if(pageNo!=count){
  if(pageNo!=(count-1)){
  data+=',{"text":"…","num":"more","status":""}';
  }
   
  }
   
  }else if(pageNo>count-showNum){
  data+=',{"text":"1","num":"1","status":"abled"}';
  data+=',{"text":"2","num":"2","status":"abled"}';
  data+=',{"text":"…","num":"more","status":"disabled"}';
  for(var i=count-showNum+1;i<=count;i++){
  if(pageNo==i){
  data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
  }else{
  data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
  }
  }
  }
  else{
  data+=',{"text":"1","num":"1","status":"abled"}';
  data+=',{"text":"2","num":"2","status":"abled"}';
  data+=',{"text":"…","num":"more","status":"disabled"}';
  for(var i=pageNo-2;i<=pageNo+2;i++){
  if(i==pageNo){
  data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
  }else{
  data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
  }
  }
  data+=',{"text":"…","num":"more","status":"disabled"}';
  }
  }else{
  for(var i=1;i<=count;i++){
  if(pageNo==i){
  data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
  }else{
  data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
  }
   
  }
   
  }
  if(pageNo==count){
  data+=',{"text":"下一页","num":"'+(pageNo+1)+'","status":"disabled"}]}';
  }else{
  data+=',{"text":"下一页","num":"'+(pageNo+1)+'","status":"abled"}]}';
  }
  var json_return = JSON.parse(data);
  return json_return;
   
  }
  }
  })(jQuery);

jPage.js分页的更多相关文章

  1. js分页小结

     今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...

  2. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  3. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  4. 一个重构的js分页类

    // JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...

  5. 面向对象版js分页

    基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...

  6. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  7. JS分页 + 获取MVC地址栏URL路径的最后参数

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  8. 浅谈js分页的几种方法

    一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...

  9. JS分页条插件

    目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...

随机推荐

  1. 首先给大家介绍一下数据库project师，数据库project师(Database Engineer)，是从事管理和维护数据库管理系统(DBMS)

    摘要 MySQL的最初的核心思想,主要是开源.简便易用.其开发可追溯至1985年,而第一个内部发行版本号诞生,已经是1995年. 到1998年,MySQL已经能够支持10中操作系统了.当中就包含win ...

  2. linux/unix核心设计思想

    1) 程序应该小而专一,程序应该尽量的小,且仅仅专注于一件事上.不要开发那些看起来实用可是90%的情况都用不到的特性: 2) 程序不仅仅要考虑性能, 程序的可移植性更重要,shell和perl.pyt ...

  3. NSDate 问题

    类型 比特数 有效数字 数值范围 float 32 6-7 -3.4*10(-38)-3.4*10(38) double 64 15-16 -1.7*10(-308)-1.7*10(308) long ...

  4. java之方法的重写

    方法的重写: 1.在子类中可以根据需要对从基类中继承来的方法进行重写. 2.重写的方法和被重写的方法必须具有相同方法名称.参数列表和返回类型. 3.重写方法不能使用比被重写的方法更严格的访问权限. 程 ...

  5. 用尽洪荒之力整理的Mysql数据库32条军规（转）

    今天上午吐血整理了Oracle SQL性能优化的40条军规,其中很多规则也是适用于Mysql的,结果今晚发现这一篇文章——用尽洪荒之力整理的Mysql数据库32条军规,和我的竟有异曲同工之妙,当然不同 ...

  6. Quartz.Net线程处理用到的两个Attribute

    1.DisallowConcurrentExecution 加到IJob实现类上,主要防止相同JobDetail并发执行. 简单来说,现在有一个实现了IJob接口的CallJob,触发器设置的时间是每 ...

  7. ucosii任务切换OS_TASK_SW()

    stm32F103中任务切换定义 //任务切换宏,由汇编实现. #define OS_TASK_SW() OSCtxSw() os_cpu_a.asm中任务切换函数的定义 NVIC_INT_CTRL ...

  8. doT js模板入门 2

    doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...

  9. core image几个滤镜样例 oc版本号和swift版本号

    oc版本号 //万花筒模式 + (CGImageRef) getKaleidoscope:(CIContext *)context { CIImage * image = [CIImage image ...

  10. Eclipse没有 web Project 选项的解决办法

    装下插件即可.步骤如下: 选择 Help >Software Updates >Find and Install.这个选项会让您可以下载和安装 Web 工具,且无需转到 Web 站点. 选 ...