2 qq 37011988 qq_37011988 于 2017.01.11 14:12 提问

有会用js分页控件的吗?怎么在JSP页面内容分页? 10C

/**

  • This jQuery plugin displays pagination links inside the selected elements.
  • This plugin needs at least jQuery 1.4.2 *
  • @author Gabriel Birke (birke at d-scribe dot de)
  • @version 2.2
  • @param {int} maxentries Number of entries to paginate
  • @param {Object} opts Several options (see README for documentation)
  • @return {Object} jQuery Object
    /
    (function($){
    /
    *

    • @class Class for calculating pagination values */ $.PaginationCalculator = function(maxentries, opts) { this.maxentries = maxentries; this.opts = opts; }

    $.extend($.PaginationCalculator.prototype, {
    /**
    * Calculate the maximum number of pages
    * @method
    * @returns {Number}
    /
    numPages:function() {
    return Math.ceil(this.maxentries/this.opts.items_per_page);
    },
    /
    *
    * Calculate start and end point of pagination links depending on
    * current_page and num_display_entries.
    * @returns {Array}
    */
    getInterval:function(current_page) {
    var ne_half = Math.floor(this.opts.num_display_entries/2);
    var np = this.numPages();
    var upper_limit = np - this.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 + (this.opts.num_display_entries % 2), np):Math.min(this.opts.num_display_entries, np);
    return {start:start, end:end};
    }
    });

    // Initialize jQuery object container for pagination renderers
    $.PaginationRenderers = {}

    /**

    • @class Default renderer for rendering pagination links
      /
      $.PaginationRenderers.defaultRenderer = function(maxentries, opts) {
      this.maxentries = maxentries;
      this.opts = opts;
      this.pc = new $.PaginationCalculator(maxentries, opts);
      }
      $.extend($.PaginationRenderers.defaultRenderer.prototype, {
      /
      *

      • Helper function for generating a single link (or a span tag if it's the current page)
      • @param {Number} page_id The page id for the new item
      • @param {Number} current_page
      • @param {Object} appendopts Options for the new item: text and classes
      • @returns {jQuery} jQuery object containing the link
        */
        createLink:function(page_id, current_page, appendopts){
        var lnk, np = this.pc.numPages();
        page_id = page_id appendopts = $.extend({text:page_id+1, classes:""}, appendopts||{});
        if(page_id == current_page){
        lnk = $("" + appendopts.text + "");
        }
        else
        {
        lnk = $("" + appendopts.text + "")
        .attr('href', this.opts.link_to.replace(/__id__/,page_id));
        }
        if(appendopts.classes){ lnk.addClass(appendopts.classes); }
        lnk.data('page_id', page_id);
        return lnk;
        },
        // Generate a range of numeric links
        appendRange:function(container, current_page, start, end, opts) {
        var i;
        for(i=start; i this.createLink(i, current_page, opts).appendTo(container);
        }
        },
        getLinks:function(current_page, eventHandler) {
        var begin, end,
        interval = this.pc.getInterval(current_page),
        np = this.pc.numPages(),
        fragment = $("

        ");

        // Generate "Previous"-Link
        if(this.opts.prev_text && (current_page > 0 || this.opts.prev_show_always)){
        fragment.append(this.createLink(current_page-1, current_page, {text:this.opts.prev_text, classes:"prev"}));
        }
        // Generate starting points
        if (interval.start > 0 && this.opts.num_edge_entries > 0)
        {
        end = Math.min(this.opts.num_edge_entries, interval.start);
        this.appendRange(fragment, current_page, 0, end, {classes:'sp'});
        if(this.opts.num_edge_entries < interval.start && this.opts.ellipse_text)
        {
        $(""+this.opts.ellipse_text+"").appendTo(fragment);
        }
        }
        // Generate interval links
        this.appendRange(fragment, current_page, interval.start, interval.end);
        // Generate ending points
        if (interval.end < np && this.opts.num_edge_entries > 0)
        {
        if(np-this.opts.num_edge_entries > interval.end && this.opts.ellipse_text)
        {
        $(""+this.opts.ellipse_text+"").appendTo(fragment);
        }
        begin = Math.max(np-this.opts.num_edge_entries, interval.end);
        this.appendRange(fragment, current_page, begin, np, {classes:'ep'});

        }
        // Generate "Next"-Link
        if(this.opts.next_text && (current_page < np-1 || this.opts.next_show_always)){
        fragment.append(this.createLink(current_page+1, current_page, {text:this.opts.next_text, classes:"next"}));
        }
        $('a', fragment).click(eventHandler);
        return fragment;
        }
        });

    // Extend jQuery
    $.fn.pagination = function(maxentries, opts){

    // Initialize options with default values
    opts = $.extend({
        items_per_page:1,
        num_display_entries:4,
        current_page:0,
        num_edge_entries:1,
        link_to:"#",
        prev_text:"Prev",
        next_text:"Next",
        ellipse_text:"...",
        prev_show_always:true,
        next_show_always:true,
        renderer:"defaultRenderer",
        show_if_single_page:false,
        load_first_page:false,
        callback:function(){return false;}
    },opts||{});
    
    var containers = this,
        renderer, links, current_page;
    
    //goto
    

    $(".page-btn").one("click",function(){
    var allPage = $(".allPage").text();
    //console.log(allPage);
    var goPage = $(".page-go input").val() - 1; //跳转页数
    if(goPage > -1 && goPage < allPage){
    opts.current_page = goPage;
    $("#Pagination").pagination(allPage,opts);
    }else {
    $("#Pagination").pagination(allPage);
    }
    //清空用户跳转页数
    $(".page-go input").val("");
    });

    /**
     * This is the event handling function for the pagination links. 
     * @param {int} page_id The new page number
     */
    function paginationClickHandler(evt){
        var links, 
            new_current_page = $(evt.target).data('page_id'),
            continuePropagation = selectPage(new_current_page);
        if (!continuePropagation) {
            evt.stopPropagation();
        }
        return continuePropagation;
    }
    
    /**
     * This is a utility function for the internal event handlers. 
     * It sets the new current page on the pagination container objects, 
     * generates a new HTMl fragment for the pagination links and calls
     * the callback function.
     */
    function selectPage(new_current_page) {
        // update the link display of a all containers
        containers.data('current_page', new_current_page);
        links = renderer.getLinks(new_current_page, paginationClickHandler);
        containers.empty();
        links.appendTo(containers);
        // call the callback and propagate the event if it does not return false
        var continuePropagation = opts.callback(new_current_page, containers);
        return continuePropagation;
    }
    
    // -----------------------------------
    // Initialize containers
    // -----------------------------------
            current_page = parseInt(opts.current_page);
    containers.data('current_page', 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;
    
    if(!$.PaginationRenderers[opts.renderer])
    {
        throw new ReferenceError("Pagination renderer '" + opts.renderer + "' was not found in jQuery.PaginationRenderers object.");
    }
    renderer = new $.PaginationRenderers[opts.renderer](maxentries, opts);
    
    // Attach control events to the DOM elements
    var pc = new $.PaginationCalculator(maxentries, opts);
    var np = pc.numPages();
    containers.bind('setPage', {numPages:np}, function(evt, page_id) { 
            if(page_id >= 0 && page_id < evt.data.numPages) {
                selectPage(page_id); return false;
            }
    });
    containers.bind('prevPage', function(evt){
            var current_page = $(this).data('current_page');
            if (current_page > 0) {
                selectPage(current_page - 1);
            }
            return false;
    });
    containers.bind('nextPage', {numPages:np}, function(evt){
            var current_page = $(this).data('current_page');
            if(current_page < evt.data.numPages - 1) {
                selectPage(current_page + 1);
            }
            return false;
    });
    
    // When all initialisation is done, draw the links
    links = renderer.getLinks(current_page, paginationClickHandler);
    containers.empty();
    if(np > 1 || opts.show_if_single_page) {
        links.appendTo(containers);
    }
    // call callback function
    if(opts.load_first_page) {
        opts.callback(current_page, containers);
    }
    

    } // End of $.fn.pagination block

})(jQuery);

