jquery+ajax写的分页,如何进行下一页和最后一页页数的限定,求大神

jquery-1.11.3.min.js.
自己写的分页js:pageTable.js

var commonURL = 'http://192.168.1.101:8088/main/cxtest?serviceName=';//公用jsonp请求地址
var serviceName = '';//服务名称--需要预先定义
var tableId;//table DOM id
var PAGE_TOTAL_ROW_SIZE = 'page_total_row_size';//数据库返回的数据总条目数
var ROWNO = 'rowno';//数据库返回的行编号
//var testURL='http://192.168.109.157:8080/main/cxtest?';
var rowSize;//总数据条目数
var pageSize = 10;//每页条数,默认为10条
var currentPageIndex=1;//当前的页,默认为第一页
var pageNum;//总页数


//根据table的id动态加载数据
function loadTable(data) {
    cleanTable();//清除table除表头的内容
    var tableCellHtml = '';
    //遍历data,获取key和value
    for (var i = 0; i < data.length; i++) {
        var lineStr = '<tr>';
        for (var key in data[i]) {
            if (PAGE_TOTAL_ROW_SIZE == key) {
                //对数据总数的返回值不做DOM处理
                rowSize = data[i][key];//对数据总条目数赋值
                continue;
            }
            //alert(key + ':' + data[i][key]);
            lineStr += '<th>' + data[i][key] + '</th>';
        }
        lineStr += '</tr>';
        tableCellHtml += lineStr;
    }
    getPageNum();
    $("#"+tableId).append(tableCellHtml);//加载table数据
    $("#spanCurrentPageIndex").html(currentPageIndex);//加载当前页码
    $("#spanTotalPage").html(pageNum);//加载总页数
    $("#spanTotalRowCount").html(rowSize);//加载总数据条目数
}

//通用查询jsonp并返回数据到全局变量data
function jsonpQuery(params) {
    $.ajax({
        url: commonURL + serviceName + params,
        dataType: 'jsonp',
        type: 'GET',
        jsonp: 'jsonpcallback',
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            alert("加载失败,请检查连接!");
        },
        success: function (msg) {
            if ('成功' == msg.message) {
                //alert(msg.message);
                data = eval('(' + msg.datas + ')');
                loadTable(data);
            } else {
                alert("数据返回失败!");
            }
        }
    });
}
//根据总条数rowSize和每页条数pageSize获取总页数
function getPageNum() {
    if (checkVar(rowSize) && checkVar(pageSize)) {
        pageNum = rowSize % pageSize == 0 ? parseInt(rowSize / pageSize) : Math.ceil(rowSize/pageSize);
    }
}

//判断一个变量是否为空;true不为空,false为空
function checkVar(obj) {
    if (obj == '' || obj == undefined || obj == null) {
        return false;
    }
    return true;
}

//上一页或下一页
function pageNav(currentPageIndex){
    //alert(currentPageIndex);
    var params = '&rowStart='+((currentPageIndex-1)*pageSize+1)+'&rowEnd='+currentPageIndex*pageSize;
    if(currentPageIndex<=0){
        firstPage();
        return ;
    }
    if(currentPageIndex>=pageNum){
        lastPage();
        return;
    }
    jsonpQuery(params);//请求数据
}

//第一页
function firstPage(){
    var params = '&rowStart=1&rowEnd='+pageSize;
    jsonpQuery(params);//请求数据
}

//最后一页
function lastPage(){
    var params = '&rowStart='+((pageNum-1)*pageSize+1)+'&rowEnd='+rowSize;
    jsonpQuery(params);//请求数据
}

//清除表格内容
function cleanTable(){
    $("#"+tableId+" tr:gt(0)").remove();
}

下面是页面内容:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>table分页查询示例</title>
</head>
<body>
<div>
    <table class="tablebox" width="" border="" cellpadding="" cellspacing="" id="tableInfo">
        <tr>
            <td>序号</td>
            <td>流程ID </td>
            <td>流程名称</td>
            <td>流程标识 </td>
            <td>流程起始标识</td>
        </tr>
    </table>
    <div>
        <span id="spanFirst" onclick ="firstPage();" >第一页</span>
        <span id="spanPre" onclick ="pageNav(--currentPageIndex);">上一页</span>
        <span id="spanNext" onclick ="pageNav(++currentPageIndex);">下一页</span>
        <span id="spanLast" onclick ="lastPage();">最后一页</span>
        第<span id="spanCurrentPageIndex"></span>页/共<span id="spanTotalPage"></span>页
        共<span id="spanTotalRowCount"></span>条数据
    </div>
</div>
<script type="text/javascript" src="JS/pageTable.js"></script>
<script type="text/javascript" src="JS/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function() {
        serviceName = 'getInfo';
        tableId = 'tableInfo';
        firstPage();
    });
