标签:
一个简单易用,样式精美的分页控件,用于前端,通过列表绑定事件,删除事件可轻松的实现对数据进行分页处理,解决页面数据过多的问题。
Pager(config,page,fun_load,fun_error, is_cookie)
html代码
<head>
<title></title>
<link href="/_css/common.css" rel="stylesheet" type="text/css" />
<script src="/_js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/_js/Valid.js" type="text/javascript"></script>
<script src="/_js/common.js" type="text/javascript"></script>
<script src="download.js" type="text/javascript"></script>
</head>
<body>
<div class="pagefooter">
<a href="javascript:void(0)" class="bt_normal bt_del">删除</a>
<div class="pageDiv"></div>
</div>
</body>
list_bind(html, json)
加载数据后执行操作
示例:
var pager = new Pager({type: "list",
apidoc_type: $(‘.txt_type‘).attr(‘_id‘),
key: text == _default ? "" : text},
{ obj: $(‘.pageDiv‘),
url: ‘/handler/sys/ApiDoc.ashx‘,
size:10,
total:10,
index:1,
}, function (json){
var html = ‘‘;
$.each(json.list, function (i, item) {
html += set_row(item, i);
});
var list_bind = function (html, json) { alert("列表绑定") };
});
展示效果:
封装--示例:
fun_pager(_url,
{ type: "list", object_type: type, date: date, key: key, task_user: $(‘.serach_user‘).attr(‘_id‘) },
set_row, {
del_param: { url: _url },
list_bind: function (html, json) {
alert("列表绑定事件")
}
});
展示效果:
callback()
加载数据后执行操作
示例:
var pager = new Pager({type: "list",
apidoc_type: $(‘.txt_type‘).attr(‘_id‘),
key: text == _default ? "" : text},
{ obj: $(‘.pageDiv‘),
url: ‘/handler/sys/ApiDoc.ashx‘,
size:10,
total:10,
index:1,
}, function (json){
var html = ‘‘;
$.each(json.list, function (i, item) {
html += set_row(item, i);//设置行html代码
});
var content = $(‘.con .content‘);
content.find(‘ul‘).remove();
content.find(‘ol‘).after(html);
var callback = function(){
$(‘ul li a.bt_update‘).click(function () {
alert("加载数据后执行的操作");
})
}
callback();
}
});
展示效果:
封装--示例:
fun_pager(_url,
{ type: "list", object_type: type, date: date, key: key, task_user: $(‘.serach_user‘).attr(‘_id‘) },
set_row,{
del_param: { url: _url },
callback: function () {
$(‘ul li a.bt_update‘).click(function () {
alert("加载数据后执行的操作");
});
}
});
展示效果:
info_del(items)
删除函数
示例:
var pager = new Pager({type: "list",
apidoc_type: $(‘.txt_type‘).attr(‘_id‘),
key: text == _default ? "" : text},
{ obj: $(‘.pageDiv‘),
url: ‘/handler/sys/ApiDoc.ashx‘,
size:10,
total:10,
index:1,
}, function (json){
var html = ‘‘;
$.each(json.list, function (i, item) {
html += set_row(item, i);
});
var content = $(‘.con .content‘);
content.find(‘ul‘).remove();
content.find(‘ol‘).after(html);
var items = new Array();
content.find("ul .combox.checked").each(function () {
items.push({
id: $(this).parent().parent().attr(‘_id‘),
name: $(this).parent().siblings(‘.info_title‘).text()
});
});
var info_del = function(items){
content.find(‘.bt_del‘).click(function (){
alert(" 删除操作");
})
}
info_del (items);
});
下载地址:http://admin.tiaoceng.com/assemblydetail_4.html
js分页控件
标签:
原文地址:http://www.cnblogs.com/tiaoceng/p/5583906.html