Hibernate+boostrapTable分页查询(——前台)

最新推荐文章于 2024-04-12 20:46:50 发布

勤劳并微笑着

最新推荐文章于 2024-04-12 20:46:50 发布

阅读量457

点赞数

分类专栏： bootstrap-table js 文章标签：分页 boostrap

本文链接：https://blog.csdn.net/qq_37791764/article/details/78343215

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

bootstrap-table

1 篇文章 0 订阅

订阅专栏

上一篇介绍了后台的分页，这一篇介绍前台bootstrapTable前台分页：

html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>客户管理</title>


<link href="../../plugin/bootstrap/css/bootstrap.min.css"
    rel="stylesheet" type="text/css" />
<link href="../../plugin/jquery-confirm/jquery-confirm.min.css"
    rel="stylesheet">
<link href="../../plugin/bootstrapTable/css/bootstrap-table.min.css"
    rel="stylesheet" type="text/css" />
<link
    href="../../plugin/bootstrapValidator/css/bootstrapValidator.min.css"
    rel="stylesheet" type="text/css" />


</head>
<body>

    <!-- 数据表格 -->
            <table id="dg" data-toggle="table" 
                data-unique-id="customerId"//唯一标识
                data-height="380"//表格高度
                data-ajax="ajaxRequest"//自定义 AJAX 方法,须实现 jQuery AJAX API

                //设置在哪里进行分页，可选值为 ‘client’ 或者 ‘server’。
                //设置 ‘server’时，必须设置 服务器数据地址（url）或者重写ajax方法
                data-side-pagination="server"

                /设置为 true 会在表格底部显示分页条
                data-pagination="true"


                >
                <thead>
                    <tr>
                        <th data-formatter="seqnumFormatter" class="col-xs-1"
                            data-align="center">序号</th>
                        <th data-field="customerId" data-align="center">客户Id</th>
                        <th data-field="customerName" data-align="center">客户名称</th>
                        <th data-field="creationUserName" data-align="center">创建人</th>
                        <th data-field="creationTime" data-align="center">创建时间</th>
                        <th data-field="modifiedUserName" data-align="center">修改人</th>
                        <th data-field="modifiedTime" data-align="center">上次修改时间</th>
                        <th data-formatter="operFormatter" class="col-sm-1"
                            data-align="center">操作</th>
                    </tr>
                </thead>
            </table>
        </div>
        <!-- panel-body -->
    </div>
    <!-- panel -->
</body>
<script src="../../plugin/jquery.min.js"></script>
<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
<script
    src="../../plugin/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<script src="../../plugin/jquery-confirm/jquery-confirm.min.js"></script>
<script src="../../plugin/bootstrapTable/js/bootstrap-table.min.js"></script>
<script src="../../plugin/jquery.formautofill.min.js"></script>
<script
    src="../../plugin/bootstrapTable/js/bootstrap-table-zh-CN.min.js"></script>

<script src="../../js/util/jqConfirmExtend.js"></script>
<script src="../../js/util/ajaxTimeout.js"></script>
<script src="../../js/project/customermanager.js"></script>
</html>

js代码

/**
 * ajax请求数据
 */

function ajaxRequest(params) {
    // data you need
    console.log(params.data);
    var jsonData=params.data;
    $.ajax({
        url : '../../customer/findByPageAndParams', //请求路径
        type: "POST",
        contentType:'application/json',
        data : JSON.stringify({"offset":jsonData.offset,"pageSize":jsonData.limit,"customerId":$('#customerIdSearch').val(),
            "customerName":$('#customerNameSearch').val(),
            "modifiedUser":$('#creationUserSearch').val(),
            "creationUser":$('#modifiedUserSearch').val()}),
        success : function(result) {
            if(result.status=="2000"){      
                 // just use setTimeout
                setTimeout(function () {
                    params.success({
                        total: result.data.total,//分页的总条数
                        rows: result.data.rows//表格数据
                    });
                }, 1000);

            }
        },
        error : function() {
        }
    });
}


/**
 * bootstrap table显示序号
 * 
 * @param value
 *            对应表格field的值
 * @param {Object}
 *            row 当前行的数据
 * @param {Number}
 *            index 行索引
 */
function seqnumFormatter(value,row,index){
    return index+1;
} 

/**
 * table显示详情按钮
 * 
 * @param value
 *            对应表格field的值
 * @param {Object}
 *            row 当前行的数据
 * @param {Number}
 *            index 行索引
 */
/**table显示修改、删除按钮
 * @param value 对应表格field的值
 * @param {Object} row 当前行的数据
 * @param {Number} index 行索引
 * */
function operFormatter(value,row,index){
    return "<button type='button' class='btn btn-default btn-xs' title='修改' onclick='modify("+row.customerId+")'><span class='text-primary glyphicon glyphicon-edit'></span></button>" +
            " <button type='button' class='btn btn-default btn-xs' title='删除' onclick='del("+index+","+row.customerId+")'><span class='text-primary glyphicon glyphicon-trash'></span></button>";
}

测试：

这里写图片描述

这样分页的前台就做好了

勤劳并微笑着

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Hibernate+boostrapTable分页查询(——前台)

上一篇介绍了后台的分页，这一篇介绍前台bootstrapTable前台分页：html代码  <table id="dg" data-toggle="table" data-unique-id="customerId"//唯一标识 data-height="380"//表格高度
复制链接

扫一扫

专栏目录