LayUI数据表格 通用工具栏 分页+搜索+排序

完成效果

1、接收和展示后端接口传来的数据；
2、分页和跳页；设置每页的数量；
3、 工具栏：查看、修改、删除；
4、工具栏：筛选列、导出Excel、打印；
5、搜索功能；
6、后端排序功能；

本实例只展示了实现功能的必须代码，后端代码的非必须部分未贴出。
本实例默认读者是后端程序员，着重展示前端部分。

---

后端

前置技能

1、SSM
2、pageHelper插件
3、前端基础和ajax

如果后端实现很熟悉了，可以直接跳到前端部分。

本实例用到的实体类

public class Repair {
   
    private Integer rep_id;
	//售后维修点 公司名称
    private String rep_name;
	//售后维修点 公司地址
    private String address;
	//售后维修点 联系方式
    private String phonenum;

本实例用到的select方法

传参了用条件查询，未传参全表查询。

  <select id="select"  parameterType="entity.aftersales.Repair" resultType="group3.entity.aftersales.Repair">
  	select rep_id, rep_name, address, phonenum from aftersales_repair 
  	<where>
  		<if test="rep_name!=null">
  			and rep_name like concat('%',#{rep_name},'%')
  		</if>
  		 <if test="address!=null">
  			and address like concat('%',#{address},'%')
  		</if>
  		<if test="phonenum!=null">
  			and phonenum like concat('%',#{phonenum},'%')
  		</if>
  	</where>
</select>

本实例用到的handler方法

list方法的参数说明

repair		//条件查询的参数；

field 		//排序的字段；
order		//排序的正反序；

page 		//分页的页数；
limit 		//分页每页几条；

layui组件会自动传分页参数，排序参数需要我们手动添加。

回调数据说明

"code" 		//layui表格固定参数
"msg"		//layui表格固定参数
"count"		//layui表格固定参数  总数
"data"	  //layui表格固定参数  数据

@Controller
@RequestMapping("/repair")
public class RepairHandler {
   
	@Autowired
	private RepairService ser;		//自动注入service
	
	@RequestMapping("/list")
	@ResponseBody
		public Map<String,Object>  list(Repair repair,String field,String order,@RequestParam(defaultValue="1")int page,@RequestParam(defaultValue="10")int limit) {
   
		//开启分页
		PageHelper.startPage(page, limit);
		//如果传了排序的参数  添加排序sql
		if(field!=null&&order