当前位置: 首页 > news >正文

html分页插件

2019独角兽企业重金招聘Python工程师标准>>> hot3.png


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>云产品列表查询</title>
		<link rel="stylesheet" type="text/css" href="css/cloud_head_product.css" />
		<link rel="stylesheet" type="text/css" href="css/cloud_product_accepted.css" />
		<link rel="stylesheet" type="text/css" href="css/cloud_footer_product.css" />
		<link rel="stylesheet" href="css/jqpagination.css"/>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script src="js/jquery.jqpagination.min.js"></script>
		<script type="text/javascript">
		 $(document).ready(function(){
    		$(".tiny-radiogroup-horizon button").click(function() {
        		$(this).siblings('button').removeClass('partitions-selected');  // 删除其他兄弟元素的样式
        		$(this).addClass('partitions-selected');                            // 添加当前元素的样式
    		});
    		$('.pagination').jqPagination({
				link_string : '/?page={page_number}',
				current_page: 1, //设置当前页 默认为1
				max_page : 20, //设置最大页 默认为1
				page_string : '当前第{current_page}页,共{max_page}页',
				paged : function(page) {
				      //回发事件。。。
				}
			});
		});
		</script>
	</head>
	<body>
		<div class="cloud-body">
			<!--
            	作者:liuren-mail@163.com
            	时间:2016-11-17
            	描述:这个是head部分
            -->
		<div class="cloud-head">
			<div class="row-fluid">
			<div class="cloud-body-background-color">
				<a class="console-menu-logo"></a>
			</div>
			<div class="pull-left">
				<a class="console-topbar-btn" href="专属云产品.html">
					<span class="hwsicon-frame-image-home">控制中心</span>
				</a>
			</div>
				<div class="menu-dropdown">
				<a class="console-menu-dropdown" href="专属云产品.html">
				</a>
			</div>
			</div>
		</div>
		<!<!--
        	作者:liuren-mail@163.com
        	时间:2016-11-17
        	描述:这是中间部分
        -->
		<div class="cloud-product-body">
			<div class="cloud-product-main">
				<div class="cloud_search">
					<div class="cloud_search_required">
					<span >客户名称:</span>
					<input type="text" value="" />
					</div>
					<div class="cloud_search_required">
					<span >订单流水号:</span>
					<input type="text" value="" />
					</div>
					<div class="cloud_search_required">
					<span >设备号:</span>
					<input type="text" value="" />
					<input type="button" value="查询" class="btn1">
					 </div>
				</div>
				<div class="divisio_line">
					<hr class="hr_line" style="" />
				</div>
				<div class="cloud_search_result">
					<div class="cloud_search_title">
						<ul>
							<li class="data_title_li" style="width: 15%;">客户编码</li>
							<li class="data_title_li" style="width: 15%;">客户名称</li>
							<li class="data_title_li" style="width: 10%;">管控级别</li>
							<li class="data_title_li" style="width: 20%;">客户地址</li>
							<li class="data_title_li" style="width: 10%;">客户联系人</li>
							<li class="data_title_li" style="width: 10%;">联系人电话</li>
							<li class="data_title_li" style="width: 10%;">处理</li>
							<li class="data_title_li" style="width: 10%;">操作</li>
						</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_search_datalist">
						<ul>
							<li class="data_list_li" style="width: 15%;"> <a href="javascript:void(0)" class="order_num">9905060900000008836</a></li>
							<li class="data_list_li" style="width: 15%;">南京市邮政局</li>
							<li class="data_list_li" style="width: 10%;">普通</li>
							<li class="data_list_li" style="width: 20%;">中国,江苏,南京南京市中山路362号</li>
							<li class="data_list_li" style="width: 10%;">张三丰</li>
							<li class="data_list_li" style="width: 10%;">18888888888</li>
							<li class="data_list_li" style="width: 10%;"><a href="javascript:void(0)" class="button_cancel">取消</a></li>
							<li class="data_title_li" style="width: 10%;"><a href="专属云产品.html" class="button_new_project">新建项目</a></li>
							</ul>
					</div>
					<div class="cloud_page">
						<div class="pagination">
						  <a href="#" class="first" data-action="first">&laquo;</a>
						  <a href="#" class="previous" data-action="previous">&lsaquo;</a>
						  <input type="text" readonly="readonly" data-max-page="40" />
						  <a href="#" class="next" data-action="next">&rsaquo;</a>
						  <a href="#" class="last" data-action="last">&raquo;</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--
        	作者:liuren-mail@163.com
        	时间:2016-11-17
        	描述:这是footer部分
        -->
		<div class="cloud-footer"></div>
		</div>
	</body>
</html>

 

转载于:https://my.oschina.net/u/1399599/blog/798470

相关文章:

  • ArcGIS for android访问天地图
  • 4、flume的自定义拦截器Iterceptor
  • Ubuntu Docker安装运行出错Cannot connect to the Docker daemon
  • PSR-2
  • 对象转为json数据
  • Listview_简单使用_(Virtual)
  • NIO源码阅读
  • 上传和设置Mime类型
  • SAP S/4 HANA新变化-FI数据模型
  • 线程与异常
  • 【转载】一个优秀求职者应主动问的一些问题
  • 关于Flux,Vuex,Redux的思考
  • 文字跑马灯
  • 我掌握的linux防火墙知识
  • HttpResponseMessage 调用.net web api
  • $translatePartialLoader加载失败及解决方式
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • CSS选择器——伪元素选择器之处理父元素高度及外边距溢出
  • Elasticsearch 参考指南(升级前重新索引)
  • Go 语言编译器的 //go: 详解
  • JavaScript 事件——“事件类型”中“HTML5事件”的注意要点
  • js中的正则表达式入门
  • node 版本过低
  • sublime配置文件
  • Vue 2.3、2.4 知识点小结
  • Zepto.js源码学习之二
  • 编写高质量JavaScript代码之并发
  • 电商搜索引擎的架构设计和性能优化
  • 动态魔术使用DBMS_SQL
  • - 概述 - 《设计模式(极简c++版)》
  • 使用 Xcode 的 Target 区分开发和生产环境
  • 小程序开发中的那些坑
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • ​水经微图Web1.5.0版即将上线
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (Redis使用系列) SpringBoot中Redis的RedisConfig 二
  • (层次遍历)104. 二叉树的最大深度
  • (附源码)springboot家庭装修管理系统 毕业设计 613205
  • (六)库存超卖案例实战——使用mysql分布式锁解决“超卖”问题
  • (一) storm的集群安装与配置
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • (转)Linux整合apache和tomcat构建Web服务器
  • .cn根服务器被攻击之后
  • .Net IE10 _doPostBack 未定义
  • .Net6支持的操作系统版本(.net8已来,你还在用.netframework4.5吗)
  • .NET的数据绑定
  • .net获取当前url各种属性(文件名、参数、域名 等)的方法
  • .NET委托:一个关于C#的睡前故事
  • .Net小白的大学四年,内含面经
  • .php结尾的域名,【php】php正则截取url中域名后的内容
  • @angular/cli项目构建--Dynamic.Form
  • @converter 只能用mysql吗_python-MySQLConverter对象没有mysql-connector属性’...
  • @FeignClient注解,fallback和fallbackFactory
  • [C#] 我的log4net使用手册
  • [C#基础]说说lock到底锁谁?