表格分页2

最新推荐文章于 2021-02-15 11:33:01 发布
最新推荐文章于 2021-02-15 11:33:01 发布
阅读量493 收藏
点赞数
分类专栏： jquery 文章标签： table 分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weilai_zhilu/article/details/53504664
版权

一、效果图



二、html页面代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>数据表格</title>
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script src="../js/jquery-2.1.0.min.js"></script>
		<link href="../css/table.css" type="text/css" rel="stylesheet">
		<script type="text/javascript" src="../js/table.js"></script>
	</head>

	<body οnlοad="teacherList()">
		<table id="teacherTable" class="main_table" border="1">
			<thead>
				<tr>
					<th><input type="checkbox" style="z-index: 10px;"></th>
					<th>姓名</th>
					<th>登录名</th>
					<th>性别</th>
					<th>职称</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		
		<div id="padding" style="padding-left: 5px; padding-top: 10px;padding-bottom: 40px;"></div>

		<script>
			/**
			 * 老师列表
			 * 
			 * @param searchText 搜索的文本
			 */
			function teacherList(searchText) {
				var fun = function formatterColumn(index) {
					var row = getRowData(index);
					return "<a class='btn-but' href='javascript:openTeacherEditPage(" + row.id + ")'" + ">修改</a> \
				<a class='btn-but' href='javascript:resetPassword(" + row.userId + ")'" + ">重置密码</a> \
				<a class='btn-but' href='javascript:deleteOne(" + row.id + ")'" + ">删除</a>";
				};

				var genderFun = function formatterColumn(index) {
					var row = getRowData(index);
					if(row.gender == "Male") {
						return "男";
					} else {
						return "女";
					}
				};

				if(!searchText) {
					searchText = '';
				}
				var params = {
					"search": searchText
				};

				tableData("../json/teacher.json", params, 1, 10, "teacherTable", ["name", "loginName", "gender", "position", "action"], {
						"action": fun,
						"gender": genderFun
					},
					"id",
					"id",
					"desc"
				);
			}
		</script>
	</body>

</html>


三、css样式 tables.css

@CHARSET "UTF-8";
* {
	margin: 0;
	padding: 0;
}

.main_table {
	border: 1px solid #0058a3;
	border-collapse: collapse;
	background-color: #eaf5ff;
	border-color: blue;
	padding: 2px;
	text-align: center;
}

.main_table caption {
	padding-bottom: 5px;
	font: bold 1.4em;
	text-align: left;
}

.main_table th {
	border: 1px solid #ddd;
	/* 行名称边框 */
	background-color: #fff;
	/* 行名称背景色 */
	color: #333;
	/* 行名称颜色 */
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 12px;
	padding-right: 12px;
	text-align: center;
}

