文档章节

html分页插件

百世经纶一页书梵天
 百世经纶一页书梵天
发布于 2016/12/01 20:46
字数 1955
阅读 4
收藏 0

<!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
博文 68
码字总数 46355
作品 0
海口
程序员
基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往...

walb呀
2017/12/04
0
0
jQuery分页插件

开发背景 最近接了一个小型电商网站,各大商品分类都需要用到分页的技巧,虽说我只是个后台汪,但是不想搞前端的后台不是一个好开发。参考了网上的某个简单的分页插件,重新封装了下,支持a...

叫我宫城大人
2017/05/04
0
0
可跳转可异步的分页插件--bPage

bPage 基于jQuery、Bootstrap2、3进行开发,支持页面跳转、异步页面、异步数据等多模式的独立分页插件 插件预览效果(分页栏) 插件使用入门、API文档、使用实例 请访问 https://terryz.git...

TerryZ
2017/07/16
2.6K
5
28个有用的表格插件推荐

OSCHINA曾发布过文章“18个最好的 jQuery 表格插件”,今天再提供一份表格插件的长名单。 28个表格插件,列表如下: Table Sorter Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的...

小卒过河
2011/07/01
4.1K
9
SelectPage v2.4 发布,新增纯下拉列表和关闭分页功能

下拉分页选择插件 SelectPage v2.4 发布了,插件更新内容: 增加pagination参数,指定稿件是否使用分页加载数据,以及显示分页栏 增加listSize参数,指定了不使用分页的列表,显示的高度,单...

TerryZ
2017/09/07
948
6

没有更多内容

加载失败,请刷新页面

加载更多

Flask 开发填坑

插件的选择: flask-security 真的是个鸡肋啊。自带的页面,好丑。还不如用flask-login来做呢。

pearma
26分钟前
0
0
讲述下 :LVM逻辑卷管理遇到的问题

LVM学习逻辑卷管理创建逻辑卷遇到的问题 1 实验环境 系统 内核 发行版本 CentOS 2.6.32-754.2.1.el6.x86_64 CentOS release 6.10 (Final) 由于是最小化安装没有xfs命令,yum安装如下包支持此...

linuxprobe16
今天
0
0
day95-20180922-英语流利阅读-待学习

Hey Jude 半个世纪传唱不衰的背后故事 毛西 2018-09-22 1.今日导读 2004 年,The Beatles 被《滚石》杂志选为“历史上最伟大的 50 位流行音乐家的第一位”。这四名来自英国利物浦的男孩不仅对...

飞鱼说编程
今天
2
0
OSChina 周六乱弹 —— 放假前期焦虑症晚期

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享Matteo的单曲《Panama》: 《Panama》- Matteo 手机党少年们想听歌,请使劲儿戳(这里) @新垣吉衣OSC :我发现只要去有小朋友...

小小编辑
今天
223
10
wait()被notify()后,接着执行wait()后面的语句

wait()被notify()后,接着执行wait()后面的语句

noteman
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部