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>

运行代码结果：

JQuery表格分页相关推荐

jquery 表格分页等操作实现代码(pagedown，pageup)
jquery 表格分页等操作实现代码(pagedown,pageup) 没什么技术含量,先上图: 思路: 1:获取按键 2:判断当前表格行的位置 HTML结构: 复制代码代码如下: <div ...
基于jquery的无刷新表格分页
2019独角兽企业重金招聘Python工程师标准>>> 效果图 html结构 <table id="cs_table" class="datata ...
jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
jQuery 表格插件
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
jquery 表格自动拆分（方便打印）插件-printTable
/** * jquery 表格打印插件 * * 作者: LiuJunGuang * 日期:2013年6月4日 * 分页样式(需要自定义): * @media print { * .pageBreak ...
Jquery 表格插件DataTables
[转]Jquery 表格插件DataTables 博客分类: Jquery jquerydatatablesjavascript 1.特性可变长度分页: 动态过滤: 多列排序,带数据类型检测功能: ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
插件介绍: DataTables 表格分页
官网: 英文:https://datatables.net/ 中文:http://www.datatables.club/ 引入文件(结合bootstrap样式): css:<link href ...

JQuery表格分页

JQuery表格分页

JQuery表格分页相关推荐

最新文章

热门文章