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插件之validation插件
Mar 29 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 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
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
PHP数组实例详解
2016/06/26 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
详解Python核心对象类型字符串
2018/02/11 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python实现PCA降维的示例详解
2020/02/24 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
华为C++笔试题
2014/08/05 面试题
五分钟演讲稿
2014/04/30 职场文书
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers