您的位置:首页 > 数据库 > Oracle

MyBatis 分别结合 SQL Server、MySQL、ORACLE进行数据库分页

2017-12-13 12:43 417 查看
这里的实现相对于那些使用分页插件来说其实很简单,从页面上绑定得到第几页、每页数据条数,进行数据库分页实现。

这里使用到了bootstrap-table.js插件,可以结合中文插件bootstrap-table-zh-CN.js进行使用,这里贴出中文插件源码:

/**
* Bootstrap Table Chinese translation
* Author: Zhixin Wen<wenzhixin2010@gmail.com>
*/
(function ($) {
'use strict';

$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加载数据中,请稍候……';
},
formatRecordsPerPage: function (pageNumber) {
return '每页显示 ' + pageNumber + ' 条记录';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录,总共 ' + totalRows + ' 条记录';
},
formatSearch: function () {
return '搜索';
},
formatNoMatches: function () {
return '没有找到匹配的记录';
},
formatPaginationSwitch: function () {
return '隐藏/显示分页';
},
formatRefresh: function () {
return '刷新';
},
formatToggle: function () {
return '切换';
},
formatColumns: function () {
return '列';
},
formatExport: function () {
return '导出数据';
},
formatClearFilters: function () {
return '清空过滤';
}
};

$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);

})(jQuery);


下边开始我的实现过程:

页面部分:

index.html:

<div class="panel-body" style="padding-bottom:0px;">
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="tb_permissions"></table>
</div>

<script src="assets/js/index.js" type="text/javascript"></script>
<script type="text/javascript">
var oTable = new TableInit();
oTable.Init();

var oButtonInit = new ButtonInit();
oButtonInit.Init();
</script>


index.js:

var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_permissions').bootstrapTable({
url: 'rbac/users/data.json',       //请求后台的URL(*)
method: 'get',                      //请求方式(*)
toolbar: '#toolbar',                //工具按钮用哪个容器
striped: true,                      //是否显示行间隔色
cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true,                   //是否显示分页(*)
sortable: false,                    //是否启用排序
sortOrder: "asc",                   //排序方式
queryParams: oTableInit.queryParams,//传递参数(*)
sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1,                       //初始化加载第一页,默认第一页
pageSize: 10,                       //每页的记录行数(*)
pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true,                  //是否显示所有的列
showRefresh: true,                  //是否显示刷新按钮
minimumCountColumns: 2,             //最少允许的列数
clickToSelect: true,                //是否启用点击选中行
height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
cardView: false,                    //是否显示详细视图
detailView: false,                  //是否显示父子表
columns: [{
checkbox: true
}, {
field: 'username',
title: '用户名称'
}, {
field: 'locked',
title: '用户状态'
}, {
field: 'roles',
title: '角色列表'
}, {
field: 'desc',
title: '信息概要'
}, {
field: 'create_time',
title: '创建时间'
},{
field: 'last_update_time',
title: '最后修改时间'
}]
});
};

//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = {   //这里的键的名字和控制器的变量名必须一致,这边改动,控制器也需要改成一样的
limit: params.limit,   //页面大小对应上边的pageSize: 10
offset: params.offset  //页码 (pageNumber - 1)*pageSize
};
return temp;
};
return oTableInit;
};

