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

来源：互联网发布：录音软件比特率编辑：程序博客网时间：2024/05/17 12:49

上一篇介绍了后台的分页，这一篇介绍前台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 0