一个简单易用，样式精美的分页控件，用于前端，通过列表绑定事件，删除事件可轻松的实现对数据进行分页处理,解决页面数据过多的问题。
Pager(config,page,fun_load,fun_error, is_cookie)Contents
- Pager(config,page,fun_load,fun_error, is_cookie)
config
请求参数
page
页面参数
fun_load
页面加载事件
fun_error
加载错误事件
is_cookie
是否保存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("列表绑定") };
});
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("列表绑定事件")
}
});
{ 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();
}
});
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("加载数据后执行的操作");
});
}
});
{ 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);
});
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);
});
展示效果
封装——示例
fun_pager(_url, { type: "list", object_type: type, date: date, key: key, task_user: $('.serach_user').attr('_id') }, set_row, {
del_param: { url: _url },
info_del: function (item) { alert("删除函数")};
});
del_param: { url: _url },
info_del: function (item) { alert("删除函数")};
});
展示效果
button_active()
选择事件
示例
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);
function button_active() { alert("选中事件") };
function button_default() { alert("取消选中事件") };
fun_checkbox(content.find('ul li .combox'), function () {
if (content.find('ul li .combox').length == content.find('ul li .combox.checked').length) {
content.find('ol li .combox').addClass('checked');
}
button_active();
}, function () {
content.find('ol li .combox').removeClass('checked');
if (content.find('ul li .combox.checked').length == 0) {
button_default();
}
});
});
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);
function button_active() { alert("选中事件") };
function button_default() { alert("取消选中事件") };
fun_checkbox(content.find('ul li .combox'), function () {
if (content.find('ul li .combox').length == content.find('ul li .combox.checked').length) {
content.find('ol li .combox').addClass('checked');
}
button_active();
}, function () {
content.find('ol li .combox').removeClass('checked');
if (content.find('ul li .combox.checked').length == 0) {
button_default();
}
});
});
展示效果
封装——示例
fun_pager(_url, { type: "list", object_type: type, date: date, key: key, task_user: $('.serach_user').attr('_id') }, set_row, {
del_param: { url: _url },
button_active: function (item) { alert("复选框选择事件")};
});
del_param: { url: _url },
button_active: function (item) { alert("复选框选择事件")};
});
展示效果
button_default()
取消选择事件
示例
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);
function button_active() { alert("选中事件") };
function button_default() { alert("取消选中事件") };
fun_checkbox(content.find('ul li .combox'), function () {
if (content.find('ul li .combox').length == content.find('ul li .combox.checked').length) {
content.find('ol li .combox').addClass('checked');
}
button_active();
}, function () {
content.find('ol li .combox').removeClass('checked');
if (content.find('ul li .combox.checked').length == 0) {
button_default();
}
});
});
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);
function button_active() { alert("选中事件") };
function button_default() { alert("取消选中事件") };
fun_checkbox(content.find('ul li .combox'), function () {
if (content.find('ul li .combox').length == content.find('ul li .combox.checked').length) {
content.find('ol li .combox').addClass('checked');
}
button_active();
}, function () {
content.find('ol li .combox').removeClass('checked');
if (content.find('ul li .combox.checked').length == 0) {
button_default();
}
});
});
展示效果
封装——示例
fun_pager(_url, { type: "list", object_type: type, date: date, key: key, task_user: $('.serach_user').attr('_id') }, set_row, {
del_param: { url: _url },
button_default: function () { alert("取消选中事件")}
});
del_param: { url: _url },
button_default: function () { alert("取消选中事件")}
});
展示效果