基于jQuery的Web前端分页插件的编写

 

基于jQuery的Web前端分页插件的编写

基于jQuery的Web前端分页插件的编写

   

        上一节中给大家介绍了基于LayPag的前端分页组件的使用,但这个组件还不能够满足我们实际的开发应用需求,一般情况下,分页数据都是以表格或者行列的排列方式进行显示的,前端的显示可能或有诸如真删改查等操作,laypage只是做了分页显示数据的工作,其余的还需要我们自己动手去完善。

          笔者在这里将自己封装好的分页插件与大家共享,该插件通过简单的配置,就可以完成数据分页显示和相关数据的操作,简化了原来的分页操作,提高了代码的重复使用率,不用再去关注原生laypage的内部细节。感兴趣的朋友在使用本插件过程中可以自己去继续改进其中的方法,使该插件越来越完善。下面将我自己写的插件源码共享于此,欢迎指正。


/**
 *****************************************************************************************
 * @author:谭朝红
 * @Date:2016-10-15
 * @description:基于laypage的web分页插件,在使用此插件时需要导入jquery.js和laypage.js两个库,
 * 在使用过程中发现有什么问题可通过max_data@163.com联系我
 ******************************************************************************************
 * @param setting.url:请求数据的后台地址        *必填选项
 * @param setting.page:起始页,         *必填选项
 * @param setting.pageSize:分页的大小          *必填选项
 * @param setting.totalSize:分页数据总记录数      *必填选项
 * @param setting.pagePos:分页标签显示位置      *必填选项
 * @param setting.tabPos:分页数据显示位置      *必填选项
 * @param setting.args:表格列名称列表       *必填选项
 * @param setting.opts:每行的CURD操作名称列表      *必填选项
 * @param setting.first:首页名称,default:'下一页'    *非必须
 * @param setting.last:尾页名称,default:'下一页'     *非必须
 * @param setting.prev:上一页名称,default:'下一页'    *非必须
 * @param setting.next:下一页名称,default:'下一页'     *非必须
 * @param setting.skip:是否开启跳页,default:false    *非必须
 * @param setting.groups:分页标签分组大小,default:3    *非必须
 ******************************************************************************************
 * @使用说明:
 *  $(setting.tabPos).abihuPagePlugin({
 *   url:'/admin/admins.do',
 *   pageSize:15,
 *   totalSize:1000,
 *   pagePos:'#pagePos',
 *   tabPos:'#tabPos',
 *   args:['id','name','birthday','address','tel','email'],
 *   opts:[{name:'show',url:'/admin/show',icon:'<i>&#57e54a</i>'},
 *      {name:'update',url:'/admin/update/',icon:'<i>&#57e54c</i>'},
 *      {name:'delete',url:'/admin/delete/',icon:'<i>&#57e54e</i>'},
 *      {name:'more',url:'/admin/more',icon:'<i>&#57e54f</i>'}]
 *  });
 ******************************************************************************************
 * @version v1.0.0
 */
;(function($,window,document){
 var setting;
 var dataList = new Array();
 $.fn.abihuPagePlugin = function(options){
  var defaults = {
    page:1,
    pageSize:10,
    first:'首页',
    last:'尾页',
    prev:'上一页',
    next:'下一页',
    skip:false,
    skin:'039BE5',
    groups:3,
  };
  setting = $.extend(defaults,options,{});
  return dataPage(setting);
 }
 /**
  * 分页核心函数
  */
 function dataPage(curr){
  $.ajax({
   type:'GET',
   async:false,
   url:setting.url,
   data:{
    page:curr,
    pageSize:pageSize
   },
   contentType:'application/json,charset=utf-8',
   success:function(data){
    var count = setting.totalSize;
    var pageCount = Math.ceil(count/setting.pageSize);
    var res = eval("("+data+")");
    laypage({
     cont:setting.pagePos,
     pages:pageCount,
     curr:curr||1,
     first:setting.first,
     last:setting.last,
     prev:setting.prev,
     next:setting.next,
     skip:setting.skip,
     skin:setting.skin,
     groups:setting.groups,
     jump:function(obj,first){
      if(!first){
       dataPage(obj.curr);
      }
     }
    });
    $(setting.tabPos).html(PackageData(res));
   }
  });
 }
 /**
  * 分页数据替函数
  */
 function PackageData(res){
  var content = "";
  $.each(res,function(i,o){
   content +="<tr>";
   for(var n=0;n<setting.args.length;n++){
    var arg = setting.args[n];
    content+="<td>"+o[arg]+"</td>";
   }
   content+="<td>"
   for(var m=0;m<setting.opts.length;m++){
    var funName = setting.opts[m].name;
    var funUrl = setting.opts[m].url;
    var icon = setting.opts[m].icon;
    content+=icon+"<a href='"+funUrl+"'>"+funName+"</a> &nbsp;";
   }
   content+="</td></tr>"
  });
  return content;
 }
 
})(jQuery,window,document);