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或许 ...
随机推荐
- mongodb的一些操作
插入: db.inventory.insert( { _id: 10, type: "misc", item: "card", qty: 15 } ) db.i ...
- CSS - div居中在屏幕中(水平居中 + 垂直居中)
方法一代码 <div> <h1>404 Not Found.</h1> </div> <style> div { text-align: c ...
- 笔记本电脑插上耳机声音依然外放解决方法 为什么插入HDMI线，电脑的音响就没有声音了
笔记本电脑插上耳机声音依然外放解决方法: 下载一个驱动大师,安装声卡驱动.(驱动人生安装的驱动有可能不能用) 为什么插入HDMI线,电脑的音响就没有声音了 参考:https://zhidao.baid ...
- linux中的diff命令
今天在公司的代码中看到了一个用的不是很多的命令diff,一开始以为不是,后来一查发现还真有这个命令,有关它的详细资料在这个网址中查看[http://blog.chinaunix.net/uid-253 ...
- opencv python：图像直方图 histogram
直接用matplotlib画出直方图 def plot_demo(image): plt.hist(image.ravel(), 256, [0, 256]) # image.ravel()将图像展开 ...
- springboot @Configuration @bean注解作用
@Configuration注解可以达到在Spring中使用xml配置文件的作用 @Bean就等同于xml配置文件中的<bean> 在spring项目中我们集成第三方的框架如shiro会在 ...
- 如何在app.js 和其他页面中更改globalData的值
它不能用this.setData方法更改值,该方法只能更改data:{}对象(而且在app.js中无法使用该方法),因此用app.globalData.isLogin = true;
- github提交代码
下载git for windows,安装 第一步: 第二步: 第三步:不存在repository,点击 create a repository 第四步:切换至History菜单下,并点击publish ...
- 2020年英特尔CPU供应短缺将持续
导读 有着相当靠谱的爆料历史的台媒 DigiTimes 报道称,其预计英特尔的 CPU 供应短缺问题,将持续到 2020 年末.对于这样的预测,我们其实早已见怪不怪,毕竟该公司首席执行官 Bob Sw ...
- 最长递增子序列-Hdu 1257
最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...