iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >laypage前端分页插件如何实现ajax异步分页
  • 723
分享到

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

2024-04-02 19:04:59 723人浏览 薄情痞子
摘要

这篇文章将为大家详细讲解有关laypage前端分页插件如何实现ajax异步分页,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下function Get

这篇文章将为大家详细讲解有关laypage前端分页插件如何实现ajax异步分页,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

具体内容如下

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前端分页插件如何实现ajax异步分页”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: laypage前端分页插件如何实现ajax异步分页

本文链接: https://www.lsjlt.com/news/79659.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • laypage前端分页插件如何实现ajax异步分页
    这篇文章将为大家详细讲解有关laypage前端分页插件如何实现ajax异步分页,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下function Get...
    99+
    2024-04-02
  • laypage分页控件如何使用
    Laypage是一个基于jQuery的分页控件,可以用于网页中的数据分页展示。以下是使用Laypage分页控件的步骤:1. 引入La...
    99+
    2023-08-17
    laypage
  • vue如何实现前端分页
    Vue可以通过以下几种方式来实现前端分页:1. 使用Vue自带的v-for指令和计算属性:可以将数据和页码信息存储在Vue的data...
    99+
    2023-08-09
    vue
  • 如何利用 Linq+Jquery+Ajax 实现异步分页功能
    本篇内容主要讲解“如何利用 Linq+Jquery+Ajax 实现异步分页功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何利用 Linq+Jquery+A...
    99+
    2024-04-02
  • ajax如何实现分页和分页查询
    这篇文章将为大家详细讲解有关ajax如何实现分页和分页查询,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先为了页面的整齐与美观,我用到了bootstrap,需要引进所需要的文件包<link&nbs...
    99+
    2023-06-08
  • js+ajax如何实现分页组件
    小编给大家分享一下js+ajax如何实现分页组件,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下1.定义分页组件DOM<div id="paginati...
    99+
    2024-04-02
  • 怎么实现Vue前端分页和后端分页
    本篇内容介绍了“怎么实现Vue前端分页和后端分页”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1:前端手写分页(数据量小的情况下)前端需要使...
    99+
    2023-06-22
  • LayUI如何实现前端分页功能
    这篇文章主要为大家展示了“LayUI如何实现前端分页功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“LayUI如何实现前端分页功能”这篇文章吧。一、LayUI...
    99+
    2024-04-02
  • SpringBoot+Mybatis分页插件PageHelper实现分页效果
    目录一、项目结构二、插件引入三、代码四、测试:        最近刚入职新公司,项目是从零开始搭建的项目。我觉得是时候考验是驴还是千里马的时候...
    99+
    2024-04-02
  • 如何实现Ajax分页效果
    这篇文章给大家分享的是有关如何实现Ajax分页效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。首先创建前台页面MyAjaxPager.aspx 复制代码 代码如下:<%@...
    99+
    2024-04-02
  • ajax如何实现分页效果
    这篇文章将为大家详细讲解有关ajax如何实现分页效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。ajax分页效果图:上干货:  $(function(){&n...
    99+
    2024-04-02
  • JavaScript前端分页实现示例
    目录初窥前端分页前言需求分析实现目标:解决思路:开工,上代码:转折:初窥前端分页 前言 近日接到了一个关于前端分页的需求,某系统仓储模块的分页功能,由于以前分页都是后端处理的,第一次...
    99+
    2024-04-02
  • 一篇文章告诉你如何实现Vue前端分页和后端分页
    目录1:前端手写分页(数据量小的情况下)2:后端分页,前端只需要关注传递的page和pageSize总结1:前端手写分页(数据量小的情况下) 前端需要使用slice截取: table...
    99+
    2024-04-02
  • JS实现前端分页效果
    本文实例为大家分享了JS实现前端分页效果的具体代码,供大家参考,具体内容如下 一、HTML部分 <!doctype html> <html> <he...
    99+
    2024-04-02
  • Vue.js+bootstrap前端如何实现分页和排序
    小编给大家分享一下Vue.js+bootstrap前端如何实现分页和排序,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!效果图:语法:数据绑定 {{...}}或者v-model<td&...
    99+
    2024-04-02
  • ajax如何实现无刷新分页
    这篇文章主要介绍ajax如何实现无刷新分页,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:在普通的分页中,一旦页码改变,则url改变,整个页面都会刷新,如果我们希望页码的改变...
    99+
    2024-04-02
  • ajax异步如何实现文件分片上传
    这篇文章主要介绍ajax异步如何实现文件分片上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例代码:<!DOCTYPE html><html lang="en&qu...
    99+
    2023-06-08
  • antdesignVue纯前端实现分页问题
    目录ant design Vue纯前端实现分页功能自己想的一个简单方法ant design vue中分页器的使用注意事项总结ant design Vue纯前端实现分页功能 (有选择的...
    99+
    2023-05-17
    ant design Vue ant design Vue分页 ant design Vue实现分页
  • 如何使用纯jQuery实现前端分页功能
    这篇文章给大家分享的是有关如何使用纯jQuery实现前端分页功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果展示:因为核心代码主要在前端jquery,为了简便,后台就用se...
    99+
    2024-04-02
  • Mybatis利用分页插件PageHelper快速实现分页查询
    目录前言 首先创建一个Maven项目 数据库中创建一张表设置Mybatis配置文件 编写pojo实体类和mapper接口和mapper映射文件创建测试类总结前言 Mybatis算是...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作