用有限的按钮分页

时间：2017-02-12 05:50:27

标签： jquery pagination

我正在使用以下代码来分页。我的表有超过200条记录，如果我显示更多不合适的分页按钮。那么可以进行分页，如下图所示。（当我点击下一个按钮时，前一个按钮编号应该更改）

enter image description here 

$(document).ready(function(){
                var table =  $('#myTable');

                var max_size=userDetails.length;
                var sta = 0;
                var elements_per_page = 3;
                var limit = elements_per_page;
                pagination(sta,limit);
                function pagination(sta,limit){
                console.log(sta,limit);
                    for(var i=sta;i<limit;i++){
                    var tab='<tr><td>'+userDetails[i].Id+"\n"+'</td><td>'+userDetails[i].Username+"\n"+'</td><td>'+userDetails[i].Firstname+"\n"+'</td><td>'+userDetails[i].Lastname+"\n"+'</td><td>'
                              +userDetails[i].Email+"\n"+'</td><td>'+userDetails[i].Address+"\n"+'</td><td>'+userDetails[i].Mobilenumber+"\n"+'</td><td>'
                              +userDetails[i].Age+"\n"+'</td><td>'+userDetails[i].Gender+"\n"+'</td></tr>';

                     $('#myTable').append(tab)
                    }
                }
                $('#nextValue').click(function(){
                    var next = limit;
                    if(max_size>=next) {
                    def = limit+elements_per_page;
                    limit = def
                    table.empty();
                    if(limit > max_size) {
                    def = max_size;
                    }
                    pagination(next,def);
                    }
                });
                  $('#PreValue').click(function(){
                    var pre = limit-(2*elements_per_page);
                    if(pre>=0) {
                    limit = limit-elements_per_page;
                    table.empty();
                    pagination(pre,limit); 
                    }
                });
                 var number = Math.round(userDetails.length / elements_per_page);

                 for(i=0;i<=number;i++) {
                  $('.paginationList').append('<button class="btn">'+i+'</button>');
                 }
                 $('.paginationList button').click(function(){
                       var start = $(this).text();
                       table.empty();
                       limit = 3*(parseInt(start)+1) > max_size ? max_size: 3*(parseInt(start)+1)
                      pagination(start*3,limit); 
                 });
});

此处填写完整代码：https://jsfiddle.net/t05bzecz/

1 个答案:

答案 0 :(得分：2)

查看更改。我只是删除了分页按钮代码。 代替按钮，我有一个只读文本框。

请参阅下面的更改代码

var userDetails=[
{
"Id":"1",
"Username":"john",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
},
{
"Id":"2",
"Username":"maro",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
},
{
"Id":"3",
"Username":"maro",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
},
{
"Id":"4",
"Username":"suja",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
},
{
"Id":"5",
"Username":"nicco",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
},
{
"Id":"6",
"Username":"maha",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
},
{
"Id":"7",
"Username":"Dini",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
},
{
"Id":"8",
"Username":"maha",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
},
{
"Id":"9",
"Username":"maro",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
},
{
"Id":"10",
"Username":"krish",
"Firstname":"yyyyy",
"Lastname":"zzzzz",
"Email": "aaa@gmail.com",
"Address":"12345",
"Mobilenumber":"9876543210",
"Age":"20",
"Gender":"male"
}
];

$(document).ready(function(){
				var table =  $('#myTable');

				var max_size=userDetails.length;
				var sta = 0;
          var j=1;
				var elements_per_page = 3;
				var limit = elements_per_page;
         $('.paginationList').append('<input type="text" readonly="readonly" class="btn">');
         $('.paginationList input').val(1);
				pagination(sta,limit);
				function pagination(sta,limit){
                console.log(sta,limit);
               
					for(var i=sta;i<limit;i++){
					var tab='<tr><td>'+userDetails[i].Id+"\n"+'</td><td>'+userDetails[i].Username+"\n"+'</td><td>'+userDetails[i].Firstname+"\n"+'</td><td>'+userDetails[i].Lastname+"\n"+'</td><td>'
					          +userDetails[i].Email+"\n"+'</td><td>'+userDetails[i].Address+"\n"+'</td><td>'+userDetails[i].Mobilenumber+"\n"+'</td><td>'
					          +userDetails[i].Age+"\n"+'</td><td>'+userDetails[i].Gender+"\n"+'</td></tr>';

					 $('#myTable').append(tab)
					}
				}
				$('#nextValue').click(function(){
          
					var next = limit;
					if(max_size>=next) {
            j= eval(j+1);
            def = limit+elements_per_page;
            limit = def
            table.empty();
          
						if(limit > max_size) {
							def = max_size;
            }
            $('.paginationList input').val(j);
						pagination(next,def);
					}
				});
				  $('#PreValue').click(function(){
          
					var pre = limit-(2*elements_per_page);
					if(pre>=0) {
          j = eval(j-1);
					limit = limit-elements_per_page;
					table.empty();
           $('.paginationList input').val(j);
					pagination(pre,limit); 
					}
				});
});
.bgColor,.paginationList input:focus{
    background-color: #137dbd;
    color: #ffffff;
} 
#PreValue,#nextValue{
	border: none;
    height: 34px;
    border-radius: 5px;
}
.paginationList input{
	border:1px solid  #137dbd;
	background: none;
	margin-left: 5px;
}
.padding{
	padding-left: 0;
	padding-right:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-lg-12 col-md-12 col-xs-12 table-responsive">
	<table class="table  table-hover table-bordered">
		<thead>
			<tr class="bgColor">
			    <td>Id</td>
				<td>Username</td>
				<td>Firstname</td>
				<td>Lastname</td>
				<td>Email</td>
				<td>Address</td>
				<td>Mobilenumber</td>
				<td>Age</td>
				<td>Gender</td>
			</tr>
		</thead>
		<tbody id="myTable">
			 
		</tbody>
	</table>
</div>
<div class="col-lg-6">
</div>
<div class="col-lg-6 col-md-6 col-xs-12">
    <div class="col-lg-1 col-md-2 col-xs-6 padding pull-right">
	<button class="col-lg-12 col-xs-12 bgColor" id="nextValue">Next</button>
	</div>	
	<div class="col-lg-1 col-md-2 col-xs-12 paginationList padding">
	</div>
	 <div class="col-lg-1 col-md-2 col-xs-6 padding pull-right">
	<button class="col-lg-12 col-xs-12 bgColor" id="PreValue">Pre</button>
	</div>
</div>

相关问题
最新问题