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

来源:互联网 发布:淘宝店铺购物车营销 编辑:程序博客网 时间:2024/06/11 04:32

这里的实现相对于那些使用分页插件来说其实很简单,从页面上绑定得到第几页、每页数据条数,进行数据库分页实现。
这里使用到了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>}
原创粉丝点击