jquery.pagination.js分页插件的使用

1、引用jquery.pagination.js

<script src="${ctx}/themes/b2b2cv2/doctor/js/message/jquery.pagination.js"></script>

2、发送2次ajax请求,第一次需传入首页和页大小,返回数据得到所有数据的长度;

  第二次发送请求传入点击的页码号和页的大小,返回数据得到点击页的数据

  参考链接:

    1、https://blog.csdn.net/baidu_25343343/article/details/70478467

    2、https://blog.csdn.net/Fanbin168/article/details/49847931

  代码如下:

  var pageSize = 2;                //声明页大小的变量

var dataCount, pageCount;

$.ajax({

url: url,

type: ‘POST‘,

data: {

pageSize: pageSize,    //第一次ajax请求需传的参数

pageNumber: 1

},

dataType: ‘json‘,

cache: false,

success: function(datas) {

console.log(datas.data.list);

if(datas.result == 1) {

var html = template(‘tpl‘, {

list: datas.data.list,

});

$(className).html(html);

}

dataCount = datas.data.count;  //返回的数据获得数据库中所有数据的数量,

pageCount = Math.ceil(dataCount / pageSize);//算出总页数

$(‘.M-box‘).pagination({

pageCount: pageCount,  //总页数

coping: true,

homePage: ‘首页‘,

endPage: ‘末页‘,

prevContent: ‘<< 上一页‘,

nextContent: ‘下一页 >>‘,

callback: function(api) {

console.log(api.getCurrent())

var currentPage = api.getCurrent();  //获取当前点击的页码

$.ajax({

url: url,

type: ‘POST‘,

data: {

pageSize: pageSize,   //第二次请求需传入的参数(页码的长度及当前点击的页码)

pageNumber: currentPage

},

dataType: ‘json‘,

cache: false,

success: function(datas) {

console.log(datas);

if(datas.result == 1) {

var html = template(‘tpl‘, {

list: datas.data.list

});

$(className).html(html);

}

},

error: function() {

alert("请求接口失败。")

}

})

}

});

},

error: function() {

alert("请求失败!!!")

}

})

原文地址:https://www.cnblogs.com/Front-EndWebdevelopment/p/9183191.html

时间: 2024-10-10 08:15:39

jquery.pagination.js分页插件的使用的相关文章

浅谈jQuery Pagination Ajax 分页插件的使用

插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件使用 此插件使用比较简单.主要引入以下文件就可以用了 1.jquery.js依赖库 2.pagination.css 这个主要是样式,我们在元素使用的时候将分页列表放在class类为pagination的标签内即可 <div class='pagination'></div> 3.jq

jquery.pagination.js分页

参数说明 参数名 描述 参数值 maxentries 总条目数                           必选参数,整数 items_per_page 每页显示的条目数                       可选参数,默认是10 num_display_entries 连续分页主体部分显示的分页条目数                       可选参数,默认是10 current_page 当前选中的页面                      可选参数,默认是0,表示第1页

Jquery.Page.js 分页插件的使用

1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" /> <script src="~/Scripts/jQuery-1.8.3.js"></script> <script src="~/Scripts/Page/jquery.pager.js"></script>

jquery pagination.js 分页

js代码: var pageIndex = 0;     //页面索引初始值              var pageSize = 10;     //每页显示条数初始化,修改显示条数,修改这里即可              var where="";          //查询条件            var searchwhere="";    //查询条件                        function PageSet(data){    

jQuery Pagination Ajax分页插件

下载地址:https://github.com/gbirke/jquery_pagination 参数 参数名 描述 参数值 maxentries 总条目数 必选参数,整数 items_per_page 每页显示的条目数 可选参数,默认是10 num_display_entries 连续分页主体部分显示的分页条目数 可选参数,默认是10 current_page 当前选中的页面 可选参数,默认是0,表示第1页 num_edge_entries 两侧显示的首尾分页的条目数 可选参数,默认是0 li

ajax分页实现,jquery.pagination.js

1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代码 1 /** 2 * This jQuery plugin displays pagination links inside the selected elements. 3 * 4 * @author Gabriel Birke (birke *at* d-scribe *dot* de) 5

jQuery 分页插件(jQuery.pagination.js)ajax 实现分页

首先需要引入jQuery 再次需要引入 <script src="jquery/jquery.pagination.js"></script> 同时也要引入 <link rel="stylesheet" href="css/pagination.css"> 引入之后,分页基本样子 下面看分页配置参数 var defaults = { totalData: 0, //数据总条数 showData: 0, //每页

无刷新分页 jquery.pagination.js

1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),