</script>
</body>
</html>

现在就是有个问题,无法对下一页和最后一页进行限定,第一页的时候,我点击最后一页,
第1页/总页数,而且最后一页之后,点击下一页,第X页还是会增加,虽然说内容不变。

0

1个回答

你的上下直接操作currentPageIndex全局变量了,你需要判断超过下标重置下currentPageIndex全局变量的值

 function pageNav(currentPageIndex){
    //alert(currentPageIndex);
    var params = '&rowStart='+((currentPageIndex-1)*pageSize+1)+'&rowEnd='+currentPageIndex*pageSize;
    if(currentPageIndex<=0){
        firstPage();
        return ;
    }
    if(currentPageIndex>=pageNum){
        window.currentPageIndex=pageNum//////////////////////
        lastPage();
        return;
    }
    jsonpQuery(params);//请求数据
}
0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
分页实现-----首页、上一页、下一页、最后一页
分页实现例:首页、上一页、下一页、最后一页Bean中的代码public class doPage {       //定义当前页       private int nowPage;       //定义每页显示的条数       private int pageSize;       //定义一个根据上述条件查询出的数据List       @Suppre
JQuery AJAX 分页,跳页下一页,上一页【总结了一天啊干货】
网上的分页基本有问题,自己总结下:代码如下 var pagesi = "2";//每页行数 var totalPage = "0";//总页数 var currentPage = "1";//当前页 $(function(){ $('.menu_item').click(function () { $('.menu_
pageHelper超过最大页数后还会返回数据
问题描述:在微服务里面做查询接口,用到pageHelper,数据库只有8行数据,pageNum=1&amp;amp;pageSize=10,pageNum=2&amp;amp;pageSize=10,pageNum=3&amp;amp;pageSize=10。。。返回的数据都是那8条。原因:这是pageHelper里面自带的一个功能,叫做reasonable分页参数合理化,3.3.0以上版...
jquery实现ajax无刷新分页页码控件
这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是
判断当前页不能大于最后一页
$totalPage = ceil($totalRows / $listRows);n$this->nowPage = empty($GET['$this->p']) ? 1 : max(1, min($totalPage, inval($_GET[$this->p])));
静态分页器效果
纯jQuery做出来的上一页、下一页、最后一页、点击页数。
(首页上一页下一页尾页 + 下拉框跳转)分页功能
说在前头(本人用的是bootstrap +jQuery 和 struts2 +  MVC)不影响分页功能 制作一个分页功能: 效果如下: 由上图可知,此功能只适合页数不是特别多的情况下,页数多的时候,每次都要求得总记录数,太慢了。 【一】:1、总记录数,2、总页数,3、每页记录数,4、当前页 【二】:首页,上一页,下一页,尾页 【三】:直接跳转 一、java后台分页model
hibernate分页,点击最后一页时查询速度很慢的解决方法
使用hibernate,通过query.setFirstResult(fist),query.setMaxResult()进行分页时,查询前面的几页速度很快(20w条记录,1秒内),但点击“最后一页”时,查询速度很慢(20w条记录,13秒以上)。一般情况下原因是全表扫描,且需要的记录在表尾(需要长时间扫描后才能得到)。解决办法:避免全表扫描,把查询分两步:一,使用原来的查询条件用hiber
jquery实现上一页 下一页
上一页     1/1     下一页 var photoimg_str=[{img: 'http://img.oss.shuihulu.com/topic/a224727e07f24c83b41d346e5fe86d41.jpg@600w_1l_95Q'},{img: 'http://img.oss.shuihulu.com/topic/3197a591003e489db0
后台分页的页码安全(超过总页数,页码为非数字)检查问题
后台分页的页码安全(超过总页数,页码为非数字)检查问题 解决办法使用校验器: 如果页码没大于接收页码参数类型的最大值,但是页码大于总页数。 就在业务层进行判断 // 如果当前页大于总页数,那么就把最后一页的就是当前页 if (page > pageBean.getTotalPage()) { page = pageBean.getTotalPage(); pageBean.setP
Jquery datatables 监听上一页/下一页 ,页码,刷新列宽度
由于使用了固定前两列的插件fixedcolumn,导致切换到下一页的时候,如果固定的某列字数太多,就会导致显示错乱,所以想找监听页码的函数,可以从下面两个函数找到答案: 官网的地址为:官网datatables监听上一页 ,还有一个更好的答案是在stacklow里面,连接如下:问答网站关于监听页码的方案 .官网的都试过都不行,类似于下面的代码: var table = $('#example')
GridView分页(第一页、上一页、下一页、最后页、当前页数/总页数)
 前台GridView页脚代码:PagerTemplate>                                                                    table width="100%">                                                                        tr>    
js 小数取整的函数 分页的总页数算法
js 小数取整的函 1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入.  js: Math.round(7/2) 4,向下取整 js: Math.floor(7/2)数 分页的总页数算法 总记录数:total
关于分页标签,上一页和下一页不可点击。
前几天遇到了分页问题。 在第一页的时候,上一页依然是一个可点击的状态。 于是开始想解决办法 页面中,上下页都套用了bootstrap中分页的“disabled” 的class,这个class具体为一个小小的禁止标志。翻页的时候,在页面中间时,上一页和下一页的disabled是取不到的,在首尾页,则取到disabled。 大体思路如下: 在ul里面设置一个id, 通过js加载页面时候取得上
分页栏的web标准实现(始终显示第一页的页码和最后一页的页码)
最后给出genPaginationHtml(rowsCount, pageSize, curPage, toPage, deviation)接口参数说明如下:rnrowsCount(number):记录总数。rnpageSize(number):每页显示的记录数。rncurPage(number):当前页页码。rntoPage(string):一个函数名,实现跳到指定页的逻辑。rndeviatio
php 做分页ajax页面不刷新
php 做分页ajax页面不刷新
datatable指定页码分页
/* * 获取DataTable的公共配置 * basePath 接口路径 * tableId 当前table的id * len 列长 * idName id名 * */ var getDataTableConfig = function(basePath, tableId, len, idName) { /*销毁缓存数据*/ if($.f
ASP.NET 分页实现源码(上一页 下一页共页数 第几页)
<br /> 本次分页适合所有ASP.net数据绑定控件: 如:GridView DataList 等等<br /> <br />下面例子以DataList 为例<br />说明:<br />IList<Hotel_info>     泛型集合<br />ViewState["hotelList2"]   当前页的数据<br />this.DataListHotelList   当前页的DataList 控件<br />Databind()   这个方法在页面首次加载时调用 <br />Databind(I
js上一页/下一页真分页的页码生成
//传入“当前页码 每页容量 数据总条数” //返回按钮上的文本内容,如:pageBtns(2,10,75) 返回:"上一页,1,2,3,4,...,8,下一页" 以逗号分隔的字符串                  function pageBtns(currentPageIndex,currentPageSize,dataCount){     var cpIndex=parseInt(
关于SMARTFORM的页数问题
详细情况是这样的: 如果总页数不到10页,那么显示的就是正常的,例如:page:4/9 但是总页数大于等于10页, 假设是13页.那么1-9页显示的就是这样的:1/* 2/*......9/*, 10-13页显示的就是这这样的:10/31,11/31 12/31 13/31.全部都倒置了! 当页数是10页的时候最后一页就是这样的:10/01 用的变量是:Page:&sfsy-page& / &sf
mybatis分页插件 pagehelper点击末页跳到第8页
今天在使用mybatis分页插件pagehelper时遇到一个问题,如果页数大于9页,那么将出现下面的问题:     在jsp页面上点击末页时,依次会跳到第8、11、14、17~~,这是点击末页时显示的链接的值   这是jsp页面上的内容       这是肿么一回事?问一下度娘吧,没有找到类似的问题,看一下mybatis问题集也没有找到,可能是我比较笨吧!只好将页面上的jsp首页
为什么pageHelper超过最大页数后还会返回数据
问题描述:在微服务里面做查询接口,用到pageHelper,数据库只有8行数据,pageNum=1&pageSize=10,pageNum=2&pageSize=10,pageNum=3&pageSize=10。。。返回的数据都是那8条。原因:这是pageHelper里面自带的一个功能,叫做reasonable分页参数合理化,3.3.0以上版本可用,默认是false。 启用合理化时,如果pageNu
ajax分页时,点击浏览器后退按钮返回到上一页
ajax翻页到第5页,然后点浏览器键后退键, 不会回到第4页 ?  ajax触发的时候, 浏览器上的url地址也需要跟着变啊, 后面跟#参数就可以了 HTML Coding We use anchor links (starting with #) on the tabs so that the history feature will work:
datatables的服务器分页
datatables是jquery的一个插件,但是很是强大,有查询,排序功能,而且很漂亮,最重要的是他自带 了一个分页功能,很是强大 datatables的分页形式有2种: 一种是前台分页,这种方式简单,但是大数据量的时候就是一个问题了; 第二种是服务器端分页,当dataables需要数据的时候会自动的发出请求 前台分页我已经会了,今天准备尝试下服务器端分页.查看了很多资料,发现写的都是前
ajax获取所有数据,前台分页,搜索
背景: 因为项目特殊性,分页功能,后台没法像常规方法一样,分页从后台查找数据。所以前台会获取所有的数据,然后进行前台分页。关键字查询也是因为上述原因,用的是js自带的indexOf()方法。使用的插件和方法: 1. ajax 2. handlerbars模板引擎 3. jquery插件开发过程代码结构如下:html代码:<!-- 数据展示区域--> <table> <tbody id=
当使用Pagehelper进行分页时页数不在实际页数之内依旧有数据返回
使用Pagehelper进行分页时不管页码超出多少一直都会返回数据
GridView分页 记录总数:15 总页数:2 当前页:1 首页 上一页 下一页 尾页 GO
效果如下:     记录总数:15 总页数:2 当前页:1 首页 上一页 下一页 尾页  GO
python爬虫——爬取用js实现翻页的网站
——————————————-背景介绍——————————————— 首先,这次想爬取的网站地址为:http://www.zhuhai.gov.cn/hd/zxts_44606/tsfk/查看网站的源代码后,发现页面数据没有在源代码中,猜测应是js生成的。检查元素后,刷新Network,可找到表格数据所在的URL:https://www.zh12345.gov.cn/external/zf/get
分页判断总页数
1)totalPage = (totalNum-1)/pageSize +1; 2)totalPage = totalNum/pageSize + (totalNum%pagesize==0?0:1) 一直用的方法二,昨天偶然见了方法一,真感觉实在是太强大了
分析thinkphp自带的分页函数
上次应前端要求修改了tp自带的ajax分页类
jQuery分页插件jqPaginator的使用
jQuery的这款分页插件jqPaginator使用起来很方便,一般在开发中jQuery必不可少,另外再加上这个js文件就可以实现分页,jqPaginator的使用方法如下,(具体以笔者自己写的一个demo为例说明)1,首先,在页面引入jQuery和jqPaginator此处,对样式没有过分追求,所以把官方的样式引入过来。2,js编码具体就是注释中写的三步,该分页逻辑平铺直叙,先得到总页数,然后填...
纯js写分页 (算法把我纠结住了)
$(function () {     //下一页     $("#nextPage").click(function () {         tableRmove();         var curr = $("#CurrentPage").attr("value");         var newCurr = Number(curr);    //当前页
分页,求页数公式
总页数=(总记录数+每页显示数-1)/每页显示数
jquery分页展示控件:kkpager
 kkpager v1.2 js分页展示控件,传入简单参数就能使用的分页效果控件 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 准备工作,引入js、css type="text/javascript" src="../lib/jquery-1.10.2.min.js"> type="tex
easyui datagrid 分页按钮,点击下一页,直接调转到最后一页
需求:若客户在datagrid中的中间某一页,如第三页,第四页等,查看该条或修改该条数据后,点击返回按钮,则需要datagrid仍在当前页,而不是重新加载datagrid,又变成第一页。 方法:当点击某一页的某条数据时,需要将当前页的pagenumber取出,保存,当点击返回按钮,则将pagenumber设置到datagrid的属性中。 问题:如标题所述。 解决办法:datagrid的pag
根据分页的当前页和页数得到开始条数和结尾条数
根据分页的当前页和页数得到开始条数和结尾条数public static List getMinPageAndMaxPageNum(String nowpage, String pagesize) { List resList = new ArrayList(); int inowpage = Integer.parseInt(nowpage); in
jsp分页,显示上一页,下一页,首页,末页,和数据页“1,2,3,4,……”
jsp 分页显示数据,显示“页数”,“第几页”,“上一页” “下一页” “首页” “尾页”“1,2,3,4,5……”;分页效果和平时所见的分页效果相同,数据库用hibernate链接 “上一页”显示的数据和“1,2,3,4……”想对应,当前页数用不同的样式显示
使用JQuery中dataTable展示分页
$.ajax({ type: "POST", url: "/sdc/ss", dataType: 'json', success: function(msg){ $(".table-sort").dataTable({ "aaData": eval(msg.data.data), //需要展示数据数组 "aoCol
怎么进行分页数据的查询,如何判断是否有下一页?
大家好,我是IT修真院深圳分院第10期的JAVA学员,一枚正直纯洁善良的java程序员。 今天给大家分享一下,修真院官网Java任务2,深度思考中的知识点—怎么进行分页数据的查询,如何判断是否有下一页? 1.背景介绍 在开发过程当中,接触比较多的有MySQL、SQLServer、Oracle这三种数据库,这三种数据库都有自己内部的方法可以进行分页查询,MySQL用的是limit进行分页查询,...
使用jquery.DataTable.js 展示数据,并进行后台分页。
话不多说,直接上干货。。要使用jquery.DataTable展现数据,比如引入jquery.js,jquery.DataTable.js,如果这个不会,建议从入门到放弃。1、使用jquery.DataTable展现数据。var TableManaged = function () { var initTable1 = function () { var table = $('...