动态数据分页和静态数据分页-插件
摘要： 阿里前端开发文档规范 前端开发文档缩进规范 前端开发需求文档 前端开发文档看不懂 web前端开发 需求文档 前端开发架构分析文档 html 代码 <!DOCTYPE html> <html> <head……
| 阿里前端开发文档规范 |
| 前端开发文档缩进规范 |
| 前端开发需求文档 |
| 前端开发文档看不懂 |
| web前端开发 需求文档 |
| 前端开发架构分析文档 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>分页插件</title>
<style type=”text/css”>
* {
text-align: center;
color: #333;
}
#content,
#pagination {
width: 400px;
}
#content table {
width: 100%;
border: 1px solid #ccc;
margin-bottom: 10px;
border-collapse: collapse;
}
#content table th {
height: 43px;
background-color: #f6f8f8;
}
#content table tr {
height: 43px;
}
#content table td {
font-size: 14px;
padding: 10px;
max-width: 320px;
min-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: nowrap;
text-align: center;
border: 1px solid #e3eaef;
border-right: none;
empty-cells: show;
font-family: ‘微软雅黑 Regular’, ‘微软雅黑’;
}
#pagination a {
display: inline-block;
border: 1px solid #ccc;
height: 20px;
line-height: 20px;
margin: 0 5px;
padding: 2px 5px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#pagination input {
display: inline-block;
width: 50px;
height: 20px;
line-height: 20px;
}
</style>
</head>
<body>
<div id=”content”></div>
<div id=”pagination”></div>
<script type=”text/javascript”>
;(function($, window, document, undefined) {
var pluginName = ‘pagination’
// 总页数和数据总条数
var allPage = 0,
totalData = 0,
c //ajax字符串
var defaults = {
_url: ”, //ajax请求地址
_type: ‘get’, //ajax请求方式
_ajaxData: ”, //ajax参数
_dataType: ‘json’, //ajax请求的数据类型
_success: function(data) {}, //用户自定义函数生成表格
_error: function(data) {}, //ajax失败后的回调
Wrapper: ‘#content’, // 内容盒子
pageBar: ‘#pagination’, // 分页条位置
activePage: 1, // 当前激活的页码
onePageData: 3, // 每页显示的条数
data: null, // 分页数据
}
function Plugin(element, options) {
this.element = element
this.options = $.extend({}, defaults, options)
this._defaults = defaults
this._name = pluginName
this.allpage()
this.init()
}
// 计算页码
Plugin.prototype.allpage = function() {
var self = this,
result
var _p = self.options
for (var i in self.options.data) {
totalData++
}
allPage = Math.ceil(totalData / _p.onePageData)
}
// 切割分页数据
Plugin.prototype.init = function() {
var self = this,
result
var _p = self.options
if (_p._url != ”) {
c =
_p._ajaxData +
‘&page=’ +
_p.activePage +
‘&page_size=’ +
_p.onePageData
this.ajaxFn()
} else {
if (allPage > 1) {
if (_p.activePage === allPage) {
result = _p.data.slice(
(_p.activePage – 1) * _p.onePageData,
)
}
result = _p.data.slice(
(_p.activePage – 1) * _p.onePageData,
_p.activePage * _p.onePageData,
)
} else {
result = _p.data
}
this.getContent(result)
this.getPageBar()
this.pageTo()
}
}
// 生成分页条
Plugin.prototype.getPageBar = function(page) {
var self = this
var _p = self.options
$(_p.pageBar)
.find(‘.pageContent’)
.remove()
var _html =
‘<div class=”pageContent”><a class=”pageBefore”>前一页</a>’ +
‘<span>前往</span>’ +
‘<input class=”pageTo” value=”‘ +
_p.activePage +
‘”>’ +
‘<span>页</span>’ +
‘<a class=”pageNext”>后一页</a>’
if (_p._url != ”) {
allPage = page
}
_html += ‘<span>共’ + allPage + ‘页</span>’ + ‘</div>’
$(_p.pageBar).append(_html)
}
// 将内容追加入页面
Plugin.prototype.getContent = function(result) {
var self = this
var _p = self.options
_p._success(result)
$(_p.pageBar)
.find(‘.pageTo’)
.val(_p.activePage)
}
// 后台分页
Plugin.prototype.ajaxFn = function(res) {
var totalPage = allPage
var self = this
var _p = self.options
$.ajax({
url: _p._url,
type: _p._type,
data: c,
dataType: _p._dataType,
success: function(data) {
_p._success(data)
// 由后台返回所有数据的条数或页数并赋值给totalPage去改变allPage
totalPage = data.totalPage
$(_p.pageBar)
.find(‘.pageTo’)
.val(_p.activePage)
self.getPageBar(totalPage)
self.pageTo()
},
error: function(data) {
_p._error(data)
},
})
}
// 跳转到指定页面
Plugin.prototype.pageTo = function() {
var self = this
var _p = self.options
// 前一页
$(_p.pageBar)
.find(‘.pageBefore’)
.on(‘click’, function() {
if (_p.activePage === 1) {
return
} else {
_p.activePage–
self.init()
}
})
// 后一页
$(_p.pageBar)
.find(‘.pageNext’)
.on(‘click’, function() {
if (_p.activePage >= allPage) {
return
} else {
_p.activePage++
self.init()
}
})
// 按enter键前往指定页
$(document).keypress(function(event) {
var keynum = event.keyCode ? event.keyCode : event.which
if (keynum == ’13’) {
var value = parseInt(
$(_p.pageBar)
.find(‘.pageTo’)
.val(),
10,
)
if (
value !== _p.activePage &&
value >= 1 &&
value <= allPage
) {
_p.activePage = value
self.init()
} else {
return
}
}
})
}
// 这部分就是套路，直接拷贝的别人的写法
$.fn[pluginName] = function(options) {
//each表示对多个元素调用，用return 是为了返回this，进行链式调用
return this.each(function() {
//判断有没有插件名字
if (!$.data(this, ‘plugin_’ + pluginName)) {
//生成插件类实例。
$.data(
this,
‘plugin_’ + pluginName,
new Plugin(this, options),
)
}
})
}
})(jQuery, window, document)
</script>
<script type=”text/javascript”>
var alldata = [
{ id: ‘1’, text: ‘ceshi’ },
{ id: ‘1’, text: ‘运ces’ },
{ id: ‘1’, text: ‘ces’ },
{ id: ‘1’, text: ‘sec’ },
{ id: ‘2’, text: ‘cs门’ },
{ id: ‘2’, text: ‘cddd’ },
{ id: ‘2’, text: ‘dddddd’ },
]
$(‘body’).pagination({
// _url: ‘http://www.test.com’, //ajax的url
// _ajaxData: ‘type=person&name=nick’, //ajax参数
activePage: 1, //激活第1页
onePageData: 4, //一页的显示条数
data: alldata, //数据
_success: function(data) {
var _html =
‘<div></div><h3 class=”popBox_title”>信息显示</h3>’ +
‘<table class=”searchTable”><thead><tr>’ +
‘<th>ID</th><th>描述</th></tr></thead>’
for (var i in data) {
_html += ‘<tr>’
_html += ‘<td>’ + data[i].id + ‘</td>’
_html += ‘<td>’ + data[i].text + ‘</td>’
_html += ‘</tr>’
}
_html += ‘</table>’
$(this.Wrapper).html(_html)
},
})
</script>
</body>
</html>
按自己想法写的，没写多少注释。是否调用ajax使用的判断是
javascript 代码
if (_p._url != ”)
| 前端开发英文文档 |
| 前端开发文档策划书 |
| 前端开发文档 |
| 京东云平台 前端开发文档 |
| 前端开发文档devdocs |
» 本文来自：前端开发者 » 《动态数据分页和静态数据分页-插件》
» 本文链接地址：https://www.rokub.com/6740.html
» 您也可以订阅本站：https://www.rokub.com
近期评论