html分页插件
<!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">«</a>
<a href="#" class="previous" data-action="previous">‹</a>
<input type="text" readonly="readonly" data-max-page="40" />
<a href="#" class="next" data-action="next">›</a>
<a href="#" class="last" data-action="last">»</a>
</div>
</div>
</div>
</div>
</div>
<!--
做者：liuren-mail@163.com
时间：2016-11-17
描述：这是footer部分
-->
<div class="cloud-footer"></div>
</div>
</body>
</html>
相关文章
- 1. 分页插件
- 2. pagination分页插件
- 3. 分页插件jquery.pagination.js
- 4. jQuery分页插件
- 5. angular 分页插件
- 6. jquery分页插件
- 7. MyBatis分页插件
- 8. jQuery插件--分页
- 9. 分页插件pageHelper
- 10. Mybatis分页插件
- 更多相关文章...
- • SVG 在 HTML 页面 - SVG 教程
- • Maven 插件 - Maven教程
- • IntelliJ IDEA安装代码格式化插件
- • Git五分钟教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 分页插件
- 2. pagination分页插件
- 3. 分页插件jquery.pagination.js
- 4. jQuery分页插件
- 5. angular 分页插件
- 6. jquery分页插件
- 7. MyBatis分页插件
- 8. jQuery插件--分页
- 9. 分页插件pageHelper
- 10. Mybatis分页插件