7个回答

D8518759
D8518759   2017.01.11 14:28

你可以用layer分页插件实现啊

xgy667788
xgy667788   2017.01.11 14:49

为什么不自己写一个呢。判定json数据的数据量或者id量,然后除以你每页的数据量向下取整就是你的分页数,自己用span循环插入页码用jq绑定页码不就得了~

qq_37011988
qq_37011988   2017.01.11 14:56

规定用的是这个,我到分页绑定里时不会写了$("#Pagination").pagination();

My_dream014
My_dream014   2017.01.11 15:12

原来自己也做过这样的,简单讲一下思路吧,首先不可能完全用js实现分页功能的,你需要用jsp实现数据库里相关表的数据数目查询,得到总条数,然后设置每页要显示的条数,然后利用SQL语句的limit限制条件,实现每页显示的条数,比如第一页显示的是0-4,第二页就要4-8。然后就是分页的连接,一定要设置本页面。

qq_37011988
qq_37011988   2017.01.11 15:26

分页效果已有,就是不会设置jsp页面,怎么控制页面里的内容上下分页

$(document).ready(function() { $("#Pagination").pagination("${tbbwperson.totalPage}"); });

分了15页,怎么让内容上下翻页?

welan123123
welan123123   2017.01.11 17:24

推荐使用jqgrid,何必自己写代码呢,能用插件就用插件啊

qq_37011988
qq_37011988   2017.01.13 11:28

用的就是插件,还规定要这样的样式,现在还是不能上下翻页

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!