layui表格回顾-前端分页

前端分页

<!--  check_status 0//审核不通过  1//待审核 2审核通过 3问题已完成-->
<script type="text/html" id="barDemo">
  {{#  if(d.end_time==''||d.end_time==null){ }}
	{{#  if(d.check_status=='1'){ }}
		 {{#  if (d.user_id == sessionStorage.getItem('user_id')){ }}
    		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    	 {{#  } }}
		 {{#  if (Number(sessionStorage.getItem("authority")<=3)){ }}
    		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="check">审核</a>
    	 {{#  } }}
  	{{#  } else if(d.check_status=='0'){ }}
	 	{{#  if (d.user_id == sessionStorage.getItem('user_id')){ }}
    		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    	 {{#  } }}
	{{#  } else { }}
		{{#  if (Number(sessionStorage.getItem("authority")<=3)){ }}
    		<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="wancheng">问题已完成</a>
    	{{#  } }}
    	
  	{{#  } }}
  {{#  } }}  
</script>

var  tabledata=[]//全局变量表格数据
layui.use('table', function(){
	  var table = layui.table;
	  var form=layui.form;
	  findPropertyProblemList({})//表格列表函数;请注意ajax需要改成同步
	  table.render({
	    elem: '#indextable'
	    ,title: '用户数据表'
	   	,cellMinWidth: 80
	 	,cols: [[
	      {type:'checkbox'}
	      ,{field:'property_id',  title: 'ID', sort: true,width:120}
	      ,{field:'check_status',width:90, title: '状态', templet: function(d){
	    	  if(d.check_status==0){//审核不通过
	    		  var h='<p style="color:#FF5722">审核不通过</p>'
	    	  }else if(d.check_status==1){
	    		  var h='<p style="color:#FFB800">待审核</p>'
	    	  }else if(d.check_status==2){
	    		  var h='<p style="color:#5FB878">审核通过</p>'
	    	  }else{
	    		  var h='<p style="color:#5FB878">问题已完成</p>'
	    	  }
	  	      return h
  	      }}
	      ,{ title:'操作', toolbar: '#barDemo', minWidth:240}
	    ]]
	   ,page: true
	   ,id: 'testReload'
	   ,data:tabledata
	   , done: function (res, curr, count) {
           //res为表格的所有数据，curr为当前页码，count为数据总条数
           //遍历本页所有表格数据的值，依次判断是否为空闲中状态，若不是则通过data-index改变该行样式
           //这里item和index分别对应每行的数据和data-index索引值
           res.data.forEach(function (item, index) {
               //这里的entity_status_id 为表格数据中的一列数据，用于判断特定行//check_status==3问题已完成
               if (item.user_id !== user_id||item.check_status=='3') {
                   //禁用复选框，设置不可选中标识，将该行设置为阴影色
                   var tr = $(".layui-table tr[data-index=" + index + "]");
                   tr.find("input[type='checkbox']").prop('disabled', true).hide();
                   tr.find("input[type='checkbox']").next().addClass('layui-btn-disabled');
                   $('.layui-btn-disabled').parents('.layui-table-col-special').css('visibility','hidden')

               }

           })
       }

	  });

	  //搜索
	  $('.seachBtn').on('click', function(){
	   var obj={}//参数
	   findPropertyProblemList(obj)
	   table.reload('testReload', {data:tabledata});
	  });
	  //批量删除
	  $('.deleteAll').click(function(){
		  var checkStatus = table.checkStatus('testReload'); //idTest 即为基础参数 id 对应的值
		  var selectCount=checkStatus.data.length
		  var ids=''
	      checkStatus.data.forEach(function(it,i){
	          if(it.user_id==user_id)ids+=it.id+','
	       })
		  if(selectCount == 0||ids==''){
              layer.msg('批量删除至少选中一项数据',function(){});
              return false;
          }
		  layer.confirm('确定要删除上报记录吗？', function(index){
		        layer.close(index);
		        deleteByIds({id:ids.substring(0,ids.length-1)})
		        
		      }, function(){
	  			parent.layer.closeAll()
	  		});
		  console.log(checkStatus) //获取选中行的数据
		  console.log(checkStatus.data) //获取选中行数量，可作为是否有选中行的条件
		  console.log(checkStatus.isAll ) //表格是否全选
	  })
	  //导出
	  $('.exportLayui').click(function(){
		    var url=''
			exportExcel(url)
	  })
	  //编辑
	  $('.btn-edit').click(function(){
		  if($('.reason').val()==''){
			  layer.msg('上报原因必须填写！',{icon:6})
			  return false
		  }
		  var obj={ }//参数
		  editByIds(obj)
	  })
	//审核
	$('.checkBtn').click(function(){
		var check=$('input[type=radio][name=check]:checked').val()
		if(!N.Util.isPoneAvailable($('#check_user_phone').val())){
			layer.msg('手机号码格式错误！',{icon:6})
			return false
		}
		var obj={}//参数
		CheckProblem(obj)
	})
	//问题已完成
	$('.wanchengBtn').click(function(){
		if($('#end_user_phone').val()==''){
			layer.msg('必须填写审核人电话！',{icon:6})
			return false
		}
		var obj={}//参数
		updateProblemEndtime(obj)
	})
	   //监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;
	    console.log(obj)
	    if(obj.event === 'del'){
	    	layer.confirm('确定要删除上报记录吗？', function(index){
		        layer.close(index);
		        deleteByIds({id:data.id})
		      }, function(){
	  			parent.layer.closeAll()
	  		});
	     
	    } else if(obj.event === 'edit'){
			//编辑。。。。
	     
	    }else if(obj.event === 'check'){
	    	//审核。。。
	    }else if(obj.event === 'wancheng'){
    	  layer.confirm('请确认问题是否真的已完成！', function(index){
  		        layer.close(index);
  		        //问题已完成
  		      }, function(){
  	  			parent.layer.closeAll()
  	  		}); 
	  	
	    }
	  }); 
	  //radio
	  form.on('radio(levelM)', function(data){
		  console.log(data); //得到radio原始DOM对象
		  if(data.value=='0'){
			  $('.checkText').show()
		  }else{
			  $('.checkText').hide()
		  }
		
		}); 
	//编辑接口
	  function editByIds(obj){
	 //省略 ...
			  if(res.code==0){
				   layer.msg('编辑成功！',{icon:1})
				    reload()
			   }else{
				   layer.msg(res.msg||'编辑失败，请重新编辑！',{icon:2})
			   }
	//省略   ...
	  }
	//删除接口
	  function deleteByIds(obj){
	  //同上ajax执行完  reload()
	  }
	//reload
	function reload(){
		var obj={}
	   findPropertyProblemList(obj)
	   table.reload('testReload', {data:tabledata});
	}
	//问题已完成
	function updateProblemEndtime(obj){
		//同上ajax执行完  reload()
	}
	//审核接口
	 function CheckProblem(obj){
		 //同上ajax执行完  reload()
	 }
	});
//表格列表-ajax
function findPropertyProblemList(obj){
	...
	f(res.code==0){
		 tabledata=res.msg
	}else{
		   tabledata=[]
 }
	...
}```