layui之初始化加分页重复请求问题解决

layui框架中的page困扰我很久，一个页面初始化后并且分页，导致初始化渲染请求一次，分页再请求了一次，一个接口就重复请求了2次，通过不停的分析和测试，最终解决了这个问题。

基于JQ的ajax二次封装的baseJqAjax：

 //基于JQuery的baseJqAjax
 function baseJqAjax ( options , error , success ) {

     options = options === undefined ? {} : options;

     var type = options.type === undefined ? 'post' : options.type;

     var async =options.async === undefined ? true : options.async;

     var url = options.url === undefined ? '' : options.url;

     var data = options.data === undefined ? {} : options.data;

     var dataType =options.dataType === undefined ? 'json' : options.dataType;

     $.ajax({

         type: type,

         async: async,

         url: url,

         data: data,

         dataType: dataType,

         error: function(err) { error&&error(err); },

         success: function(result) { success&&success(result); }

     });

 }
 /*使用方法有两种*/

 //第一种逻辑较多的选择  其他参数不设置使用默认参数

 baseJqAjax({url:url,data:data},error,success);

 function error(err){

     //请求失败执行的代码
 }

 function success(result){

     //请求成功后执行的代码
 }

 //第二种适合业务逻辑较少 其他参数不设置使用默认参数
 //
 baseJqAjax({url:url,data:data},function error(err){

     //请求失败执行的代码

 },function success(result){

     //请求成功后执行的代码

 });

项目中某个页面的初始化分页并且可以搜索功能：

 //init和page 里的接口都是同一个
 function init(){

     baseJqAjax({url:url,data:data},function error(err){

         //请求失败执行的代码

     },function success(result){

         //请求成功后执行的代码
         //成功请求到数据result
         var data=result.data;
         var page=result.count;
         page(data,page);
     });
 }

 function page(data,page){

     layui.use('laypage', function(){

         var laypage = layui.laypage;

         laypage.render({

             elem: 'free',//注意，这里的 test1 是 ID，不用加 # 号

             count: page,

             groups:2, //数据总数，从服务端得到

             limit:2,    //每页的条数在这里设置

             jump: function(data, first){

                 //page

                 if(!first){

                    baseJqAjax({url:url,data:data},error,success);

                     function error(err){
                         //分页请求失败执行的代码
                     }

                     function success(result){
                         //分页请求成功后执行的代码
                     }
                 } else {

                     //init

                      var html='';

                     for(var i=0;i<data.length;i++){

                         html += '<li>'+ data[i].parkingLotName + '</li>';

                     }

                     $('#ul').html(html);

                 }
             }
         });
     });
 }

如有疑问，欢迎留言。