jquery ajax 调用kkpager插件 异步加载重新生成分页后,点击页数还是跟首次加载一样

kkpager的用法网上有很多,可以百度的到。

但是在调用动态数据的时候发现两个问题

1.Ajax数据变化但是页码不变的问题,方法来自网上

2.按查询条件重新生成数据和分页,点击分页事件后totalpage 和totalrecord 和没加条件查询的数据一样。

主要原因是因为客户端不会帮你保留总页码数和总条数,

所以在按查询条件重新生成数据时,用hidden按钮绑定你的总页数和总条数

下面是ajax 调用后台数据,返回的总页数和总条数,都存放在hidden里了

 $.ajax({
        type: "get",
        dataType: "json",
        url: urlStr2,
        success: totalOnsuccess
    });

//根据返回的total 加载数据和分页
function totalOnsuccess(data) {
    var resInfoArray = eval(data);

    totalRecords = resInfoArray[0].TOTAL;

    totalPage = Math.ceil(totalRecords / pageSize); //向上取整
    $("#totalpages").val(totalPage); //绑定获取的总页数
    $("#totalRecords").val(totalRecords);//绑定获取的总条数

    if (!pageNo) {
        pageNo = 1;
    }
    if (totalRecords > 0) {

        FkeepPage(pageNo, totalPage, totalRecords);    //调用分页插件
    }
    else {
        $("#kkpager").html("<div style=‘text-align:center‘>没有符合条件的数据</div>")

    }
    queryInfoTable(tablename, pageSize, pageNo, where); //加载表格数据

}
/*
pageNo:当前页
totalPage:总页数
totalRecords:总条数
*/
function FkeepPage(pageNo, totalPage, totalRecords) {

    //生成分页
    //有些参数是可选的,比如lang,若不传有默认值
    kkpager.generPageHtml({
        pno: pageNo,
        //总页码
        total: totalPage,
        //总数据条数
        totalRecords: totalRecords,
        mode: ‘click‘,//默认值是link,可选link或者click
        click: function (n) {

            // do something
            // this.selectPage(n); //默认的,因为不能符合我的要求改成下面的

this.selectPage(n, $("#totalpages").val(), $("#totalRecords").val()); 
            queryInfoTable(tablename, pageSize, n, where); //加载表格数据
            return false;
        }
        /*
        ,lang                : {
            firstPageText            : ‘首页‘,
            firstPageTipText        : ‘首页‘,
            lastPageText            : ‘尾页‘,
            lastPageTipText            : ‘尾页‘,
            prePageText                : ‘上一页‘,
            prePageTipText            : ‘上一页‘,
            nextPageText            : ‘下一页‘,
            nextPageTipText            : ‘下一页‘,
            totalPageBeforeText        : ‘共‘,
            totalPageAfterText        : ‘页‘,
            currPageBeforeText        : ‘当前第‘,
            currPageAfterText        : ‘页‘,
            totalInfoSplitStr        : ‘/‘,
            totalRecordsBeforeText    : ‘共‘,
            totalRecordsAfterText    : ‘条数据‘,
            gopageBeforeText        : ‘&nbsp;转到‘,
            gopageButtonOkText        : ‘确定‘,
            gopageAfterText            : ‘页‘,
            buttonTipBeforeText        : ‘第‘,
            buttonTipAfterText        : ‘页‘
        }*/
    },true);//加true 默认没有,因为页码数不更新,所以加上了
}

后面的是修改kkpager.js

主要就是把里面的

//不刷新页面直接手动调用选中某一页码
selectPage: function (n) {
this.generPageHtml(this._config,true);
},

  

改成

//不刷新页面直接手动调用选中某一页码
selectPage: function (n, b, c) {
this._config[‘pno‘] = n;
this._config[‘total‘] = b;
this._config[‘totalRecords‘] = c;
this.generPageHtml(this._config,true);
},

  

时间: 2024-08-07 01:12:04

jquery ajax 调用kkpager插件 异步加载重新生成分页后,点击页数还是跟首次加载一样的相关文章

jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是"application/json", (3)data传递的数据必须是严格的json数据,如"{'a':'aa','b':'bb'}",而且参数必须和静态方法的参数一 一对应 (4)aspx的后台方法返回的数据默认形式是"{'d':'返回的内容'}",所

Jquery Ajax调用aspx页面方法

原文:Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进行处理: 3)文艺玩法:通过WCF进行处理. 第一种和第三种方法不在本文介绍范围之内,下面重点介绍第二种方法. 说明 在我们的印象里 asp.net的Web服务是以.asmx来结尾的,而我们现在的asp.net也能实现Web服务,这是因为默认Web.

Jquery ajax调用webservice总结

jquery ajax调用webservice(C#)要注意的几个事项: 1.web.config里需要配置2个地方 <httpHandlers>      <remove verb="*" path="*.asmx"/>      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script

Jquery Ajax 调用 WebService

原文:http://www.cnblogs.com/andiki/archive/2010/05/17/1737254.html jquery ajax调用webservice(C#)要注意的几个事项: 1.web.config里需要配置2个地方 <httpHandlers>       <remove verb="*" path="*.asmx"/>       <add verb="*" path="*

jquery ajax调用返回json格式数据处理

Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: false }).responseText; 返回json数组取条数用result.length <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs"

Jquery Ajax调用asmx出错问题

1.//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释.      [System.Web.Script.Services.ScriptService] 这个错误已经明显提示了,犯错几率不大. 2.在web.config的<system.web></system.web>中间加入如下配置节内容 <webServices>         <protocols>            <add name=&quo

JQuery ajax调用asp.net的webMethod

在vs2010中,用JQuery ajax调用asp.net 2.0的  webMethod 方法时,怎么都调不出来,原来和3.5 有点出入. 3.5中,无需特殊设置,可以直接用$.ajax调用在aspx.cs中,访问级别public,静态的,标记为[webmethod]的方法. aspx.cs: using System.Web.Services; [WebMethod] public static string PollCount() { …… return getResultHTML(ds

Jquery ajax调用后台aspx后台文件方法(不是ashx)

在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下WebMethod方法的用法 1.修饰符主要用public static修饰 2.方法前面加上[WebMethod]属性表明这是WebMethod方法 3.前台html页面(Client端)访问时要使用post方法,和后台.cs文件进行数据交互,否则会返回整个html页面. 4.当后台页面返回数据后

.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存,并返回保存的图片路径展示出图片,实现一个无刷新的异步图片上传的过程,当然这里我讲解的是单张图片的保存过程,对于多图片上传的话其实我们只需要在type='file'文本框中加上一个multiple可多选,然后获取input中的文件数组遍历向后台提交感兴趣的话可以尝试,不过下一篇博客将会讲解如何使用L