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或许 ...
随机推荐
- maven的安装与使用（运行单元测试和打包等）
maven的下载与安装 maven是用于java的自动化构建工具. 1.下载: http://maven.apache.org/download.cgi 下载maven包,比如 apache-mave ...
- Wx-小程序-组件式开发之Vant
开始:https://youzan.github.io/vant-weapp/#/intro 小程序开发者工具中 -->工具栏-->构建npm 一.初始化package.json npm ...
- 归并非递归、快排递归及非递归的C++实现及时间效率对比。。
今天看剑指offer突然发现下学期都要去面试了,还没自己实现过快排非递归和归并非递归,这怎么能行呢,于是就写了一下. (虽然有点卡壳,又回去翻了下算导,还是顺利写出来了) 先放图: 一亿数据量: #p ...
- laravel搭建博客实战的教程实例
这篇文章主要给大家介绍了关于利用laravel搭建一个迷你博客的相关资料,文中将一步步的实现步骤通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着来一起学习学习吧. 本文主 ...
- 学习笔记（25）- NLP的几个概念
NLP的几个概念 从技术研究的角度,简单介绍自然语言处理的几个概念 1. 对抗学习 主要指对抗生成网络. 2个主要构成:判别器.生成器 判别模型尽可能提取特征正确率增加的模型,生成模型尽可能" ...
- Educational Codeforces Round 77 (Rated for Div. 2)D（二分+贪心）
这题二分下界是0,所以二分写法和以往略有不同,注意考虑所有区间,并且不要死循环... #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> ...
- 拥抱高通的联想，真的能靠5G突围？
编辑 | 于斌 出品 | 于见(mpyujian) 2016年,对于常年自我标榜为"民族企业"的联想来说是品牌口碑的"转折之年".它在这一年的5G信道编码标准方 ...
- i.MX RT1010之FlexIO模拟I2S外设
恩智浦的i.MX RT1010是跨界处理器产品,作为i.MX RT跨界MCU系列的一个新的切入点,i.MX RT1010是成本最低的LQFP封装方式与i.MX RT系列产品一贯的高性能和易用性的结合产 ...
- Jenkins显示语言切换为中文(最终解决办法)
网上大部分搜索结果都指向同一种方法就是下载Locale插件,但该方法已失效. 新的解决办法: 下载完成之后重启Jenkins生效,会汉化大部分内容,部分设置不会汉化. 注:重启后不生效请检查 1.已安 ...
- 卸载mysql时，提示libmysqlclient.so.16()(64bit) is needed by (installed) postfix
卸载时,提示错误,用这个命令就可以rpm -e --nodeps mysql-libs-5.1.73-5.el6_6.x86_64(这个是自己要卸载的版本) [root@unaryhost dev]# ...