文档章节

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
海口
程序员
私信 提问
jQuery分页插件

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

叫我宫城大人
2017/05/04
0
0
基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

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

walb呀
2017/12/04
0
0
可跳转可异步的分页插件--bPage

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

TerryZ
2017/07/16
2.6K
5
一个非常简单的jQuery分页插件

一个非常简单的jQuery分页插件 效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 调用方法: $(".tcdPageCode").createPage({ pageCount:10,...

wybo521
2016/01/20
122
3
多功能下拉分页选择插件 - SelectPage

多功能下拉选择插件 SelectPage 简洁而强大的下拉分页选择器;支持远程数据(AJAX)、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件 入门指南、...

TerryZ
2017/06/13
0
10

没有更多内容

加载失败,请刷新页面

加载更多

分布式之延时任务方案解析

方案分析 (1)数据库轮询 思路 该方案通常是在小型项目中使用,即通过一个线程定时的去扫描数据库,通过订单时间来判断是否有超时的订单,然后进行update或delete等操作 实现 博主当年早期是用...

微笑向暖wx
12分钟前
0
0
博客目录

1.剑指offer目录 剑指offer目录 2.开放的面试题 开放面试题目录

细节探索者
12分钟前
0
0
自定义线程池

自定义线程工厂: public class CustomThreadFactory implements ThreadFactory { private static final Logger LOGGER = LoggerFactory.getLogger(CustomThreadFactory.class); pu......

hensemlee
42分钟前
1
0
记一次oom内核优化记录:vm.lower_zone_protection

情景 最近gitlab服务会偶发性500,当前机器部署了gitlab、nfs等服务,经过排查发现是nfsd引发oom,导致系统运行不畅。处理过程如下: 事故现场 开发在使用gitlab的时候发现,偶发性的出现500...

阿dai
今天
4
0
Spring Batch JSON 支持

Spring Batch 4.1 开始能够支持 JSON 格式了。这个发布介绍了一个新的数据读(item reader)能够读取一个 JSON 资源,这个资源按照下面的格式: [  {    "isin": "123",    ...

honeymose
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部