SSM中实现dataTable插件实现分页

01下载资源文件

在BootStrap前端框架中将以下三个JS和CSS资源文件引入到项目中

<!-- DataTables -->
<script src="/static/assets/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

<!-- DataTables -->
<link rel="stylesheet" href="/static/assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">

02前端初始化启动dataTable插件

创建

<script>
$(function(){
     $("#dataTable").dataTable({
         "paging": true,  //是否开启本地分页
         "info": true,  //控制是否显示表格左下角的信息
         "lengthChange":false,  //是否允许用户改变表格每页显示的记录数
         "ordering":false,  //是否允许Datatables开启排序
         "processing":true,  //是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
         "searching":false, //是否允许Datatables开启本地搜索
         "serverSide":true,  //是否开启服务器模式
          "deferRender":true,  //控制Datatables的延迟渲染，可以提高初始化的速度
         "ajax":{   //增加或修改通过Ajax提交到服务端的请求数据
             "url":"/user/page"  //请求后台数据的url
         },
         "columns":[    //得到后台JSON数据包后，设置参数data中的的数据在表格中显示
             {"data":"id"},
             {"data":"username"},
             {"data":"phone"},
             {"data":"email"},
             {"data":"updated"},
             {
                 "data": function (row,type,val,meta) {
                     return '<a href="#" type="button" class="btn  btn-default btn-sm"><i class="fa fa-search"></i>查看</a>&nbsp;&nbsp;'+
                            '<a href="#" type="button" class="btn  btn-primary btn-sm"><i class="fa fa-edit"></i>编辑</a>&nbsp;&nbsp;'+
                            '<a href="#" type="button" class="btn  btn-danger  btn-sm"><i class="fa fa-trash-o"></i>删除</a>&nbsp;&nbsp;'
                 }
             }
             ],
    "language": { //国际化（英转中）
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
     });
 });
</script>

03后端相关代码

SpringMVC Controller层创建相应接口

@Controller
@RequestMapping(value = "user")
public class UserController {

    @Autowired
    private TbUserService tbUserService;

  /**
    *分页查询
     *@param request
     *@Return
     *
     */
    @ResponseBody
    @RequestMapping(value="page",method = RequestMethod.GET)
    public Map<String,Object> page(HttpServletRequest request){
        Map<String,Object> result =new HashMap<>();
        //dataTable会给后端传入以下三个参数
        String strDraw =request.getParameter("draw");    //绘制计数器。这个是用来确保Ajax从服务器返回的是对应的（Ajax是异步的，因此返回的顺序是不确定的）。 要求在服务器接收到此参数后再返回
        String strStart =request.getParameter("start");  //第一条数据的起始位置，比如0代表第一条数据
        String strLength =request.getParameter("length");   //一共需要的条数
        int draw = strDraw == null ? 0 : Integer.parseInt(strDraw);
        int start = strStart == null ? 0 : Integer.parseInt(strStart);
        int length = strLength == null ? 10 : Integer.parseInt(strLength);

        List<TbUser> tbUsers = tbUserService.page(start, length);
        for(TbUser tbUser :tbUsers){
            System.out.println(tbUser.getUsername());
        }
        int count =tbUserService.count(); //count为该表总的数据条数，需要另写相关dao层接口实现查询。
        result.put("draw", draw);
        result.put("recordsTotal", count);
        result.put("recordsFiltered", count);
        result.put("data", tbUsers);
        result.put("error", "");
        return result;
    }

服务层创建相应接口和实现类

//服务层接口类
public interface TbUserService {
/**
     *分页查询
     *@param start 记录开始的位置
     *@param length 每页记录数
     *@return
     *
     */
    List<TbUser> page(int start , int length);
}
//服务层接口实现类
@Service
public class TbUserServiceImpl implements TbUserService {

    @Autowired
    private TbUserDao tbUserDao;
    
    @Override
    public List<TbUser> page(int start, int length) {
    Map<String,Object> params=new HashMap<>();
    params.put("start",start);
    params.put("length",length);
    return tbUserDao.page(params);
    }

Dao层创建相应接口和mybatis的mapper.xml的sql语句撰写

//Dao接口
@Repository
public interface TbUserDao {

/**
     *分页查询
     *@param params 需要两个参数，start/记录开始的位置 length/每页记录数
     *@Return
     *
     */
    List<TbUser> page(Map<String,Object> params);
    }

//Dao对应的Mapper.xml实现sql
 <!--分页查询-->
<select id="page" resultType="TbUser" parameterType="java.util.Map">
    SELECT
    <include refid="tbUserColumns" />
    FROM
    tb_user AS a LIMIT #{start}, #{length}
</select>

04前端相关代码

  <table id="dataTable">
    <thead>
        <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>手机号</th>
        <th>邮箱号</th>
        <th>更新时间</th>
         <th>操作</th>
        </tr>
    </thead>
    <tbody>
     
    </tbody>
    </table>