JQuery表格分页
开发工具与技术:工具:Visual Studio,技术:JQuery
作者:刘胜
撰写时间:2019-05-08
实现效果是跟幻灯片一样的,当前页CurPage = 1,分页刚显示为第一页,包括页面的大小(条数据)PageSize。从第一条数据开始,也就是索引为0开始StartIndex = (CurPage - 1)* PageSize,一直到当前页CurPage的最后一条数据的索引为EndIndex = CurPage * PageSize - 1;再计算数据Data的大小或者是长度,那么TotalCount = Data.length / PageSize;当点击下一页,计算结果为:CurPage =(CurPage + 1),StatIndex 开始检索到 EndIndex 结束检索。从而实现分页的效果了!
实现的Style样式:
<style>
.income_box {
max-height: 158px;
min-height: 133px;
height: 144.477999px;
overflow: hidden;
position: relative;
margin: 0 auto;
width: 795px;
}
.colgroup1, .colgroup2 {
width: 15%;
}
.colgroup3, .colgroup4, .colgroup5, .colgroup6 {
width: 14%;
}
.income_table {
position: absolute;
top: 0;
left: 0;
}
.pptv_pages .pages {
display: inline-block;
top: 20px;
padding: 4px 0;
height: 38px;
overflow: hidden;
position: relative;
}
.pptv_pages .inner_pages {
display: inline-block;
position: absolute;
top: 12px;
height: 38px;
}
.buttons {
padding:0px;
bottom: 20px;
right: 10px;
}
.buttons li {
width: 21px;
line-height: 24px;
font-size: 12px;
text-align: center;
float: left;
color: #337ab7;
background-color: #fff;
margin-left: 5px;
cursor: pointer;
list-style:none;
display:block;
border: 1px solid #ddd;
}
.buttons li.current {
color:#fff;
background-color: #337ab7;
border-color: #337ab7;
}
.leftList {
width:260px;
position:relative;
padding:0px;
top: 32px;
left: 1px;
}
#startPages li {
width:53px;
height:26px;
line-height:25px;
text-align: center;
float: left;
list-style:none;
display:block;
margin-left:4px;
font-size:12px;
cursor: pointer;
font-family: 微软雅黑, Verdana, sans-serif, 宋体, serif;
}
#startPages li:nth-child(1),#startPages li:nth-child(2) {
color:#333;
background-color: #fff;
border: 1px solid #ddd;
}
#startPages li:nth-child(3) {
color: #fff;
background: #337ab7;
}
.rightList {
width: 260px;
position: relative;
padding: 0px;
bottom: 22px;
left: 300px;
}
#endPages li {
width:53px;
height:26px;
line-height:25px;
text-align: center;
float: left;
cursor: pointer;
list-style:none;
display:block;
margin-left:4px;
font-size:12px;
font-family: 微软雅黑, Verdana, sans-serif, 宋体, serif;
}
#endPages li:nth-child(1) {
color: #fff;
background-color: #337ab7;
}
#endPages li:nth-child(2) {
color:#333;
border:none!important;
}
#endPages li:nth-child(2) select option {
border: 1px solid #ddd;
}
</style>
实现JQuery的Body样式
<div style="height:29px;position: relative;margin:0 auto;width:795px;">
<table class="ad_list ad_link bsgrid">
<colgroup class="colgroup1"></colgroup>
<colgroup class="colgroup2"></colgroup>
<colgroup class="colgroup3"></colgroup>
<colgroup class="colgroup4"></colgroup>
<colgroup class="colgroup5"></colgroup>
<colgroup class="colgroup6"></colgroup>
<tr><th>分会账号</th><th>名称</th><th>充值总额</th><th>充值次数</th><th>注册人数</th><th>注册IP数</th><th>日期</th></tr>
</table>
</div>
<div class="income_box" id="income_box">
<table class="ad_list ad_link income_table bsgrid" id="income_table">
<colgroup class="colgroup1"></colgroup>
<colgroup class="colgroup2"></colgroup>
<colgroup class="colgroup3"></colgroup>
<colgroup class="colgroup4"></colgroup>
<colgroup class="colgroup5"></colgroup>
<colgroup class="colgroup6"></colgroup>
<tr><td>abcxd1</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd2</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd3</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd4</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd1</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd2</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd3</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd4</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd2</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd3</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
<tr><td>abcxd4</td><td>是对方即</td><td>1000</td><td>50</td><td>60</td><td>60</td><td>2016.08.05</td></tr>
</table>
</div>
<div class="pptv_pages" id="pages_box" style="width:886px;margin:0 auto">
<div class="pptv_pages">
<span></span>
<span></span>
<div class="leftList">
<ul id="startPages">
<li></li>
<li></li>
<li class="prev">上一页</li>
</ul>
</div>
<div class="pages">
<ul class="inner_pages J_pages buttons"></ul>
</div>
<div class="rightList">
<ul id="endPages">
<li class="next">下一页</li>
<li><select style="height: 24px;" id="select_pages"></select></li>
</ul>
</div>
</div>
</div>
** 实现的JQuery代码**
<script>
$(function () {
$.post("/Tasktable/mydll", function () { });
});
var $income_box = $('#income_box'),//表格盒区域
$income_table = $('#income_table');//统计表格
var _height = $income_box.height(),//翻页高度
trLen = $income_table.find('tr').length,//总记录条数
perPage = 5,//每页显示行数
_left = 26.355;//页码移动距离
var countPage = Math.ceil(trLen / perPage);//总页数
var page = 1;//起始页
var $startPages = $('#startPages');
//分页区
var $pages_box = $('#pages_box');
var $select_pages = $('#select_pages');
var $inner_pages = $pages_box.find('.J_pages');
$startPages.find('li').eq(0).text('共' + trLen + '条');//条数
$startPages.find('li').eq(1).text(page + '/' + countPage + '页');//页数
var aPages = ['<li class="current">1</li>'];
var optionPages = ['<option value="1" selected="selected">第1页</option>'];
for (var i = 2; i <= countPage; i++) {
aPages.push('<li>' + i + '</li>');
optionPages.push('<option value="' + i + '">第' + i + '页</option>');
}
$inner_pages.append(aPages.join(''));
$select_pages.append(optionPages.join(''));
if (countPage <= 5) {//总页数小于5页
$pages_box.find('.pages').width(29 * countPage);
} else {
$pages_box.find('.pages').width(140);
}
//点击某一页
$inner_pages.find('li').off().on('click', function (e) {
if (!$income_table.is(":animated")) {
$(this).addClass('current').siblings().removeClass('current');
var index = $(this).index();
page = index + 1;
//表格移动
$income_table.stop().animate({ 'top': -1 * (_height * index) + "px" }, 500);
$select_pages.val(index + 1);
$startPages.find('li').eq(1).text(page + '/' + countPage + '页');//页数
if (countPage > 5) {
if (page > 3 && page < countPage - 1) {
$inner_pages.stop().animate({ 'left': -1 * (_left * (page - 3)) + "px" }, 500);
}
if (page == 1 || page == 2 || page == 3) {
$inner_pages.stop().animate({ 'left': 0 + "px" }, 500);
}
if (page == countPage || page == countPage - 1 || page == countPage - 2) {
$inner_pages.stop().animate({ 'left': -1 * (_left * (countPage - 5)) + "px" }, 500);
}
}
}
});
//点击下拉页中的某一页
$select_pages.on('change', function (e) {
if (!$income_table.is(":animated")) {
var index = parseInt($(this).val());
page = index;
$inner_pages.find('li').eq(index - 1).addClass('current').siblings().removeClass('current');
//表格移动
$income_table.stop().animate({ 'top': -1 * (_height * (index - 1)) + "px" }, 500);
$startPages.find('li').eq(1).text(page + '/' + countPage + '页');//页数
if (countPage > 5) {
if (page > 3 && page < countPage - 1) {
$inner_pages.stop().animate({ 'left': -1 * (_left * (page - 3)) + "px" }, 500);
}
if (page == 1 || page == 2 || page == 3) {
$inner_pages.stop().animate({ 'left': 0 + "px" }, 500);
}
if (page == countPage || page == countPage - 1 || page == countPage - 2) {
$inner_pages.stop().animate({ 'left': -1 * (_left * (countPage - 5)) + "px" }, 500);
}
}
}
});
//上一页
$pages_box.find('.prev').off().on('click', function (e) {
if (!$income_table.is(":animated")) {
if (page == 1) {
$income_table.stop();
$inner_pages.stop();
} else {
$income_table.animate({ 'top': "+=" + _height + "px" }, 500);
if (countPage > 5) {
if (page > 3 && page < countPage - 1) {
$inner_pages.animate({ 'left': "+=" + _left + "px" }, 500);
}
if (page == 1 || page == 2 || page == 3) {
$inner_pages.stop().animate({ 'left': 0 + "px" }, 500);
}
if (page == countPage || page == countPage - 1) {
$inner_pages.stop().animate({ 'left': -1 * (_left * (countPage - 5)) + "px" }, 500);
}
}
page--;
$inner_pages.find('li').eq(page - 1).addClass('current').siblings().removeClass('current');
$select_pages.val(page);
$startPages.find('li').eq(1).text(page + '/' + countPage + '页');//页数
}
}
});
//下一页
$pages_box.find('.next').off().on('click', function (e) {
if (!$income_table.is(":animated")) {
if (page == countPage) {
$income_table.stop();
$inner_pages.stop();
} else {
$income_table.animate({ 'top': "-=" + _height + "px" }, 500);
if (countPage > 5) {
if (page >= 3 && page < countPage - 1) {
$inner_pages.animate({ 'left': "-=" + _left + "px" }, 500);
}
if (page == 1 || page == 2) {
$inner_pages.stop().animate({ 'left': 0 + "px" }, 500);
}
if (page == countPage || page == countPage - 1 || page == countPage - 2) {
$inner_pages.stop().animate({ 'left': -1 * (_left * (countPage - 5)) + "px" }, 500);
}
}
page++;
$inner_pages.find('li').eq(page - 1).addClass('current').siblings().removeClass('current');
$select_pages.val(page);
$startPages.find('li').eq(1).text(page + '/' + countPage + '页');//页数
}
}
});
</script>
要引用一个JQuery插件
<script src="~/Content/js/jquery-1.7.2.min.js"></script>
运行代码结果: