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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
jQuery 1.0.2
2006/10/11 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
python入门教程之识别验证码
2017/03/04 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
聘任书模板
2014/03/29 职场文书
培训讲师岗位职责
2014/04/13 职场文书
国际会计专业求职信
2014/08/04 职场文书
年检委托书
2014/08/30 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
总结几个非常实用的Python库
2021/06/26 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL