laypage前端分页插件实现ajax异步分页

2024-04-17 03:48:53

本文实例为大家分享了laypage前端分页插件，ajax异步分页，获取json数据实现无刷新分页，供大家参考，具体内容如下

function GetList(pageIndex) {
      var _this = ""
      var clone_this = "";
      _this = $(".BindDataList");//数据列表容器，
      clone_this = _this.clone(true);
      var pageSize = 25;//每页展示的条数
      $.ajax({
        type: "get",
        async: false,//异步锁定，默认为true
        url: "../ashx/System/DefaultAjax.ashx",//后端处理数据，返回json格式
        data: {"pageIndex": pageIndex, "pageSize": pageSize, },
        contentType: "application/json; charset=utf-8",
        success: function (data) {
          var json = eval("(" + data + ")");
          if (json.PageCount > 0) //数据总条数
           {
            _this.html("");
            for (var i = 0; i < json.rows.length ; i++) {
              var html = "<li>json数据</li>";
              _this.append(html);
            }
            jsonpage(json, pageIndex, pageSize);
          }
          else {
            _this.html("");
            _this.append("");
          }
        }
      });
    }

function jsonpage(json, pageIndex, pageSize) {
      var coun = json.PageCount;//总数据条数
      var pagecount = coun % pageSize == 0 ? coun / pageSize : coun / pageSize + 1;//计算多少页
      var laypageindex = laypage({
        cont: 'project_page', //容器。值支持id名、原生dom对象，jquery对象。
        skin: '#fb771f',
        pages: pagecount, //通过后台拿到的总页数
        curr: pageIndex, //初始化当前页
        first: '|<', //将首页显示为数字1,。若不显示，设置false即可
        last: '>|', //将尾页显示为总页数。若不显示，设置false即可
        prev: '<', //若不显示，设置false即可
        next: '>', //若不显示，设置false即可
        jump: function (obj, first) { //触发分页后的回调
          if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
            SearchHotTag(obj.curr);
          }
        }
      });
    }

以上就是本文的全部内容，希望对大家学习laypage分页插件有所启发和帮助，谢谢大家的阅读。

封装好的javascript前端分页插件pagination

摘要: 最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高不依赖任何库作为一次技术沉淀先看下效果图安装方法首先在页面中要载入css及js <link rel="stylesheet" href="dist/pagination.css"> <script src="dist/pagination.js"
jQuery前端分页示例分享

大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. 复制代码代码如下: /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总页数 * url 连接地址 * pager(10, 1, 5, 'Index')使用方法示例 */ function pager(pageSize, pageIndex, pageCoun
纯JS前端实现分页代码

先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码: 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到,点击首页/下一页等传值正确的话,基本上分页是不会出什么问题的网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以
js实现前端分页页码管理

用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是初始页面(也就是第一页)的界面,如果为第一页时,则首页和上一页按钮不可用,为了展示分页的效果,我当前的分页是一条一页. 这是页码大于5页时展示的效果:1,2页始终始终显示(考虑到用户体验) 这是最后一页的效果图: 下面直接上js代码: //页码显示 $(function(){ var dqPage
基于Bootstrap和jQuery构建前端分页工具实例代码

前言为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的前端分页优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询
前端分页功能的实现以及原理（jQuery）

分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了.现闲得无聊,就写出来玩玩,只实现功能,并未封装. 基于jq实现分页功能,大致分为以下几步: 定义一个分页方法,可多次调用参数设置请求数据页面跳转方法创建非数字按钮和数据内容区创建数字按钮首屏加载调用结构层只需要一个容器 <div class="pagination-nick"></div> 一.定义分页方法 function paginationNick(op
laypage前端分页插件实现ajax异步分页

本文实例为大家分享了laypage前端分页插件,ajax异步分页,获取json数据实现无刷新分页,供大家参考,具体内容如下 function GetList(pageIndex) { var _this = "" var clone_this = ""; _this = $(".BindDataList");//数据列表容器, clone_this = _this.clone(true); var pageSize = 25;//每页展示的条数
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例

使用bootstrap-paginator.js 分页来进行ajax 异步分页请求具体的做法如下 : 首先定义一个异步提交请求的ajax 函数,其完整的函数如下: var nid= $("#lbnid").val(); // 获取当前新闻编号 var cpage = 1; // 当前页面号 var tpage = 10; // 总页面数 function getPaging() { getComment(cpage); //获取新闻评论 } //点击查看新闻评论 $("#o
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:
Mybatis利用分页插件PageHelper快速实现分页查询

目录前言首先创建一个Maven项目数据库中创建一张表设置Mybatis配置文件编写pojo实体类和mapper接口和mapper映射文件创建测试类总结前言 Mybatis算是对数据库操作的利器了.但是在处理分页的时候,Mybatis并没有什么特别的方法,一般需要自己去写limit子句实现,成本较高.好在有国内开发者写了一个PageHelper插件,可以帮助我们快速实现分页查询. 官网地址首先创建一个Maven项目导入相关依赖:  <depend
asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

本文为在mvc4中使用ajax实现无刷新分页demo,记录一下. 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器,后端控制器根据当前页码和设置的pageSize从数据库中取出对应页的数据.后端控制器处理完后利用PartialView方法把数据返回到分部视图中,利用ViewBag来返回总记录数和pageSize.ajax通过回调函数把控制器返回的分部视图内容加载到主视图中显示. 说明:分页具体的分页导航和样式使用了kkp
layui实现数据分页功能（ajax异步）

最近项目要使用layUI的分页,看了官方demo感觉还是不太清晰,摸索了一下,现在记录一下. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui-v2.4.5/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vendor/layui-v2.4.
layui实现数据表格table分页功能（ajax异步）

layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo
利用JQuery写一个简单的异步分页插件

写了一个Jquery异步分页插件,拿出来分享一下,有不完善之处请指教. 以用户分页为例,先看一下效果,首先是第一页: 下一页或者点击第二页后: 点击尾页后: 效果还可以吧?来看看具体怎么用,首先后台要有一个Page模型: Page.java: public class Page { /** * 当前页号 */ private int currPageNum = 1; /** * 总记录数 */ private int totalRowSize = 0; /** * 每页记录数 */ privat
分享精心挑选的12款优秀jQuery Ajax分页插件和教程

Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件. 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等. 浏览详情在线演示 2. jPaginate: A Fancy jQuery Pagination Plugin jPa
jquery分页插件jquery.pagination.js实现无刷新分页

本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码,供大家参考,具体内容如下 1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值

laypage前端分页插件实现ajax异步分页

相关推荐

随机推荐