layui框架的动态tab切换

html：

  

    
用户类型1
    
用户类型2
    
全部
    
  
  

    

    

    

  
 

注意： lay-filter是事件过滤器，为之后监听tab点击做准备

js:

layui.use(['table','layer','element'], function(){
	  var table = layui.table;
	  var layer=layui.layer;
	  var element=layui.element;
	  if(sessionStorage.getItem("status")==null){
		  sessionStorage.setItem("status", '1');
	  }
	  getList('#fourFile_not',sessionStorage.getItem("status"));
	  //tab点击选择不同项时带过来的值，docDemoTabBrief是div中lay-filter的值
	  element.on('tab(docDemoTabBrief)', function(data){
		  var status = $(this).attr('application_status');
		  sessionStorage.setItem("status", status);
          var position = '#fourFile_not'
          switch (sessionStorage.getItem("status")) {
              case '1': position = '#fourFile_not'; break;
              case '2': position = '#fourFile_have'; break;
              case '3': position = '#fourFile_all'; break;
              default: position = '#fourFile_not';
          }
		  
          getList(position, sessionStorage.getItem("status"));
      });
	  
	  function getList(position,status){//table数据来源
		  $(".layui-tab-title li").eq(Number(sessionStorage.getItem("status"))-1).addClass("layui-this").siblings().removeClass("layui-this");
    	  table.render({
  	        elem: position,
  	        url:  '', //路径写自己后台的
  	        //method: 'get',
  	        id: 'datareload',
  	        cellMinWidth: 95,
  	        page: {theme: '#009688', hash: 'page',curr: location.hash.replace('#!page=', '')},
  	        //height: 'full-125',
  	        limit: 20,
  	        limits: [20,20,100,200],
  	        //where: {state: 0},
  	        request: {
  		        pageName: 'pageNo' ,//页码的参数名称，默认：page
  		        limitName: 'pageSize' //每页数据量的参数名，默认：limit
  	        }
  	        ,parseData: function(res){ //res 即为原始返回的数据
  	        	
  	          }
  	      ,cols: [[ //表头
	                 {title: '序号',templet: '#indexTpl',width: 50}
		              ,{field: 'name', title: '姓名', width: 220, sort: true}
				      ,{field: 'phone', title: '电话', width: 100,sort: true}
				      ,{field: 'age', title: '年龄', width: 200,sort: true}
				      ,{field: 'id', title: '操作', width: 300,sort: true,templet:function(d){
                          return "详情"; 
				      }}
	        ]]
  	       
  	    });

  	    //搜索
  	    var active = {
  	        reload: function () {
  	            //执行重载
  	            table.reload('datareload', {
  	                page: {
  	                    curr: 1 //重新从第 1 页开始
  	                }
  	                , where: {
  	                	name:$("#name").val() //搜索时传的参和值
  	                	
  	                }
  	            });
  	        }
  	    };
  	    $('#search').on('click', function () {
  	        var type = $(this).data('type');
  	        active[type] ? active[type].call(this) : '';
  	    });
  	    
      }
	  
	  
	  
	});

注意：使用sessionStorage的目的是为了在此页面中若有详情等的子页面，从子页面返回此页面时不会再刷新，从子页面返回时用history.go(-1)，history.go(-1)是返回上一页面不刷新，如果用history.back(-1)是返回上一页面并刷新

          $(".layui-tab-title li").eq(Number(sessionStorage.getItem("status"))-1).addClass("layui-this").siblings().removeClass("layui-this");还是为了子页面返回此页面时选中tab