JQuery实现在分页的时候添加一个设置每页显示多少条数据的功能

[color=olive]尽管现在微博或者SNS类的网站流行一页一页的下拉累加,或者这个是出于放缓用户的浏览速度,而且回看的时候不用重新请求了;但是这是以牺牲页码导航为代价的,因为如果你当前在第二页要到第10页你就得一页一页的下拉。
基于此如果在页码导航的情况下再添加一个设置每页显示多少条数据的功能,那么应该很有灵活性了。下面是浏览器端的JQuery实现:[/color]


<html>

<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">

var pageSize="20";//Pager对象的pageSize属性值

$(document).ready(function(){

//用于页面初始化的时候选中与Pager对象的pageSize属性值相同的option
$(".pageSize").each(function(){
if($(this).val()==pageSize){
$(this).attr("selected","selected");
}
});

//用于设置每页显示的数据条数
$("#pageSizeSelector").change(function (){
alert("value:"+$(this).attr("value"));
//submit();
});

});

</script>
</head>

<body>

<select name="page.pageSize" id="pageSizeSelector">
<option value="10" class="pageSize">10</option>
<option value="20" class="pageSize">20</option>
<option value="30" class="pageSize">30</option>
</select>

</body>

</html>



.
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用boost插件加jQuery代码实现图片分页功能,你需要在页面中引入jQuery、booststrap和所选的分页插件的JS和CSS文件。以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片分页示例</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.5/css/fileinput.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <h1>图片分页示例</h1> <div class="row"> <div class="col-md-8"> <div id="image-list"></div> <ul id="image-pagination" class="pagination"></ul> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script> <script> $(document).ready(function() { // 准备数据 var images = [...]; // 图片数据 var pageSize = 10; // 每页显示的数量 var totalPages = Math.ceil(images.length / pageSize); // 总页数 // 初始化分页插件 $('#image-pagination').bootstrapPaginator({ totalPages: totalPages, currentPage: 1, onPageChanged: function(event, oldPage, newPage) { // 当页码被点击时,更新页面内容 var startIndex = (newPage - 1) * pageSize; var endIndex = startIndex + pageSize; var pageImages = images.slice(startIndex, endIndex); // 显示图片内容 $('#image-list').empty(); $.each(pageImages, function(index, image) { $('#image-list').append('<div class="col-md-3"><img src="' + image.imageUrl + '"></div>'); }); } }); // 初始化页面内容 var pageImages = images.slice(0, pageSize); $('#image-list').empty(); $.each(pageImages, function(index, image) { $('#image-list').append('<div class="col-md-3"><img src="' + image.imageUrl + '"></div>'); }); }); </script> </body> </html> ``` 在这个示例代码中,我们使用了bootstrapPaginator插件来实现分页功能。我们首先准备了图片数据每页显示的数量,然后计算出总页数。接着,我们初始化了分页插件,并绑定了onPageChanged事件。当页码被点击时,我们更新页面内容,显示相应的图片。 需要注意的是,bootstrapPaginator插件需要依赖于bootstrap的CSS和JS文件,以及jQuery库。在这个示例代码中,我们引入了一些其他的boost插件,比如bootstrap-select、bootstrap-datetimepicker、fileinput等。如果你的项目中已经使用了这些插件,你可以根据实际情况来选择是否需要引入这些插件的CSS和JS文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值