文档章节

html分页插件

百世经纶一页书梵天
 百世经纶一页书梵天
发布于 2016/12/01 20:46
字数 1955
阅读 4
收藏 0
点赞 0
评论 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
博文 65
码字总数 46355
作品 0
海口
程序员
基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

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

walb呀 ⋅ 2017/12/04 ⋅ 0

jQuery分页插件

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

叫我宫城大人 ⋅ 2017/05/04 ⋅ 0

可跳转可异步的分页插件--bPage

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

TerryZ ⋅ 2017/07/16 ⋅ 5

SelectPage v2.4 发布,新增纯下拉列表和关闭分页功能

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

TerryZ ⋅ 2017/09/07 ⋅ 6

28个有用的表格插件推荐

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

小卒过河 ⋅ 2011/07/01 ⋅ 9

pagehelper/Mybatis-PageHelper

Mybatis分页插件 - PageHelper 如果你也在用Mybatis,建议尝试该分页插件,这一定是最方便使用的分页插件。 分页插件支持任何复杂的单表、多表分页,部分特殊情况请看重要提示。 想要使用分页...

java梦想家01 ⋅ 2015/08/03 ⋅ 0

bPage v1.0 发布,可跳转可异步的分页插件

bPage v1.0已发布 更新内容: 插件首个正式版本发布 插件介绍: bPage 基于jQuery、Bootstrap2、3进行开发,支持页面跳转、异步页面、异步数据等多模式的独立分页插件 插件预览效果(分页栏)...

TerryZ ⋅ 2017/07/16 ⋅ 3

一个非常简单的jQuery分页插件

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

wybo521 ⋅ 2016/01/20 ⋅ 3

19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特 ⋅ 2014/04/30 ⋅ 0

多功能下拉分页选择插件 - SelectPage

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

TerryZ ⋅ 2017/06/13 ⋅ 10

没有更多内容

加载失败,请刷新页面

加载更多

下一页

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 56分钟前 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 7

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部