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点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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
博士208HAF收音机实习报告
2021/03/02 无线电
php获取某个目录大小的代码
2008/09/10 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
JS高级笔记
2011/07/13 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
python轻松查到删除自己的微信好友
2016/01/10 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
体育节口号
2014/06/19 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python