jQuery插件simplePagination的使用方法示例


Posted in jQuery onApril 28, 2020

本文实例讲述了jQuery插件simplePagination的使用方法。分享给大家供大家参考,具体如下:

正在熟悉项目上的代码,新添加了一个需要,需要对表单进行分页,之前的代码中是有分页的代码的,看了老半天,也没看太明白。之前的项目比较久远,继续熟悉代码。

simplePagination的使用

HTML页面,

<div class="row">
  <div class="col-sm-12 col-sm-12">
      <table class="table table-striped table-hover table-bordered" data-toggle="table" data-url="data2.json" data-pagination="true">
        <thead> 
          <tr>
            <th data-hide="phone" >可用区</th>
            <th data-hide="phone">渠道</th>
            <th data-hide="phone">引用可用区</th>
            <th data-hide="phone">引用渠道</th>
          </tr>
        </thead>
        <tbody id="region_price_list-data">
        
        </tbody>
      </table>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-12">
      <div id="pagination">
      </div>
    </div>
  </div>

因为项目里用到EJS--HTML模板,记得在一开始就引用SimplePagination插件,这个比较简单,就不细说了。

JS代码

var page_count = 0;
// 定义分页的页数
var limit = 0 ;
// 定义分页的条数
var regionLogListFunc = function(pageNumber){
  if(pageNumber=== undefined){
    pageNumber = 1;
  }
  // 页数判断和定义
  $get("/regionCopyList?page_number="+ pageNumber,function(data,status){  
    var #### = jQuery("####-##");
    // 获取Table中 tbody的id值
    var updateRegionlogList = ''
     // for in 遍历 对传入的数据进行显示
    for (var i in data){
      #### +='<tr class= "odd gradeX">';
      ##### +='<td data-hide ="phone">'+data[i].##+'</td>';
      ##### +='<td data-hide ="phone">'+data[i].##'</td>';
      #### +='<td data-hide ="phone">'+data[i].##+'</td>';
      #### +='<td data-hide ="phone">'+data[i].##+'</td>';      
      updateRegionlogList +='</tr>';      
    } 
   regionPriceList.empty();
    //  添加更新的数据
   regionPriceList.append(updateRegionlogList);
  });
  var onPageClick = regionLogListFunc;
  // 获取DOM文档ID
  jQuery("#pagination").pagination({
    item    :<%=z###%>, //ejs模板
    itemsOnPage :<%=#####t%> ,//ejs模板
    cssStyle  :'light-theme',
    onPageClick :onPageClick,
    onInit   :regionLogListFunc,
  });
});

另外一种写法是

var page_index;
var itemsOnPage = 1;
$(function() {
$("#pagination").pagination({
  items: {$page_count}, 总页数
  itemsOnPage: itemsOnPage,
  cssStyle: 'light-theme',
  onInit: changePage,  // 初始化函数
  onPageClick: changePage  //点击时触发函数
  }); 
}); 
function changePage(page_index,event){ 
  listTable.gotoPage(page_index);  //gotoPage函数调用ajax获取数据 填充页面
  document.getElementById('pageCurrent').innerHTML=page_index; 
  return true; 
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jquery检测上传文件大小示例
Apr 26 #jQuery
jquery实现轮播图特效
Apr 12 #jQuery
用jQuery实现抽奖程序
Apr 12 #jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 #jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 #jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 #jQuery
You might like
PHP系统流量分析的程序
2006/10/09 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
JavaScript模块详解
2017/12/18 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
爬虫利器Puppeteer实战
2019/01/09 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
Sql面试题
2013/03/20 面试题
关于责任的演讲稿
2014/05/20 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
服务理念口号
2014/06/11 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
初一语文教学反思
2016/03/03 职场文书
餐厅开业活动方案
2019/07/08 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
html中两种获取标签内的值的方法
2022/06/16 jQuery