`

分页插件-jquery.page.js

 
阅读更多

分页插件-jquery.page.js

 

/**
 * @eexample:
 
$("#Pagination").pagination(<%=pcount%>, {
    callback: function(page_id, jq) { // 为翻页调用次函数。
        //alert(page_id); 回调函数,进一步使用请参阅说明文档
    }, 
    prev_text: " 上一页",
    next_text: "下一页 ",
    items_per_page: <%=pagesize %>, //每页的数据个数
    num_display_entries: 3, //两侧首尾分页条目数
    current_page: <%=page%>,   //当前页码
    num_edge_entries: 2, //连续分页主体部分分页条目数
    link_to:"?page=__id__"
});
 */
jQuery.fn.pagination = function(maxentries, opts) {
    opts = jQuery.extend({
        items_per_page: 10,
        num_display_entries: 10,
        current_page: 0,
        num_edge_entries: 0,
        link_to: "#",
        prev_text: "Prev",
        next_text: "Next",
        ellipse_text: "...",
        prev_show_always: true,
        next_show_always: true,
        callback: function() { return false; }
    }, opts || {});

    return this.each(function() {
        /**
        * Calculate the maximum number of pages
        */
        function numPages() {
            return Math.ceil(maxentries / opts.items_per_page);
        }

        /**
        * Calculate start and end point of pagination links depending on 
        * current_page and num_display_entries.
        * @return {Array}
        */
        function getInterval() {
            var ne_half = Math.ceil(opts.num_display_entries / 2);
            var np = numPages();
            var upper_limit = np - opts.num_display_entries;
            var start = current_page > ne_half ? Math.max(Math.min(current_page - ne_half, upper_limit), 0) : 0;
            var end = current_page > ne_half ? Math.min(current_page + ne_half, np) : Math.min(opts.num_display_entries, np);
            return [start, end];
        }

        /**
        * This is the event handling function for the pagination links. 
        * @param {int} page_id The new page number
        */
        function pageSelected(page_id, evt) {
            current_page = page_id;
            drawLinks();
            var continuePropagation = opts.callback(page_id, panel);
            if (!continuePropagation) {
                if (evt.stopPropagation) {
                    evt.stopPropagation();
                }
                else {
                    evt.cancelBubble = true;
                }
            }
            return continuePropagation;
        }

        /**
        * This function inserts the pagination links into the container element
        */
        function drawLinks() {
            panel.empty();
            var interval = getInterval();
            var np = numPages();
            // This helper function returns a handler function that calls pageSelected with the right page_id
            var getClickHandler = function(page_id) {
                return function(evt) { return pageSelected(page_id, evt); }
            }
            // Helper function for generating a single link (or a span tag if it'S the current page)
            var appendItem = function(page_id, appendopts) {
                page_id = page_id < 0 ? 0 : (page_id < np ? page_id : np - 1); // Normalize page id to sane value
                appendopts = jQuery.extend({ text: page_id + 1, classes: "current" }, appendopts || {});
                if (page_id == current_page) {
                    var lnk = $("<span class='current'>" + (appendopts.text) + "</span>");
                }
                else {
                    var lnk = $("<a>" + (appendopts.text) + "</a>")
                        .bind("click", getClickHandler(page_id))
                        .attr('href', opts.link_to.replace(/__id__/, page_id));


                }
                if (appendopts.classes) { lnk.removeAttr('class'); lnk.addClass(appendopts.classes); }
                panel.append(lnk);
            }
            // Generate "Previous"-Link
            if (opts.prev_text && (current_page > 0 || opts.prev_show_always)) {
                appendItem(current_page - 1, { text: opts.prev_text, classes: "disabled" });
            }
            // Generate starting points
            if (interval[0] > 0 && opts.num_edge_entries > 0) {
                var end = Math.min(opts.num_edge_entries, interval[0]);
                for (var i = 0; i < end; i++) {
                    appendItem(i);
                }
                if (opts.num_edge_entries < interval[0] && opts.ellipse_text) {
                    jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel);
                }
            }
            // Generate interval links
            for (var i = interval[0]; i < interval[1]; i++) {
                appendItem(i);
            }
            // Generate ending points
            if (interval[1] < np && opts.num_edge_entries > 0) {
                if (np - opts.num_edge_entries > interval[1] && opts.ellipse_text) {
                    jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel);
                }
                var begin = Math.max(np - opts.num_edge_entries, interval[1]);
                for (var i = begin; i < np; i++) {
                    appendItem(i);
                }

            }
            // Generate "Next"-Link
            if (opts.next_text && (current_page < np - 1 || opts.next_show_always)) {
                appendItem(current_page + 1, { text: opts.next_text, classes: "disabled" });
            }
        }

        // Extract current_page from options
        var current_page = opts.current_page;
        // Create a sane value for maxentries and items_per_page
        maxentries = (!maxentries || maxentries < 0) ? 1 : maxentries;
        opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0) ? 1 : opts.items_per_page;
        // Store DOM element for easy access from all inner functions
        var panel = jQuery(this);
        // Attach control functions to the DOM element 
        this.selectPage = function(page_id) { pageSelected(page_id); }
        this.prevPage = function() {
            if (current_page > 0) {
                pageSelected(current_page - 1);
                return true;
            }
            else {
                return false;
            }
        }
        this.nextPage = function() {
            if (current_page < numPages() - 1) {
                pageSelected(current_page + 1);
                return true;
            }
            else {
                return false;
            }
        }
        // When all initialisation is done, draw the links
        drawLinks();
    });
}

 

分享到:
评论

相关推荐

    z-pager.js分页插件.zip

    需要引入pager.css及jquery.z-pager.js Html: &lt;div id="pager" class="pager clearfix"&gt; &lt;/div&gt;

    jQuery分页插件jQuery.pager.js

    插件描述:表格分页,li分页.

    jquery.page.js

    JQuery.page.js分页插件的源码,使用方法参见http://www.lanrenzhijia.com/jquery/fenye-jquery.page.html

    Asp.Net无刷新分页( jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 页面内容: &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%&gt; &lt;!DOCTYPE ...

    简单的jQuery分页插件下载.zip

    简单的jQuery分页插件下载是一款不用分页即可显示的jQuery插件jQuery.page.js。

    jquery-printTable-1.0.js

    * jquery 表格打印插件 * * 作者: LiuJunGuang * 日期:2013年6月4日 * 分页样式(需要自定义): * @media print { * .pageBreak { page-break-after:always; } * } * 使用例子: * $(function(){ * $...

    jQuery插件PagedTable实现表格分页

    NULL 博文链接:https://hiandroid.iteye.com/blog/792062

    asp.net jquery无刷新分页插件(jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活...

    基于jquery.page.js实现分页效果

    基于jquery.page.js的一款简单的分页效果,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;简单的jQuery分页插件&lt;/title&gt; &lt;style...

    jQuery基于Bootstrap分页插件.zip

    jQuery基于Bootstrap分页插件是一款分页插件设置固定列表分页显示,支持动态分页数据代码。  jQuery(document).ready(function($){ for (var i = 1; i ; i ) {  $('.list-group').append('&lt;li class="list...

    JS 分页插件page.js

    比较基础的JS分页,基于jQuery的插件,写的不好,还望见谅。。

    paging.js分页插件.zip

    paging.js分页插件 &lt;script src="js/jquery.min.js"&gt; &lt;script type="text/javascript" src="js/paging.js"&gt; &lt;!--分页--&gt; &lt;div id="page" class="page_div"&gt;&lt;/div&gt;

    jQuery Bootstrap动态分页插件.zip

     jQuery(document).ready(function($){ for (var i = 1; i ; i ) {  $('.list-group').append('&lt;li class="list-group-item"&gt; Item ' i '&lt;/li&gt;'); } $('.list-group').paginathing({  perPage: 5,  ...

    jquery.pagination.js

    jquery-pagination分页插件 1、引入pagination.css和jquery.pagination.js文件; 2、配置可参考jquery.pagination.js文件50行的配置默认参数,含参数注释; var defaults = { totalData: 0, //数据总条数 show...

    jquery.pages:一个简单的jQuery分页插件

    jquery.pages#简介一个简单的jQuery分页...引入jQuery和jquery.pages插件,如图:[removed][removed][removed][removed]初始化参数初始化分页插件:$(function(){ //init page plugin $("div.page").pages({ url: '',

    jQuery简单实用的分页插件Page.zip

    jQuery简单实用的分页插件Page是一款兼容IE8及以上浏览器,配置简单实用,推荐下载。

    jquery-page js+css

    html 分页插件,适用大部分浏览器,简单易懂!!!!!!!!!!!!!!!!!!!!!!!!!!

    强大的jquery下拉分页选择插件SelectPage

    SelectPage.js是一款强大的jquery下拉分页选择插件。SelectPage.js下拉分页选择插件界面简洁,支持下拉,分页,键盘操作等功能。

    jquery 实现分页插件

    非常实用的分页插件,只需简单设置数目条数,分页数 function pageselectCallback(page_id, jq){ $('#Searchresult').text("Showing search results "+((page_id*10)+1)+"-"+((page_id*10)+10)); } $...

    php jquery 实现新闻标签分类与无刷新分页

    我一向是见招拆招的解决思路,这里需要运用到3个东西——标签页效果插件和分页插件,jquery的getJson请求。 因此我使用了jquery-ui插件,jquery-page插件,现提供下载地址:jquery_all.rar 里面包含了3个JS脚本文件...

Global site tag (gtag.js) - Google Analytics