var ButtonInit = function () {
var oInit = new Object();
var postdata = {};

oInit.Init = function () {
//$("#btn_add").click(function () {
//    $("#myModalLabel").text("新增");
//    $("#myModal").find(".form-control").val("");
//    $('#myModal').modal()

//    postdata.DEPARTMENT_ID = "";
//});

//$("#btn_edit").click(function () {
//    var arrselections = $("#tb_departments").bootstrapTable('getSelections');
//    if (arrselections.length > 1) {
//        toastr.warning('只能选择一行进行编辑');

//        return;
//    }
//    if (arrselections.length <= 0) {
//        toastr.warning('请选择有效数据');

//        return;
//    }
//    $("#myModalLabel").text("编辑");
//    $("#txt_departmentname").val(arrselections[0].DEPARTMENT_NAME);
//    $("#txt_parentdepartment").val(arrselections[0].PARENT_ID);
//    $("#txt_departmentlevel").val(arrselections[0].DEPARTMENT_LEVEL);
//    $("#txt_statu").val(arrselections[0].STATUS);

//    postdata.DEPARTMENT_ID = arrselections[0].DEPARTMENT_ID;
//    $('#myModal').modal();
//});

//$("#btn_delete").click(function () {
//    var arrselections = $("#tb_departments").bootstrapTable('getSelections');
//    if (arrselections.length <= 0) {
//        toastr.warning('请选择有效数据');
//        return;
//    }

//    Ewin.confirm({ message: "确认要删除选择的数据吗?" }).on(function (e) {
//        if (!e) {
//            return;
//        }
//        $.ajax({
//            type: "post",
//            url: "/Home/Delete",
//            data: { "": JSON.stringify(arrselections) },
//            success: function (data, status) {
//                if (status == "success") {
//                    toastr.success('提交数据成功');
//                    $("#tb_departments").bootstrapTable('refresh');
//                }
//            },
//            error: function () {
//                toastr.error('Error');
//            },
//            complete: function () {

//            }

//        });
//    });
//});

//$("#btn_submit").click(function () {
//    postdata.DEPARTMENT_NAME = $("#txt_departmentname").val();
//    postdata.PARENT_ID = $("#txt_parentdepartment").val();
//    postdata.DEPARTMENT_LEVEL = $("#txt_departmentlevel").val();
//    postdata.STATUS = $("#txt_statu").val();
//    $.ajax({
//        type: "post",
//        url: "/Home/GetEdit",
//        data: { "": JSON.stringify(postdata) },
//        success: function (data, status) {
//            if (status == "success") {
//                toastr.success('提交数据成功');
//                $("#tb_departments").bootstrapTable('refresh');
//            }
//        },
//        error: function () {
//            toastr.error('Error');
//        },
//        complete: function () {

//        }

//    });
//});

//$("#btn_query").click(function () {
//    $("#tb_departments").bootstrapTable('refresh');
//});
};

return oInit;
};


action片段:

@RequestMapping(value = "data", method = RequestMethod.GET)
public Object getUserList(String limit, String offset, ModelMap model) {
List<User> list = userService.findUserList(offset, limit);
int count = userService.getUserCount();
logger.info("return data:[{}]", list);
logger.info("data count:[{}]", count);
model.addAttribute("list", list);
model.addAttribute("size", count);
return "rbac/list";
}


dao片段:

List<User> findAllUsers(@Param("offset")int offset, @Param("limit")int limit);


sql片段(MySQL):

<!-- 查找所有用户 -->
<select id="findAllUsers" resultMap="userMap">
select * from sys_users limit #{offset},#{limit}
</select>


sql片段(SQL SERVER):

<!-- 查找所有用户 -->
<select id="findAllUsers" resultMap="userMap">
SELECT top ${offset} *
from sys_users
where
id not in (
select top ${offset} id from tablename
)
order by id
</select>


sql片段(ORACLE):

<!-- 查找所有用户 -->
<select id="findAllUsers" resultMap="userMap">
SELECT *  FROM (
SELECT *, ROWNUM rn FROM sys_users
WHERE
rn >= #{offset} AND rn <= #{offset} +  #{limit}
</select>


list.json:

{
<#if list??>
"rows": [
<#list list as user>
{
"username": "${user.username}",
"locked": "<#if user.locked==false>激活<#else>锁定</#if>",
"roles": "",
"desc": "${user.desc}",
"create_time": "${user.createTime?datetime}",
"last_update_time": "${user.lastUpdateTime?datetime}"
}
<#sep>,
</#list>
],
"total": ${size}
</#if>
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息