DataTables分页和pageHelper分页

最新推荐文章于 2024-08-10 07:04:27 发布

Artoro

最新推荐文章于 2024-08-10 07:04:27 发布

阅读量2.1k

点赞数

分类专栏： web框架文章标签：分页 pageHelper DataTables

本文链接：https://blog.csdn.net/Artoro/article/details/78982410

版权

本文主要介绍在项目中常用的两种分页技术——DataTables JavaScript分页和pageHelper Java分页插件的使用。DataTables提供强大的前端分页功能，而pageHelper则在后端进行高效的数据库分页处理。通过结合这两者，可以实现高效且用户体验良好的分页效果。

摘要由CSDN通过智能技术生成

对于绝大部分的项目而言，都需要查询出列表；而便于浏览和操作，分页是每个项目中必不可少的功能之一

在这里整理两个分页的插件 DataTables(js分页)和pageHelper分页可以在这两个链接中进行扩展

1. DataTables分页

下载好DataTables的压缩包后，在jsp页面中引用

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>DataTable</title>
    <meta charset="utf-8" http-equiv="content-type" content="text/html">
    <script src=" <%request.getContextPath();%>/resources/jQuery/jquery-3.2.1.min.js"></script>
    <link href=" <%request.getContextPath();%>/resources/bootStrap/css/bootstrap.min.css" rel="stylesheet">
    <script src=" <%request.getContextPath();%>/resources/bootStrap/js/bootstrap.min.js"></script>
    <script src="<%request.getContextPath();%>/resources/DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="<%request.getContextPath();%>/static/testViews/TestDataTable.js"></script>
    <script src="<%request.getContextPath();%>/resources/DataTables/DataTables-1.10.16/js/jquery.dataTables.js"></script>
    <script src="<%request.getContextPath();%>/resources/DataTables/DataTables-1.10.16/js/dataTables.bootstrap.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <table class="display table table-hover" cellspacing="0" width="100%" id="example"></table>
    </div>

</div>

</body>
</html>

这是我jsp页面

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax":{
            url:"/svl/indexAndPageManage/dataTableForList",
        },
        "columns": [
            {  //此处为隐藏处（可参照官网的例子）
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            {
                "title": "测试次数",
                "type": "html",
                "data": "indexid",
                "defaultContent": "",
                "name": "indexid"
            },
            {
                "title": "测试状态",
                "type": "html",
                "data": "indexstatus",
                "defaultContent": "",
                "name": "indexstatus",
                "render":function(data, type, full, meta){
                    if(data == 0){
                        return "未发布";
                    }
                    if(data == 1){
                        return "已发布";
                    }
                }
            },
            {
                // "width":150,
                "title": "操作",
                className:"questionPageOper",
                "type&#