Jquery 分页案例
Jquery 分页案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery分页</title>
<link href="../../Script/plugins/jquery/paginathing/bootstrap.min.css" rel="stylesheet" />
<!-- 新 Bootstrap 核心 CSS 文件 -->
<!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">-->
<style>
.Pagination {
width: 1000px;
}
</style>
</head>
<body>
<div style="width:80%">
<table id="article_list" cellspacing="0" class="table table-small-font table-bordered table-striped">
<thead>
<tr>
<th data-priority="1">
编号
</th>
<th data-priority="1">
城市
</th>
</tr>
</thead>
<tbody id="contentTbody"></tbody>
</table>
<div class="setPageDiv">
<div class="Pagination" id="pagination"></div>
</div>
</div> <!--<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>-->
<script src="../../Script/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="../../Script/plugins/jquery/paginathing/paginathing.js"></script>
<script src="../../Script/plugins/0com/template-simple.js"></script>
<script src="https://files.cnblogs.com/files/kikyoqiang/silence.min.js"></script>
<script id="test" type="text/html">
{{each list as item}}
<tr>
<td>{{item.name}}</td>
<td>{{item.value}}</td>
<tr>
{{/each}}
</script>
<script type="text/javascript"> $(function () {
SelectLoadTable();
}); function SelectLoadTable() {
var str = "[ { name: '1', value: '0' }, { name: '6101', value: '北京市' }, { name: '6102', value: '天津市' }," +
"{ name: '6103', value: '上海市' }, { name: '6104', value: '重庆市' }, { name: '6105', value: '渭南市' }," +
"{ name: '6106', value: '延安市1' }, { name: '6107', value: '汉中市1' }, { name: '6108', value: '榆林市1' }," +
"{ name: '6106', value: '延安市2' }, { name: '6107', value: '汉中市2' }, { name: '6108', value: '榆林市2' }," +
"{ name: '6106', value: '延安市3' }, { name: '6107', value: '汉中市3' }, { name: '6108', value: '榆林市3' }," +
"{ name: '6106', value: '延安市4' }, { name: '6107', value: '汉中市4' }, { name: '6108', value: '榆林市4' }," +
"{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," +
"{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," +
"{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," +
"{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," +
"{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," +
"{ name: '6109', value: '安康市' }, { name: '6110', value: '商洛市' }]";
//var strs = JSON.parse(str);
var strs = eval('(' + str + ')');
var html = template("test", { list: strs });
$("#contentTbody").html(html);
paginathing("contentTbody", 'Pagination', 5);
}; function paginathing(contentTbodyId, containerClass, limitPagination) {
$("#" + contentTbodyId).paginathing({
perPage: 10, // 每页显示的记录数。
limitPagination: limitPagination, // 可以是false或一个数值。用于限制分页的页码。
prevNext: true, // 是否允许显示前一页按钮。
firstLast: true, // 是否允许显示第一页和最后一页按钮。
prevText: '«', // 前一页按钮上显示的文字。
nextText: '»', // 下一页按钮上显示的文字。
firstText: '首页', // 第一页按钮上显示的文字。
lastText: '末页', // 最后一页按钮上显示的文字。
containerClass: containerClass, // 容器的class名称。
ulClass: 'pagination', // ul元素的class名称。
liClass: 'page', // li元素的class名称。
activeClass: 'active', // 当前分页按钮的class名称。
disabledClass: 'disable', // 被禁用的分页按钮的class名称。
insertAfter: null, //键分页传入到指定的元素之后，可以是null，或一个class名称，或一个id。
pageNumbers: true // 显示总页数，limitPagination参数必须设置为true。
});
} //function paginathing(contentTbody) {
// $('#' + contentTbody).paginathing({
// perPage: 6, // show item per page 实际为每页6/2=3行数据
// limitPagination: 5, // false or number. Limiting your pagination number.
// prevNext: true, // enable previous and next button
// firstLast: true, // enable first and last button
// prevText: '«', // Previous button text
// nextText: '»', // Next button text
// firstText: '首页', // "First button" text
// lastText: '末页', // "Last button" text
// containerClass: 'Pagination', // extend default container class
// ulClass: 'pagination', // extend default ul class
// liClass: 'page', // extend li class
// activeClass: 'active', // active link class
// disabledClass: 'disable', // disabled link class,
// insertAfter: null, //class or id (eg: .element or #element). append the paginator after certain element
// pageNumbers: true // showing current page number of total pages number, to work properly limitPagination must be true
// });
//} /*
perPage：每页显示的记录数。
limitPagination：可以是false或一个数值。用于限制分页的页码。
prevNext：是否允许显示前一页按钮。
firstLast：是否允许显示第一页和最后一页按钮。
prevText：前一页按钮上显示的文字。
nextText：下一页按钮上显示的文字。
firstText：第一页按钮上显示的文字。
lastText：最后一页按钮上显示的文字。
containerClass：容器的class名称。
ulClass：ul元素的class名称。
liClass：li元素的class名称。
activeClass：当前分页按钮的class名称。
disabledClass：被禁用的分页按钮的class名称。
insertAfter：键分页传入到指定的元素之后，可以是null，或一个class名称，或一个id。
pageNumbers：显示总页数，limitPagination参数必须设置为true。
*/
</script>
</body>
</html>
Jquery 分页案例的更多相关文章
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- 简单的JQuery分页代码
1. [代码][JavaScript]代码 001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...
- JQuery 分页实现
JQuery分页实现 css: .liList0 { padding-left:5px;}.liList0 li { width:160px; float:left; display:inline ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- jQuery 分页插件 jqPagination的使用
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- jquery 分页控件2
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...
- jquery 分页控件1
jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...
随机推荐
- 使用python同时替换json多个指定key的value
1.如何同时替换json多个指定key的value import json from jsonpath_ng import parse def join_paths(regx_path,new_val ...
- Hadoop3.1.1源码Client详解 : 入队前数据写入
该系列总览: Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览 紧接着上一篇: Hadoop3.1.1源码Client详解 : 写入准备-RPC调用与流的建立 先给出 ...
- 修改链接服务器 Rpc &Rpc Out
USE [master] GO EXEC master.dbo.sp_serveroption @server=N'LinkName', @optname=N'rpc', @optvalue=N'tr ...
- 红帽RHCE培训-课程3笔记目录
目录: 1 控制服务和守护进程 systemctl systemctl restart enable servicename service servicename restart chkconfig ...
- Truffle 快速构建 DApp
简单介绍 官网传送门 Truffle是针对基于以太坊的Solidity语言的一套开发框架.本身基于Javascript,使用以太坊虚拟机(EVM)的世界一流的开发环境,用于区块链的测试框架和资产管道 ...
- Building Ethereum private chain on CentOS
golang安装 yum install golang 查看版本 go version 安装以太坊源代码 Building Geth (command line client) Clone the r ...
- [JavaScript] 两个数相除有余数时结果加1
实现代码 ; ; ?(total/item):(Math.floor(total/item)+); console.log(page)
- 4 中文乱码 selenium的使用
# 中文乱码 #处理中文乱码 import requests from lxml import etree from urllib import request url = 'http://pic.n ...
- DreamWeaver CC 中的回车
在Dreamweaver CC中换行有两种: 第一种是在设计视图中直接回车,对应的代码是<p>标签,即新生成一个段落. (注:在DreamWeaver CC编辑的代码中,按下回车相当于 ) ...
- ax绘图相关的知识点
1.去边框 # 去掉上.下.左.右边框 ax.spines['top'].set_visible(False) ax.spines['bottom'].set_visible(False) ax.sp ...