这篇文章主要介绍了 JS 代码实现 table 数据分页效果的相关资料, 非常不错,代码简答易懂,非常实用,需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
第一个:实现的很常见很简单的显示页数翻页
效果图:
• 这是 HTML 代码,很简单滴(我好像看到了被嫌弃的小眼神)
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-">
- <script src="js/jquery-...js">
- </script>
- <script src="js/demo.js">
- </script>
- <link rel="stylesheet" href="js/demo.css" />
- <title>
- </title>
- </head>
- <body>
- <table width="" border="">
- <thead>
- <tr>
- <th>
- 姓名
- </th>
- <th>
- 性别
- </th>
- <th>
- 编号
- </th>
- <th>
- 年龄
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 张三
- </td>
- <td>
- 男
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- tom
- </td>
- <td>
- 男
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- 李四
- </td>
- <td>
- 男
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- 二蛋
- </td>
- <td>
- 男
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- 二丫
- </td>
- <td>
- 女
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
• 下面就是 JS 代码了
- $(function() {
- var $table = $('table'); //获取表格对象
- var currentPage = ; //设置当前页默认值为
- var pageSize = ; //设置每一页要显示的数目
- $table.bind('paging',
- function() {
- $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + ) * pageSize).show();
- //先将tbody中所有的行隐藏,再通过slice结合当前页数和页面显示的数目展现数据
- });
- var sumRows = $table.find('tbody tr').length; //获取数据总行数
- var sumPages = Math.ceil(sumRows / pageSize); //得到总页数
- var $pager = $('<div class="page"></div>');
- for (var pageIndex = ; pageIndex < sumPages; pageIndex++) {
- $('<a href="#"><span>' + (pageIndex + ) + '</span></a>').bind("click", {
- "newPage": pageIndex
- },
- function(event) {
- currentPage = event.data["newPage"];
- $table.trigger("paging");
- //为每一个要显示的页数上添加触发分页函数
- }).appendTo($pager);
- $pager.append(" ");
- }
- $pager.insertAfter($table);
- $table.trigger("paging");
- });
第二个:实现前进页和后退页
效果图:
• 这是全部代码,用得原生 JS,依然还是很简单滴(好像对原生 js 有种莫名的喜爱,有木有)
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-" />
- <title>
- table分页
- </title>
- </head>
- <body>
- <style type="text/css">
- .tablebox{border:solid px #ddd;} .tablebox td{text-align:center;border:solid
- px #ddd;padding:px;}
- </style>
- <div style="width:px;margin: auto;">
- <table class="tablebox" width="" border="" cellpadding="" cellspacing="">
- <tbody id="table">
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- </tbody>
- </table>
- <div style="height:px;margin:px ;">
- <span id="spanFirst">
- 第一页
- </span>
- <span id="spanPre">
- 上一页
- </span>
- <span id="spanNext">
- 下一页
- </span>
- <span id="spanLast">
- 最后一页
- </span>
- 第
- <span id="spanPageNum">
- </span>
- 页/共
- <span id="spanTotalPage">
- </span>
- 页
- </div>
- </div>
- <script type="text/javascript">
- var theTable = document.getElementById("table");
- var totalPage = document.getElementById("spanTotalPage");
- var pageNum = document.getElementById("spanPageNum");
- var spanPre = document.getElementById("spanPre");
- var spanNext = document.getElementById("spanNext");
- var spanFirst = document.getElementById("spanFirst");
- var spanLast = document.getElementById("spanLast");
- var numberRowsInTable = theTable.rows.length;
- var pageSize = ;
- var page = ;
- //下一页
- function next() {
- hideTable();
- currentRow = pageSize * page;
- maxRow = currentRow + pageSize;
- if (maxRow > numberRowsInTable) maxRow = numberRowsInTable;
- for (var i = currentRow; i < maxRow; i++) {
- theTable.rows[i].style.display = '';
- }
- page++;
- if (maxRow == numberRowsInTable) {
- nextText();
- lastText();
- }
- showPage();
- preLink();
- firstLink();
- }
- //上一页
- function pre() {
- hideTable();
- page--;
- currentRow = pageSize * page;
- maxRow = currentRow - pageSize;
- if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
- for (var i = maxRow; i < currentRow; i++) {
- theTable.rows[i].style.display = '';
- }
- if (maxRow == ) {
- preText();
- firstText();
- }
- showPage();
- nextLink();
- lastLink();
- }
- //第一页
- function first() {
- hideTable();
- page = ;
- for (var i = ; i < pageSize; i++) {
- theTable.rows[i].style.display = '';
- }
- showPage();
- preText();
- nextLink();
- lastLink();
- }
- //最后一页
- function last() {
- hideTable();
- page = pageCount();
- currentRow = pageSize * (page - );
- for (var i = currentRow; i < numberRowsInTable; i++) {
- theTable.rows[i].style.display = '';
- }
- showPage();
- preLink();
- nextText();
- firstLink();
- }
- function hideTable() {
- for (var i = ; i < numberRowsInTable; i++) {
- theTable.rows[i].style.display = 'none';
- }
- }
- function showPage() {
- pageNum.innerHTML = page;
- }
- //总共页数
- function pageCount() {
- var count = ;
- if (numberRowsInTable % pageSize != ) count = ;
- return parseInt(numberRowsInTable / pageSize) + count;
- }
- //显示链接
- function preLink() {
- spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
- }
- function preText() {
- spanPre.innerHTML = "上一页";
- }
- function nextLink() {
- spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
- }
- function nextText() {
- spanNext.innerHTML = "下一页";
- }
- function firstLink() {
- spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>";
- }
- function firstText() {
- spanFirst.innerHTML = "第一页";
- }
- function lastLink() {
- spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>";
- }
- function lastText() {
- spanLast.innerHTML = "最后一页";
- }
- //隐藏表格
- function hide() {
- for (var i = pageSize; i < numberRowsInTable; i++) {
- theTable.rows[i].style.display = 'none';
- }
- totalPage.innerHTML = pageCount();
- pageNum.innerHTML = '';
- nextLink();
- lastLink();
- }
- hide();
- </script>
- </body>
- </html>
以上内容是小编给大家介绍的 JS 代码实现 table 数据分页效果,希望对大家有所帮助,如果大家还有任何问题欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0331/265421.html