html分页插件
html分页插件
百世经纶一页书梵天 发表于1年前
html分页插件
  • 发表于 1年前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   


<!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>

 

共有 人打赏支持
粉丝 3
博文 65
码字总数 46355
×
百世经纶一页书梵天
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: