js简单的分页

最新推荐文章于 2024-05-09 08:24:21 发布

月落君

最新推荐文章于 2024-05-09 08:24:21 发布

阅读量469

点赞数 3

分类专栏： js 文章标签： js javascript bootstrap

本文链接：https://blog.csdn.net/qq_36735826/article/details/105193242

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

逻辑：从后台取出所有数据，在js进行页数等的判断

jsp页面：

引入bootstrap（主要是为了好看一点）；两个div用于显示当页的数据和页码；当然还要引入js

<div class="row">
	<div class="col-lg-1"></div>
	<div class="col-lg-10" id="Item">
	</div>
</div>
<div class="row">
	<div class="col-lg-1"></div>
	<div class="col-lg-10" style="text-align:center" id="Pagniation"></div>
</div>

js部分

$(function () {
	//定义要用到的变量
    var taskDatalist = {};//存放所有数据
    var pagenumber;//总页数
    var shownumber=6;//每页显示数
    var pagenumbernow=1;//当前页
    initTable();//获取数据并第一次加载页面
	
	function initTable() {
		//获取全部数据并第一次加载
        latool.get({
            url: xxxxxxx,
            success: function (data) {
                taskDatalist=data;
                pagenumbernow=1;
                pagenumber=Math.ceil(taskDatalist.length / shownumber);
                initData(taskDatalist,0,shownumber);
            }
        });
    }
function initData(data,start,end) {
		//传入值为（全部数据，起始第n个，结束第n个）
        var $Item= $('#Item');
        var $Pagniation = $('#Pagniation');
        $Item.html('');
        $Pagniation.html('');
        for (var k=start; k < end&&k < data.length; k++) {
            var value = data[k];
            
			xxxxxxxxxxxxxxx//此处进行画面数据的显示
			
            $Item.append(html);
        }
        //各种页码按鈕
        $Pagniation.append('共'+taskDatalist.length+'条');
        if(parseInt(pagenumbernow)-2>1&&pagenumbernow>3){
            var $btn = $('<button></button>').attr('class', 'btn').attr('data-click-data', 1).text('首页');
            $Pagniation.append($btn);
        }
        if(pagenumbernow>1){
            var $btn = $('<button></button>').attr('class', 'btn').attr('data-click-data', parseInt(pagenumbernow)-1).text('<');
            $Pagniation.append($btn);
        }
        if(pagenumber<=5||pagenumbernow<=3){
            for(var i=1;i<=pagenumber&&i<=5;i++){
                if(i==pagenumbernow){
                    var $btn = $('<button></button>').attr('class', 'btn-lg').attr('data-click-data', i).text(i);
                }else{
                    var $btn = $('<button></button>').attr('class', 'btn').attr('data-click-data', i).text(i);
                }
                $Pagniation.append($btn);
            }
        }else{
            for(var i=parseInt(pagenumbernow)-2;i<=parseInt(pagenumbernow)+2&&i<=pagenumber;i++){
                if(i==pagenumbernow){
                    var $btn = $('<button></button>').attr('class', 'btn-lg').attr('data-click-data', i).text(i);
                }else{
                    var $btn = $('<button></button>').attr('class', 'btn').attr('data-click-data', i).text(i);
                }
                $Pagniation.append($btn);
            }
        }
        if(parseInt(pagenumbernow)+1<pagenumber){
            var $btn = $('<button></button>').attr('class', 'btn').attr('data-click-data', parseInt(pagenumbernow)+1).text('>');
            $Pagniation.append($btn);
        }
        if(parseInt(pagenumbernow)+2<pagenumber){
            var $btn = $('<button></button>').attr('class', 'btn').attr('data-click-data', pagenumber).text('尾页（'+pagenumber+'）');
            $Pagniation.append($btn);
        }
        $Pagniation.append("跳至");
        var $jump = $('<input></input>').attr('id', 'jumppage').attr('type', 'number').attr('style', 'width:5ex;').attr('step', '1').attr('min', '1').attr('max', pagenumber);
        $Pagniation.append($jump);
        $Pagniation.append("页");

        $('#jumppage').bind('keyup', function(e){
        //去除非数值
            this.value=this.value.replace(/[^\d]/g, "",".");
            if(parseInt(this.value)>pagenumber){
                this.value=pagenumber;
            }else if(parseInt(this.value)<0){
                this.value='';
            }
        })
        $('#jumppage').keypress(function(event){
        //敲回车时进行跳页
            if(event.which===13){
                pagenumbernow=this.value;
                initData(taskDatalist,(this.value-1)*shownumber,this.value*shownumber);
            }
            })
    }
    $('#taskPagniation').delegate('button', 'click', function(e){
    //跳页
        pagenumbernow=$(this).attr('data-click-data');
        initData(taskDatalist,(pagenumbernow-1)*shownumber,pagenumbernow*shownumber);
    })
});