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或许 ...
随机推荐
- 基于Robot Framework的接口自动化测试
Robot Framework框架简介 Robot Framework框架是一个通用的验收测试和验收测试驱动开发的自动化测试框架(ATDD),使用的是关键字驱动的测试方法.它本身拥有强大的标准库,此外 ...
- 03-书城bean类中的id缺少get属性
错误:id属性不可读 解决方法: 测试了删除的整个流程,dao-service-servlet ,数据库也能正常测试 想不出来为什么会bean类报错 后来仔细一看id的get属性不知道什么时候被误删了 ...
- December 31st, Week 53rd Tuesday, 2019
Nothing comes from nothing. 天下没有免费的午餐. Nothing comes from nothing, and in some cases, even something ...
- Abaqus 粘聚力模型（Cohesive Model）
目录 1. 问题描述 2. 有限元模型建立--Cohesive单元 3. 有限元模型建立--接触方法 Abaqus提供了两种方法模拟胶结特性: 使用Cohesive单元模拟胶结,通过定义材料属性和截面 ...
- PHP 站内消息的表结构设计
1)添加全站通知:信息存入到 tb_message 2)用户点开信息或者设置信息为已阅读:插入记录到 tb_message_readlog 如何设计存储的表?求最佳方案 CREATE TABLE `m ...
- 启动ubuntu就直接进入GRUB2.02的命令行界面的问题
问题:启动ubuntu就直接进入GRUB2.02的命令行界面原因:grub2引导出现问题. 解决方法:图形方法,引导修复 (1)电脑上插入Ubuntu系统启动引导U盘(如果没有引导U盘,就到官网下载一 ...
- 【CSS属性#2】
" 目录 一.盒子模型 二.外边距 margin 三.内填充 padding 四.浮动 float 五.清除浮动 clear 六.溢出 overflow 七.定位 position 1. 无 ...
- 国内免费可用的STUN服务器(webrtc 必备）
更新于2017年8月,本人亲测,国内可用,而且速度非常快! webRTC不可缺少的环节. 免费 STUN服务器列表(亲测有效)NO. STUN服务器 端口 有效 测试日期1 stun.xten.com ...
- stl_string复习
#include <iostream>#include <string>#include <algorithm>using namespace std; void ...
- 记C++中发现的隐式转换问题
#include <iostream> #include <string> using std::cin; using std::cout; using std::endl; ...