采用layui前台框架实现前后台交互，数据分页显示以及删除操作，具体方式如下：

一、数据分页显示

1.前端

（1）html页面

<!--轮播数据分页显示--><table class="layui-hide" id="content_lbt" lay-filter="content_lbt_filter"></table>

（2）请求渲染数据

$(function() { /*轮播数据分页显示*/ layui.use(['table', 'update'], function() { var table = layui.table,  upload = layui.upload;  table.render({  elem: '#content_lbt',  height: 500  //,url: 'data/content_lbt.json' //数据接口  ,  url: 'http://localhost:9911/cms/queryCarouselList' //数据接口  ,  page: true //开启分页  ,  loading: true,//分页查询是否显示等待图标  text: {//若查询记录为空，执行此操作  none: '暂无相关数据'  } //默认：无数据。注：该属性为 layui 2.2.5 开始新增  ,  cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增  ,  cols: [  [{   field: 'id',   width: '10%',   title: 'ID',   sort: true  }, {   field: 'posterId',   width: '10%',   title: '上传者ID',   sort: true  }, {   field: 'posterName',   width: '15%',   title: '上传者姓名'  }, {   field: 'description',   width: '28%',   title: '描述',   minWidth: 200  }, {   field: 'photoPath',   width: '10%',   title: '图片',   minWidth: 100  }, {   field: 'createTime',   width: '10%',   title: '上传时间',   minWidth: 100  }]  ],  request: {  pageName: 'page',  limitName: 'size'  },  limit: 10,  limits: [10, 20, 30, 40, 50] });   });

2.后端

后端采用SpringBoot，利用SSM框架

（1）mapper：（注意@Mapper注解）

/**   * 查询所有轮播图信息   *   * @return   */  List<Carousel> queryCarousel(@Param("start") Integer start, @Param("size") Integer size);   /**   * 查询轮播记录条数   *   * @return   */  Integer countCarousel();

注意po类采用驼峰式写法

<select id="queryCarousel" resultType="com.jingling.basic.po.Carousel">     SELECT id, poster_id AS posterId, poster_name AS posterName, description AS description , photo_path AS photoPath, create_time AS createTime     FROM carousel     LIMIT #{start}, #{size}  </select>   <select id="countCarousel" resultType="int">    SELECT COUNT(*) FROM carousel  </select>

（2）service

  /**   * 查询全部轮播信息   *   * @return   */  List<Carousel> queryCarousel(Integer page,Integer size);   /**   * 查询轮播记录条数   *   * @return   */  Integer countCarousel();

（3）serviceImpl（注意要有@Service注解）

 @Autowired  private CarouselMapper carouselMapper;   @Override  public List<Carousel> queryCarousel(Integer page,Integer size) {    if(page == null || page <= 0){      page = 1;    }    if (size == null || size <= 0){      size = 10;    }     Integer start = (page - 1) * size;    return carouselMapper.queryCarousel(start,size);  }   @Override  public Integer countCarousel() {    return carouselMapper.countCarousel();  }

（4）Controller（注意要有@RequestController注解）