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或许 ...
随机推荐
- app内区域截图利用html2Canvals保存到手机 截屏 (html2Canvals2版本1.0.0)
html2canvas($(], {scale:,logging:false,useCORS:true}).then(function(canvas) { var dataUrl = canvas.t ...
- vue项目用npm安装sass包遇到的问题及解决办法
IDEA启动vue程序,浏览器访问时出现如下情况的关于node-sass的错误: 错误1: Module build failed (from ./node_modules/sass-loader/d ...
- 事件和方法的区别，以input框的blur事件为例
1. 我们在原生的js中学到的事件 onblur 2. 使input框失去焦点的方法blur 3. jquery中的方法blur 是当input框失去焦点时触发的回调 三者是不相同的 事件:指的是一个 ...
- 动手动脑5JAVA项目中的常用的异常处理情况
Java异常处理的几个原则如下. (1)不要丢弃异常,捕获异常后需要进行相关处理.如果用户觉得不能很好地处理该异常,就让它继续传播,传到别的地方去处理,或者把一个低级的异常转换成应 ...
- HTML5 canvas自制画板
找到一个画板的插件,很好用,点击下载 ,页面很简单,但是呢,貌似不适用于手机端,,,
- HDU4081 Qin Shi Huang's National Road System
先求最小生成树 再遍历每一对顶点,如果该顶点之间的边属于最小生成树,则剪掉这对顶点在最小生成树里的最长路径 否则直接剪掉连接这对顶点的边~ 用prim算法求最小生成树最长路径的模板~ #include ...
- bootstrap当中，实现div居中
文本内容居中:利用bootstrap自带CSS样式表当中 的 text-center 样式来实现 <div class="row form-group text-center&qu ...
- 吴裕雄 python 神经网络——TensorFlow 使用卷积神经网络训练和预测MNIST手写数据集
import tensorflow as tf import numpy as np from tensorflow.examples.tutorials.mnist import input_dat ...
- 150元搭建微型家庭服务器（支持DLAN，samda，aria2）
概览 看到有人用树莓派搭家庭服务器,感觉太不值了,300块都可以搭一台性能还可以的低功耗x86主机了,我搭一个100块顶多的服务器玩玩. 0.Linux服务器学习(比虚拟机双系统舒服多了) 1.流媒体 ...
- Coursera-吴恩达机器学习课程笔记-Week3
logistic regression Binary classification problems logistic regression 是一个分类算法 Hypothesis function d ...