.main_table td {
	border: 1px solid #ddd;
	/* 单元格边框 */
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.main_table tr.altrow {
	background-color: #c7e5ff;
	/* 隔行变色 */
}

.button_border {
	height: 30px;
	width: 30px;
	border: 1px solid #ddd;
	background-color: white;
}

.align_left {
	float: right;
}

.btn-but {
	padding: 5px 15px;
	border-radius: 4px;
	background: #d9534f;
	border: 0px;
	outline: none;
	cursor: pointer;
	color: #fff;
	height: 30px;
	text-decoration: initial;
}

.altroww {
	background: #fff;
}

.altroww:hover {
	background: #f2f2f2;
}

四、js脚本 table.js 

var URL;	//请求地址
var PARAMS;	//请求条件参数
var PAGENUM;	//起始页
var PAGESIZE;	//每页显示的条数
var TABLEID;	//表格ID
var COLUMNS;	//显示列所对应的属性字段名
var TOTAL;	//查询的总条数
var PAGETOTAL;	//总页数
var COLUMNFORMAT;	//显示的格式
var ROWSDATA;	//列表数据
var IDNAME;	//主键名称
var SORT;	//排序字段
var ORDER;	//排序方式

/**
 * 分页列表
 * 
 * @author 周化益
 * @param url 请求地址
 * @param params 请求条件参数
 * @param pageNum 起始页
 * @param pageSize 每页显示的条数
 * @param tableId 表格ID
 * @param columns 显示列所对应的属性字段名
 * @param columnFormat 字段转换函数
 * @param IdName 主键ID
 * @param sort 排序字段
 * @param order 排序方式
 */
function tableData(url,params,pageNum,pageSize,tableId,columns,columnFormat,IdName,sort, order) {
	if(url.indexOf("?") > 0) {
		url = url + "&";
	} else {
		url = url + "?";
	}
	URL = url; PARAMS = params; PAGENUM = pageNum; PAGESIZE = pageSize;
	TABLEID = tableId; COLUMNS=columns; IDNAME=IdName;COLUMNFORMAT = columnFormat;
	SORT = sort; ORDER = order;
	if(sort) {
		params['sort'] = sort;
		if(order) {
			params['order'] = order;
		}
	} else {
		params['sort'] = "id";
		params['order'] = "desc";
	}
	
	
	
	$.getJSON(url+'page='+pageNum+'&rows='+pageSize, params, function(data){
		var rowStr = '';
		var checkbox = $("#" + tableId + " thead th:first input");
		var ck = checkbox.attr("type") == "checkbox";
		if(!data) {
			ROWSDATA = [];
			TOTAL = 0;
		} else {
			ROWSDATA = data.rows ? data.rows : [];
			TOTAL = data.total ? data.total : 0;
		}
		
		var dataLength = ROWSDATA.length;
		if(dataLength == TOTAL) {
			var rowsTemp = ((pageNum - 1) * pageSize);
			var num = TOTAL - rowsTemp;
			if(num == TOTAL) {
				if(num > pageSize) {
					num = pageSize;
				}
			}
			var dataTemp = [];
			for(var i = 0; i < num; i++) {
				dataTemp[i] = ROWSDATA[rowsTemp + i]
			}
			ROWSDATA = dataTemp;
		}
		
		PAGETOTAL = parseInt(TOTAL/pageSize);
		if(TOTAL%pageSize > 0) {
			PAGETOTAL++;
		}
		
		$.each(ROWSDATA, function(i, n) {
			var row = ROWSDATA[i];
			if(i%2 == 0) {
				rowStr += '<tr class="altroww">';
			} else {
				rowStr += '<tr class="altroww">';
			}
			
			if(ck) {
				rowStr += "<td><input type='checkbox' name='ck' value="+row[IdName]+"></td>";
			}
			
			$.each(columns, function(j, n) {
				if(columnFormat[n]) {
					rowStr += '<td>'+columnFormat[n](i)+'</td>';
				} else {
					if(row[n] || row[n]==0) {
						rowStr += '<td>'+row[n]+'</td>';
					} else {
						rowStr += '<td></td>';
					}
				}
			});
			rowStr += '</tr>';
		});
		
		if(ck) {
			checkbox.click(function() {
				var that = this;
				$(this).closest('table').find('tr > td:first-child input:checkbox').each(function() {
					this.checked = that.checked;
					$(this).closest('tr').toggleClass('selected');
				});
			});
		}
		
		$('#' + tableId + ' tbody').html(rowStr);
		
		var padding = '<div style="float:left">\
			<input style="height: 30px;border: 1px solid #ddd;background-color: white;"\
			type="button" id="upPage" value=" << 上一页  " οnclick="upPage()"/> ';
		var total_num = PAGETOTAL-PAGENUM;
		
		if(PAGENUM < 5 && PAGETOTAL > 8) {
			for (var i = 1; i < 8; i++) {
				padding += '<input class="button_border" type="button" id="page' + i + '" value = "' + i + '" \
				οnclick="clickPadding(' + i + ')"/> ';
			}
			padding += '... <input class="button_border" type="button" id="page' + PAGETOTAL + '" value = "' + PAGETOTAL + '" \
			οnclick="clickPadding(' + PAGETOTAL + ')"/> ';
		} else if(total_num > 4 && PAGETOTAL > 8) {
			padding += '<input class="button_border" type="button" id="page1" value ="1" \
			οnclick="clickPadding(1)"/> ... ';
			for (var i = -3; i < 3 + 1; i++) {
				padding += '<input class="button_border" type="button" id="page' + (PAGENUM + i) + '" value = "' + (PAGENUM + i) + '" \
				οnclick="clickPadding(' + (i + PAGENUM) + ')"/> ';
			}
			padding += '... <input class="button_border" type="button" id="page' + PAGETOTAL + '" value = "' + PAGETOTAL + '" \
			οnclick="clickPadding(' + PAGETOTAL + ')"/> ';
		} else if(total_num <= 4 && PAGETOTAL > 8) {
			padding += '<input class="button_border" type="button" id="page1" value ="1" \
				οnclick="clickPadding(1)"/> ... ';
				for (var i = -3; i < total_num + 1; i++) {
					padding += '<input class="button_border" type="button" id="page' + (PAGENUM + i) + '" value = "' + (PAGENUM + i) + '" \
					οnclick="clickPadding(' + (i + PAGENUM) + ')"/> ';
				}
		} else {
			for (var i = 1; i <= PAGETOTAL; i++) {
				padding += '<input class="button_border" type="button" id="page' + i + '" value = "' + i + '" \
				οnclick="clickPadding(' + i + ')"/> ';
			}
		}
		
		padding += '<input style="height: 30px;border: 1px solid #ddd;background-color: white;"\
			 type="button" id="nextPage" value=" 下一页 >> " οnclick="nextPage()"/></div>';
		padding += '<div style="float:right"><span class="align_left">页码\
			<input type="text" class="button_border" id="inputPage" style="width:40px;height:25px;" value="'+PAGENUM+'">'+
			'<a href="javaScript:clickPadding($('+"'#inputPage'"+').val())" style="color:black;text-decoration: initial;">确认</a>,共'+TOTAL+'条数</span></div>';
			
		$('#padding').html(padding);
		
		$('#' + tableId).css("width","100%");

		$('#padding').css("width","90%");
		
		if(PAGENUM == PAGETOTAL) {
			$('#nextPage').attr("disabled","disabled").css("background-color","#F5F5F5")
			.css("border","1px solid gray");
		}
		
		if(PAGENUM == 1){
			$('#upPage').attr("disabled","disabled").css("background-color","#F5F5F5")
			.css("border","1px solid gray");
		}
		
		$("#page"+PAGENUM).attr("disabled","disabled").css({"background-color":"#d9534f","color":"#fff"});

		 /*JQuery 限制文本框只能输入数字*/
	    $("#inputPage").keyup(function(event) {
	    	$(this).val($(this).val().replace(/[^0-9.]/g,''));
			if(event.keyCode == 13){
		    	var pageNum = $("#inputPage").val() > PAGETOTAL ? PAGETOTAL : $("#inputPage").val();
		    	pageNum = pageNum == 0 ? 1 : pageNum;
		    	tableData(URL, PARAMS, pageNum, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);
		    }
	    }).bind("paste",function(){  //CTR+V事件处理    
	        $(this).val($(this).val().replace(/[^0-9.]/g,''));     
	    }).css("ime-mode", "disabled"); //CSS设置输入法不可用 
	}, "json");
}

/**
 * 下一页
 */
function nextPage() {
	PAGENUM = PAGENUM + 1;
	tableData(URL, PARAMS, PAGENUM, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);
}

/**
 * 上一页
 */
function upPage() {
	PAGENUM = PAGENUM - 1;
	tableData(URL, PARAMS, PAGENUM, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);
}

/**
 * 单击的页数
 * @param pageNum 点击的页数
 */
function clickPadding(pageNum) {
	if(pageNum > PAGETOTAL) {
		pageNum = PAGETOTAL;
	} else if (pageNum < 1) {
		pageNum = 1;
	}
	tableData(URL, PARAMS, pageNum, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);
}

/**
 * 刷新表格
 */
function CommonRefreshTable() {
	tableData(URL, PARAMS, PAGENUM, PAGESIZE, TABLEID, COLUMNS,COLUMNFORMAT,IDNAME, SORT, ORDER);
}

/**
 * 获取列表数据
 * @author 周化益
 * @param rowsData 
 * @param index
 * @returns 列表数据
 */
function getRowData(index) {
	if(index || index == 0) {
		return ROWSDATA[index];
	} else {
		return ROWSDATA;
	}
}

五、json数据    teacher.json

{
    "total": 15,	
    "rows": [
        {
            "gender": "Male",
            "loginName": "2222",
            "name": "修改测试老师",
            "id": 3940,
            "position": "111",
            "userId": 4673
        },
        {
            "gender": "Male",
            "loginName": "阿里弟弟",
            "name": "咋了爸爸",
            "id": 3939,
            "position": "校园搞笑组合",
            "userId": 4672
        },
        {
            "gender": "Male",
            "loginName": "方式",
            "name": "的萨芬",
            "id": 3938,
            "position": "",
            "userId": 4670
        },
        {
            "gender": "Male",
            "loginName": "啊啊啊啊",
            "name": "咋了爸爸",
            "id": 3937,
            "position": "啊啊啊啊啊",
            "userId": 4668
        },
        {
            "gender": "Male",
            "loginName": "laosiji",
            "name": "吴振辉",
            "id": 3935,
            "position": "司机",
            "userId": 4665
        },
        {
            "gender": "Male",
            "loginName": "wuwuwu",
            "name": "阿虎哒哒",
            "id": 3926,
            "position": "老司机",
            "userId": 4656
        },
        {
            "gender": "Male",
            "loginName": "罗嘉全",
            "name": "罗嘉全",
            "id": 3922,
            "position": "金牌投顾专家",
            "userId": 3923
        },
        {
            "gender": "Male",
            "loginName": "马建",
            "name": "马建",
            "id": 3914,
            "position": "金牌投顾专家",
            "userId": 3915
        },
        {
            "gender": "Male",
            "loginName": "hulangui",
            "name": "胡兰贵",
            "id": 274,
            "position": "金牌投顾专家",
            "userId": 275
        },
         {
            "gender": "Male",
            "loginName": "hulangui",
            "name": "屈长江",
            "id": 184,
            "position": "金牌分析师",
            "userId": 185
        },
        {
            "gender": "Male",
            "loginName": "houbo",
            "name": "侯波",
            "id": 176,
            "position": "金牌投顾专家",
            "userId": 177
        },
        {
            "gender": "Male",
            "loginName": "quanwei",
            "name": "权卫",
            "id": 168,
            "position": "金牌投顾专家",
            "userId": 169
        },
        {
            "gender": "Female",
            "loginName": "heyanhua",
            "name": "何燕华",
            "id": 160,
            "position": "金牌投顾专家",
            "userId": 161
        },
        {
            "gender": "Male",
            "loginName": "liqiang",
            "name": "李强",
            "id": 152,
            "position": "金牌投顾专家",
            "userId": 153
        },
        {
            "gender": "Male",
            "loginName": "quchangjiang",
            "name": "屈长江",
            "id": 61,
            "position": "金牌投顾专家",
            "userId": 62
        }
    ]
}


到此一个简单的表格就此完成。如有写的不好之处，希望大家提提意见。谢谢！
未来_之路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt表格分页打印
10-19
在实现表格分页打印之前，需要创建一个数据模型，通常是QStandardItemModel或QAbstractTableModel的子类，来存储表格数据。这些模型类提供了与视图（如QTableView）交互的方法，并且可以支持表格的分页显示。 分页...
params详解
热门推荐
qwbtc的博客
04-13 1万+
或 以上二者相同，因为堆跌之后遇见最后一个参数（content或photo）相同时第一个参数自曾([]) params中存储的格式相当与 params = {"utf-8"=>"✓", "body" => [{"te
bootstrap 前端分页
a863922230的专栏
02-15 635
首先的是前端的页面如下： <!DOCTYPE html> <head> <title>账单列表</title> <link rel="stylesheet" href="/static/css/jquery.datetimepicker.css"> <link rel="stylesheet" href="/static/bootstrap.min.css/"> <link rel="style
Bootstrap-table使用小结
BAStriver的博客
09-07 225
 1.首先，先上全部配置： $tomcatBootstrapTable = $("#connectionInstances").bootstrapTable({ // 对应table标签的id url: "dfc/getDFC", // 获取表格数据的url cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认...
js表格分页实现代码
10-29
### JS表格分页实现代码详解 #### 一、前言 在Web开发中，当数据量较大时，一次性展示所有数据不仅会导致页面加载缓慢，还会让用户体验变差。因此，通常采用分页技术来优化这一问题。本文将详细介绍一个简单的...
表格分页效果
07-05
表格分页的基本思想是将大量数据分成多个部分，每次只加载一部分（即一页）到页面上，用户可以通过翻页操作查看其他部分。这既减少了内存占用，又提高了页面响应速度。 2. **JavaScript基础** JavaScript是实现...
Delphi 表格分页控件
07-14
(1)、使用许可 您可以自由复制、分发、修改本源码，但您的修改应该反馈给作者，并允许作者在必要时， 合并到本项目中以供使用，合并后的源码同样遵循本版权声明...本产品使用的分页控件(TDevDataPager)版权归作者所有。
Unity 动态绘制表格 表格分页
03-28
Unity 动态绘制表格；动态生成行信息；动态选中/取消选中行； 动态表格分页；支持查看总页数，查看当前页，翻页（上一页，下一页，首页，尾页），根据后台数据填充表格内容等功能。
一个简单的树形菜单
未来_之路的博客
12-07 6364
一个简单的属性菜单
表单数据填充
未来_之路的博客
02-27 779
表单数据填充
时间戳转日期格式字符串
未来_之路的博客
11-23 382
/** * 时间转换 * * @author zhy * @param date传入的日期 * @returns {String} 返回字符串格式日期 */ function formatDate(date) { var now = new Date(date); var year = now.getFullYear(); var month = now.getMonth(
表格分页
未来_之路的博客
11-23 366
var URL; //请求地址 var WHERESQL; //请求条件参数 var PAGENUM; //起始页 var PAGESIZE; //每页显示的条数 var TABLEID; //表格ID var COLUMNS; //显示列所对应的属性字段名 var TOTAL; //查询的总条数 var PAGETOTAL; //总页数 var COLUMNFORMAT; //显示的格式 var
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
暂存暂存暂存暂存暂存暂存暂存暂存
07-31
暂存暂存暂存暂存暂存暂存暂存暂存
表格分页 flask
07-28
在Flask中实现表格分页通常需要以下步骤： 1. 安装所需的依赖：在你的Flask项目中，你可以使用Flask插件或者其他第三方库来实现表格分页。一些常用的插件包括Flask-Paginate和Flask-Bootstrap。 2. 创建表格：你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值