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实现frame之间互通的方法
Jun 26 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
情人节之礼 js项链效果
2012/02/13 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
Node.js Streams文件读写操作详解
2016/07/04 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python随机取list中的元素方法
2018/04/08 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python 如何停止一个死循环的线程
2020/11/24 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
2014年中秋寄语
2014/08/11 职场文书
公司开会通知
2015/04/20 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
uniapp开发小程序的经验总结
2021/04/08 Javascript
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers