码迷,mamicode.com
首页 > Web开发 > 详细

js分页控件

时间:2016-06-14 15:57:08      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:

  一个简单易用,样式精美的分页控件,用于前端,通过列表绑定事件,删除事件可轻松的实现对数据进行分页处理,解决页面数据过多的问题。

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("列表绑定") };
});

展示效果:

技术分享

封装--示例:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!