`
liyonghui160com
  • 浏览: 777428 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

pagination使用

阅读更多

 

demo里非常全
附链接地址:http://blog.csdn.net/luoyeyu1989/article/details/7000865

 

原来:
1,下载3个文件
分别为:jquery-1.7.1.js、jquery.pagination.js、pagination.css

 

批注:
(1)jquery.js和jquery.pagination.js插件的加载有先后顺序,不能颠倒。特别是在复杂的页面中。
(2)jquery.pagination.js实现可以有很多种。不同的分页插件,使用时可能会有差别,所以最好有足够的js功底,读懂那些插件是如何实现,以及如何引用。
(3)pagination.css是样式,可以独立出来。也即可以使用很多种不同的样式修饰,不必是给出的那一个。

 

避免初始化重复加载 加一个状态:

 

第一次加载且求出数据和分页大小,分页count等,等callback的时候判断一个DOM或input的状态,然后修改即可,
如:
$(document).ready(function() {
        $.ajax({
            type: "get",
            data: "page='' &S=" + S + "&domain=" + domain + "&pagesize="+dopagesize,
            url: "<?php echo $cmsapi; ?>/news",
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "jsonpNewsList",
            success: function(data) {
                if (data.result == 200) {
                    $('#aresult').empty();
                    if (!$.isEmptyObject(data.data.list)) {

                        $.each(data.data.list, function(a, list) { //装载对应分页的内容
                            $("#aresult").append('<li><span><a href=" detail-' + list.id + '.html"><div>' + list.title + '</div></a></span></li>');
							$("#online_ajax").val(1);
                        });
                    } else {
                        $("#aresult").append('<li><span class="s_check">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;暂无数据</span></li>');
                    }
                }
                /**
                 * 初始化完成 显示分页  
                 */
                initPagination(data.data.pages.itemCount, dopagesize);  

            },
            error: function() {
                alert('参数错误');
            }
        });
    });

function initPagination(count, pagesize) {

        // 创建分页
        $("#Pagination").pagination(count, {//共24条
            num_edge_entries: 1, //边缘页数 隐藏之前或之后个数
            num_display_entries: 4, //主体页数显示8个多出隐藏
            callback: pageselectCallback,
            items_per_page: pagesize, //每页显示的3条目数   $this->pagesize
            prev_text: "前一页",
            next_text: "后一页"
        });
    }

  function pageselectCallback(page_index, jq) {   //page_index 前一个表示您当前点击的那个分页的页数索引值
        /**
         * 扩展: 查询客户的关键字搜索
         */
        var search_type = $("#search_type").val();
        var orderby = $("#orderby").val();
        var keywords = '';
        var search = {};
        var online_ajax = $("#online_ajax").val();

        if (online_ajax != 1) {
            $.ajax({
                type: "get",
                data: "page=" + (page_index + 1) + " &S=" + S + "&domain=" + domain + "&pagesize=3",
                url: "<?php echo $cmsapi; ?>/news",
                dataType: "jsonp",
                jsonp: "callback",
                jsonpCallback: "jsonpNewsList",
                success: function(data) {
                    if (data.result == 200) {
                        $('#aresult').empty();
                        if (!$.isEmptyObject(data.data.list)) {

                            $.each(data.data.list, function(a, list) { //装载对应分页的内容
                                $("#aresult").append('<li><span><a href=" detail-' + list.id + '.html"><div>' + list.title + '</div></a></span></li>');
                            });
                        } else {
                            $("#aresult").append('<li><span class="s_check">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;暂无数据</span></li>');
                        }
                    }
                },
                error: function() {
                    alert('参数错误');
                }
            });
        } else {
            $("#online_ajax").val(2);
        }

        return false;
    }

 

 

 

分享到:
评论

相关推荐

    jquery pagination使用(笔记)

    **jQuery Pagination 使用详解** 在网页开发中,分页是一种常见的数据展示方式,它能帮助用户更有效地浏览大量的信息。jQuery Pagination 是一个轻量级、易于使用的分页插件,能够帮助开发者快速实现页面间的导航。...

    bs_pagination(基于bootstrap的分页插件).rar

    基于bootstrap+jquery的分页插件bs_pagination。如果我们的项目采用了bootstrap前端框架,可以考虑这款基于bootstrap+jquery的分页插件。本文将为你介绍该款分页插件的使用方法。

    (源代码)第03讲:uni-pagination实现表格分页查询

    在本教程中,我们将深入探讨如何使用uni-app框架中的uni-pagination组件来实现表格数据的分页查询。uni-app是一款跨平台的开发工具,允许开发者使用Vue.js语法编写一次代码,部署到多端,如iOS、Android、H5、微信小...

    jquery分页插件pagination使用教程

    pagination使用起来非常的方便。 第一步:引入分页需要的js(jquery.pagination.js)和css(pagination.css) pagination插件下载地址 第二步:将分页条容器写到页面里(固定代码) &lt;div id=Pagination&gt; 第三...

    React的本地分页组件Reactjs-Pagination.zip

    文档安装npm install --save reactjs-pagination使用示例代码:import React, { Component } from 'react'; import { Pagination }from 'reactjs-pagination';   class Test extends Component { ...

    CodeIgniter分页类pagination使用方法示例

    在本文中,我们将深入探讨CodeIgniter的分页类`pagination`的使用方法,通过一个具体的实例来展示如何在实际项目中实现分页功能。 1. **分页类初始化** 在Controller中,首先需要加载`pagination`库。这通常在控制...

    jquery pagination 分页组件 2.5.0

    jquery pagination 分页组件 jquery pagination 分页组件 jquery pagination 分页组件 官网 https://pagination.js.org/index.html 文档 https://pagination.js.org/docs/index.html

    jquery.pagination.js实现分页的三种形式,实例

    在这个实例中,我们将探讨如何使用 `jquery.pagination.js` 实现三种不同的分页形式:基本分页、AJAX 无刷新分页以及自定义分页属性。 **基本分页** 基本分页是最简单的应用场景,通常用于展示固定数量的数据集。...

    pagination - 前端分页插件

    在具体使用"pagination"插件之前,开发者需要对前端分页的基本原理有所了解。通常,分页涉及以下几个关键概念: 1. 总记录数:这是所有未分页的数据条目总数。 2. 每页记录数:每一页显示的数据条目数量,可以根据...

    jquery.pagination.js 下载

    jquery.pagination.js 下载,优秀的jquery分页插件,使用IP代理国外网站下载而来

    无刷新分页 pagination

    在实际应用中,使用`jquery.pagination.js`的步骤大致如下: 1. **引入资源**:首先,你需要在HTML文件中引入Jquery库和`jquery.pagination.js`插件的脚本文件。确保它们在合适的位置被正确引用。 2. **HTML结构**...

    使用 Vuex 和 Vue Router 进行 JWT 身份验证的 Vue.js 演示.zip

    Vue.js CRUD 应用程序使用 Axios 和 API 示例的 Vue Pagination使用 Axios 的 Vue 文件上传示例采用 Spring Boot 后端的全栈Spring Boot + Vue.js使用 JWT 和 Spring Security 进行身份验证的示例使用 Node.js ...

    JQuery pagination分页.rar

    在使用jQuery pagination插件前,首先确保你的项目中已经引入了jQuery库。然后,下载并引入pagination插件的相关文件,通常包括CSS样式文件和JavaScript脚本文件。这些文件可以从压缩包中的"JQuery pagination分页...

    Pagination(分页)

    jQuery的Pagination插件提供了一个简单易用的解决方案,通过阅读“使用说明.docx”和实践“使用案例”,开发者可以快速掌握并应用到自己的项目中。无论你是初学者还是经验丰富的开发者,理解并熟练使用jQuery分页...

    jquery.pagination分页插件

    3. **初始化插件**:在JavaScript中,使用`$.fn.pagination`方法初始化分页组件,并设置必要的参数。 ```javascript $('#pagination').pagination({ dataSource: 'your-data-source-url', // 数据源,可以是URL或...

    jQuery Pagination分页插件.zip

    下面我们将深入探讨jQuery Pagination的原理、使用方法以及常见配置选项。 首先,jQuery Pagination的基础工作原理是通过JavaScript动态生成分页链接,用户点击这些链接时,插件会根据设定的参数加载相应页码的数据...

    pagination.js下载

    JQuery分页插件 pagination.js下载

    mybatis-pagination-master

    《MyBatis分页插件mybatis-pagination深度解析》 在大数据量的Web应用中,分页查询是不可或缺的一部分,它能有效提高系统的性能并优化用户体验。MyBatis作为一款强大的持久层框架,虽然提供了基本的SQL映射功能,但...

Global site tag (gtag.js) - Google Analytics