js分页

 

$.fn.pageview = function(){
    this.each(function(){
        var $box = $(this);
        var type = $box.attr('data-type');
        var data = product[type];
        var prod_count = data.length;
        var curr_show_num = 5; // 每页显示条数
        var total_page = Math.ceil(prod_count / curr_show_num);
        var page_vis_num = 3; // 页码显示个数

        $box.append(_build_page(1,page_vis_num));
        _build_tab(1);

        $box.on('click','.page-show li[i]',function(){
            var $t = $(this);
            var type = $t.attr('i');
            var curr = +$('li.on',$box).attr('i');
            if ( isNaN(+type) ){
                switch(type){
                    case 'first':
                        type = 1;break;
                    case 'prev':
                        type = curr-1;break;
                    case 'next':
                        type = curr+1;break;
                    case 'last':
                        type = total_page;break;
                }
            }
            type = +type;
            $t.closest('.page-show').remove();
            _build_tab(type);
            $box.append(_build_page(type,page_vis_num))
        });

        function _build_tab(curr_page){
            var htm = "<tr><td>图片</td><td>型号</td><td>库存</td><td>货期</td><td>价格（含税）</td><td>操作</td></tr>";
            var start = curr_page * curr_show_num - curr_show_num;
            var end = start + curr_show_num;
            for ( ; start < end && data[start]; start++ ){
                htm += '<tr><td><a data-goodsid='+data[start].goods_id+' data-goodsname="'+data[start].goods_name+'" href=/'+encodeURIComponent(data[start].goods_name)+'.html><img class="lazy" data-original="/api/goodsthumb.html?goods_name='+data[start].goods_name+'&goods_id='+data[start].goods_id+'"></a></td><td>'+data[start].goods_name+'</td><td>'+data[start].stock_number+'</td><td>'+data[start].dt_cn+'</td><td>'+_p(data[start].extra_data.price)+'</td><td><a data-goodsid='+data[start].goods_id+' data-goodsname="'+data[start].goods_name+'" href=/'+encodeURIComponent(data[start].goods_name)+'.html class="ui-button ui-button-lred">加入购物车</a></td></tr>'
            }
            $('tbody',$box).html(htm);
            lazy();
        }
        function _p(d) {
            var h = "";
            for ( var i = 0; d[i]; i++ ) {
                h += d[i][0] + '+<span class="g-ml10">' + d[i][3] + '</span><br>'
            }
            return h;
        }
        function _build_page(curr_page,vis_num){
            var p = '<div class="page-show">'+prod_count+'个销售产品'+curr_page+'/'+total_page
                   +'<ul>'
                   +( curr_page > vis_num ? '<li i="first">首页</li>' : '' )
                   +( curr_page > 1 ? '<li i="prev">上一页</li>' : '' );
            var start = curr_page - Math.floor(vis_num/2);
            start = start <= 0 ? 1 : start;
            if ( total_page < vis_num ) {
                for ( var i = 0; i < total_page; i++ ){
                    p += '<li'+ ( start === curr_page ? ' class="on"' : '' ) +' i='+start+'>'+ start +'</li>';
                    start++;
                }
            } else {
                var end = start + vis_num - 1;
                if ( end > total_page  ){
                    start -= (end - total_page);
                }
                for ( var i = 0; i < vis_num; i++ ){
                    p += '<li'+ ( start === curr_page ? ' class="on"' : '' ) +' i='+start+'>'+ start +'</li>';
                    start++;
                }
                p += ( curr_page < total_page ? '<li i="next">下一页</li>' : '' )
                    + ( curr_page < total_page - vis_num ? '<li i="last">最后一页</li>' : '' )
                    +'</ul></div>';
            }
            return p;
        }
    })
}
$('.J_page_view[data-type]').pageview();