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分頁插件