如何获取easy-ui的表格的分页大小

Trust yourself2432025-09-04 10:40

关键代码

javascript 复制代码 
// 页面加载时初始化表格（只执行一次）
        $(function() {
            // 初始化表格配置
            $('#dgList').datagrid({
                url: 'TMSMST0810/queryList',
                loadMsg: '数据加载中，请稍候...',
                striped: true,
                pagination: true,  // 启用分页
                pageSize: 100,     // 默认每页条数
                pageNumber: 1,     // 默认页码
                pageList: [50, 100, 200], // 可选每页条数
                onLoadSuccess: function (result) {
                    if (result.resultFlg === 'success') {
                        // 加载数据（如果后端返回的不是标准格式，需要手动设置）
                        $(this).datagrid('loadData', {
                            total: result.total,
                            rows: result.rows
                        });
                    }
                },
                onLoadError: function () {
                    console.log("数据加载失败！");
                    alertMsgDefaultTitle("TMS系统异常！请稍后再试！", "error");
                }
            });

            // 获取分页控件并绑定事件（关键）
            var pager = $('#dgList').datagrid('getPager');
            pager.pagination({
                // 页码切换时触发（下一页/上一页/直接输入页码）
                onSelectPage: function(pageNum, pageSize) {
                    searchKilometersInfo(pageNum, pageSize);
                },
                // 刷新按钮点击时触发
                onRefresh: function(pageNum, pageSize) {
                    searchKilometersInfo(pageNum, pageSize);
                },
                // 切换每页条数时触发
                onChangePageSize: function(pageSize) {
                    // 切换每页条数后从第1页开始
                    searchKilometersInfo(1, pageSize);
                }
            });
            // 初始加载第一页数据
            searchKilometersInfo(1, 100);
        });

        // 查询函数：只负责加载数据，不重复初始化表格
        function searchKilometersInfo(pageNum, pageSize) {
            var kilometersInfoBo = {
                startLocationCode: $('#startLocationCode').val(),
                targetLocationCode: $('#targetLocationCode').val(),
                pageNum: pageNum || 1,
                pageSize: pageSize || 100
            };

            // 调用reload方法刷新数据（使用已初始化的表格）
            $('#dgList').datagrid('reload', kilometersInfoBo);
        }

完整代码

javascript 复制代码 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
    <title>距离主档</title>
    <jsp:include page="../_template/head.jsp"></jsp:include>
    <script type="text/javascript" lang="javascript">
        function SetWinHeight() {
            var cHeight = $('div.tabs-panels', window.parent.document).height();
            var tHeight = $('#ToolBar').height();
            var pHeight = $('#PageHeader').height();
            var dgHeight = cHeight - tHeight - pHeight;
            $('#dgList').datagrid('resize', {
                height: dgHeight - 15
            });
        }
        $(window).resize(function () {
            SetWinHeight();
        });
        function searchKiloMetersInfo() {

        }

        function newKieleMetersInfo() {
            alert("新增");
            $.ajax({
                url: 'TMSPROC0050/deleteData?accidentIds=' + accidentIds.join(','),
                type: 'DELETE',
                dataType: 'json',
                success: function (result) {
                    $('#accidentGrid').datagrid('reload');
                    $.messager.show({
                        title: '成功',
                        msg: result.message
                    })
                },
                error: function (result) {
                    $.messager.alert({
                        title: '失败',
                        msg: result.message
                    })
                }
            })
        }

        function updKielMetersInfo() {
            alert("修改");
            $.ajax({
                url: 'TMSPROC0050/deleteData?accidentIds=' + accidentIds.join(','),
                type: 'DELETE',
                dataType: 'json',
                success: function (result) {
                    $('#accidentGrid').datagrid('reload');
                    $.messager.show({
                        title: '成功',
                        msg: result.message
                    })
                },
                error: function (result) {
                    $.messager.alert({
                        title: '失败',
                        msg: result.message
                    })
                }
            })
        }

        function delKieleMetersInfo() {
            alert("删除");
            $.ajax({
                url: 'TMSPROC0050/deleteData?accidentIds=' + accidentIds.join(','),
                type: 'DELETE',
                dataType: 'json',
                success: function (result) {
                    $('#accidentGrid').datagrid('reload');
                    $.messager.show({
                        title: '成功',
                        msg: result.messages
                    })
                },
                error: function (result) {
                    $.messager.alert({
                        title: '失败',
                        msg: result.message
                    })
                }
            })
        }

        // 页面加载时初始化表格（只执行一次）
        $(function() {
            // 初始化表格配置
            $('#dgList').datagrid({
                url: 'TMSMST0810/queryList',
                loadMsg: '数据加载中，请稍候...',
                striped: true,
                pagination: true,  // 启用分页
                pageSize: 100,     // 默认每页条数
                pageNumber: 1,     // 默认页码
                pageList: [50, 100, 200], // 可选每页条数
                onLoadSuccess: function (result) {
                    if (result.resultFlg === 'success') {
                        // 加载数据（如果后端返回的不是标准格式，需要手动设置）
                        $(this).datagrid('loadData', {
                            total: result.total,
                            rows: result.rows
                        });
                    }
                },
                onLoadError: function () {
                    console.log("数据加载失败！");
                    alertMsgDefaultTitle("TMS系统异常！请稍后再试！", "error");
                }
            });

            // 获取分页控件并绑定事件（关键）
            var pager = $('#dgList').datagrid('getPager');
            pager.pagination({
                // 页码切换时触发（下一页/上一页/直接输入页码）
                onSelectPage: function(pageNum, pageSize) {
                    searchKilometersInfo(pageNum, pageSize);
                },
                // 刷新按钮点击时触发
                onRefresh: function(pageNum, pageSize) {
                    searchKilometersInfo(pageNum, pageSize);
                },
                // 切换每页条数时触发
                onChangePageSize: function(pageSize) {
                    // 切换每页条数后从第1页开始
                    searchKilometersInfo(1, pageSize);
                }
            });
            // 初始加载第一页数据
            searchKilometersInfo(1, 100);
        });

        // 查询函数：只负责加载数据，不重复初始化表格
        function searchKilometersInfo(pageNum, pageSize) {
            var kilometersInfoBo = {
                startLocationCode: $('#startLocationCode').val(),
                targetLocationCode: $('#targetLocationCode').val(),
                pageNum: pageNum || 1,
                pageSize: pageSize || 100
            };

            // 调用reload方法刷新数据（使用已初始化的表格）
            $('#dgList').datagrid('reload', kilometersInfoBo);
        }
    </script>
</head>
<body>
<div id="ToolBar" class="panel-header" style="padding:1px;">
    <a href="javascript:void(0)" class="easyui-linkbutton"
       iconCls="icon-add" plain="true" onclick="newKieleMetersInfo()">新增</a> <a
        href="javascript:void(0)" class="easyui-linkbutton"
        iconCls="icon-edit" plain="true" onclick="updKielMetersInfo()">修改</a>
    <a href="javascript:void(0)" class="easyui-linkbutton"
       iconCls="icon-remove" plain="true" onclick="delKieleMetersInfo()">删除</a>
    <%--    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-excel" plain="true" onclick="exportExcel()">导出EXCEL</a>--%>
</div>
<div style="width:100%;"></div>
<div id="PageHeader" class="easyui-panel" style="overflow: hidden; width: 100%; padding: 0px;">
    <table  style="width: 100%;heignt:95%">
        <tr>
            <td style="width: 80px">出发点代码:</td>
            <td style="width:90px"><input class="easyui-textbox"
                                          id="startLocationCode" style="width:100px"
                                          data-options="prompt:'请选择出发点',
                    icons:[{iconCls:'icon-search',handler:searchKilometersInfo}]"></td>
            <td style="width:90px"><input class="easyui-textbox"
                                          id="startLocationName" style="width:100px"
                                          data-options="prompt:'出发点名称',"></td>
            <td style="width: 80px;">目的地代码:</td>
            <td style="width:90px"><input class="easyui-textbox"
                                          id="targetLocationCode" style="width:100px"
                                          data-options="prompt:'请选择目的地',
                    icons:[{iconCls:'icon-search',handler:searchKilometersInfo}]"></td>
            <td style="width:90px"><input class="easyui-textbox"
                                          id="targetLocationName" style="width:100px"
                                          data-options="prompt:'目的地名称',"></td>
            <td align="right"><a href="javascript:void(0)"
                                 class="easyui-linkbutton" data-options="iconCls:'icon-search'"
                                 onclick="searchKilometersInfo();">检索</a></td>
        </tr>
    </table>
</div>

<%--<table id="dgList" class="easyui-datagrid"--%>
<%--       style="width: 100%; height: 720px;"--%>
<%--       data-options="--%>
<%--               singleSelect: true,--%>
<%--               rownumbers: true,--%>
<%--               fitColumns: true,--%>
<%--               pagination: true,--%>
<%--               pageSize: 20,--%>
<%--               pageNumber: 1,--%>
<%--               pageList: [20, 50, 100]--%>
<%--           ">--%>
<table id="dgList" class="easyui-datagrid" style="width:100%;height:720px;" pagination="true" pageSize="100"
       autoRowHeight="false" rownumbers="true" fitColumns="true" singleSelect="true" >
    <thead>
    <tr>
        <!-- 在data-options中添加hidden:true -->
        <th data-options="field:'id',hidden:true">编号</th>
        <th data-options="field:'selecteds',width:120,halign:'center',checkbox:true">选择</th>
        <th data-options="field:'startlocationcode',width:80">出发点代码</th>
        <th data-options="field:'startlocationname',width:80">出发点名称</th>
        <th data-options="field:'targetlocationcode',width:80">目的地代码</th>
        <th data-options="field:'targetlocationname',width:80">目的地名称</th>
        <th data-options="field:'distance',width:80">距离</th>
        <th data-options="field:'createtime',width:80">备注</th>
        <th data-options="field:'updatetime',width:80">更新时间</th>
        <th data-options="field:'updateuser',width:80">更新人</th>
    </tr>

</table>
</body>

后端接收

controller

java 复制代码 
package app.controller.master;

import app.commons.fw.springMvc.ControllerBase;
import app.model.master.KilometersInfoBo;
import app.model.master.Kilometersinfo;
import app.service.master.KilometersInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.Map;

/**
 * ClassName:DistanceInfo
 * Package:app.controller.master
 * DESCRIPTION:
 *
 * @Author zzc
 * @Create 2025/9/2 11:16
 * @Version
 */
@Controller
public class KilometersInfo extends ControllerBase {

    @Autowired
    private KilometersInfoService kilometersInfoService;

    @RequestMapping(value = "/TMSMST0180/show")
    public String _jsp() {
        return "master/TMSMST0180";
    }
    @ResponseBody
    @RequestMapping(value = "/TMSMST0810/queryList", method = RequestMethod.POST)
    public Map<String, Object> queryList( KilometersInfoBo kilometersInfoBo) {
        return kilometersInfoService.selKilometersInfo(kilometersInfoBo, getLoginObject());
    }
    @ResponseBody
    @RequestMapping(value = "/TMSMST0180/addDistance")
    public Map<String, Object> addDistance(Kilometersinfo kilometersInfo) {
        return kilometersInfoService.addKilometersInfo(kilometersInfo, getLoginObject());
    }

    @ResponseBody
    @RequestMapping(value = "/TMSMST0180/deleteDistance")
    public Map<String, Object> deleteDistance(Kilometersinfo kilometersInfo) {
        return kilometersInfoService.updateKilometersInfo(kilometersInfo, getLoginObject());
    }

    @ResponseBody
    @RequestMapping(value = "/TMSMST0180/updateDistance")
    public Map<String, Object> updateDistance(String kilometersInfoId) {
        return kilometersInfoService.deleteKilometersInfo(kilometersInfoId);
    }
}

service

java 复制代码 
public interface KilometersInfoService {
    //查询数据
    Map<String, Object> selKilometersInfo(KilometersInfoBo kilometersInfoBo, UserValueObject uvo);
    //新增数据
    Map<String, Object> addKilometersInfo(Kilometersinfo kilometersInfo, UserValueObject uvo);
    //修改数据
    Map<String, Object> updateKilometersInfo(Kilometersinfo kilometersInfo, UserValueObject uvo);
    //删除数据
    Map<String, Object> deleteKilometersInfo(String kilometersInfoId);
}

serviceImpl

java 复制代码 
package app.service.master;

import app.commons.constants.Constants;
import app.commons.uvo.UserValueObject;
import app.controller.master.KilometersInfo;
import app.mapper.master.KilometersInfoMapper;
import app.model.master.KilometersInfoBo;
import app.model.master.Kilometersinfo;
import org.apache.commons.collections.CollectionUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Collections;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * ClassName:KilometersInfoServiceImpl
 * Package:app.service.master
 * DESCRIPTION:
 *
 * @Author zzc
 * @Create 2025/9/2 14:32
 * @Version
 */
@Service
public class KilometersInfoServiceImpl implements KilometersInfoService{

    @Autowired
    private KilometersInfoMapper kilometersInfoMapper;

    @Override
    public Map<String, Object> selKilometersInfo(KilometersInfoBo kilometersInfoBo, UserValueObject loginObject) {
        Map<String, Object> result = new HashMap<>();
        try{
            List<Kilometersinfo> kilometersInfos = kilometersInfoMapper.selKilometersInfo(kilometersInfoBo, loginObject.getOwnerID(), loginObject.getProjectCode());
            if(CollectionUtils.isNotEmpty(kilometersInfos) ){
                result.put(Constants.RESULT_FLG, Constants.SUCCESS);
                result.put(Constants.ROWS, kilometersInfos);
                result.put(Constants.MESSAGES, "查询成功");
                result.put(Constants.TOTAL, kilometersInfos.get(0).getTotal());
            }else{
                result.put(Constants.RESULT_FLG, Constants.SUCCESS);
                result.put(Constants.ROWS, kilometersInfos);
                result.put(Constants.MESSAGES, "查询成功");
                result.put(Constants.TOTAL, 0);
            }

        }catch(Exception e){
            e.printStackTrace();
            result.put(Constants.MESSAGES, e.getMessage());
            result.put(Constants.RESULT_FLG, Constants.FAILURE);
        }
        return result;
    }

    @Override
    public Map<String, Object> addKilometersInfo(Kilometersinfo kilometersInfo, UserValueObject loginObject) {
        Map<String, Object> result = new HashMap<>();
        try{
            kilometersInfo.setOwnerid(loginObject.getOwnerID());
            kilometersInfo.setProjectcode(loginObject.getProjectCode());
            boolean b = kilometersInfoMapper.addKilometersInfo(kilometersInfo);
            if(b){
                result.put(Constants.RESULT_FLG, Constants.SUCCESS);
            }else{
                result.put(Constants.MESSAGES, "添加0条数据");
                result.put(Constants.RESULT_FLG, Constants.FAILURE);
            }
        }catch (Exception e){
            e.printStackTrace();
            result.put(Constants.MESSAGES, e.getMessage());
            result.put(Constants.RESULT_FLG, Constants.FAILURE);
        }
        return result;
    }

    @Override
    public Map<String, Object> updateKilometersInfo(Kilometersinfo kilometersInfo, UserValueObject loginObject) {
        Map<String, Object> result = new HashMap<>();
        try{
            kilometersInfo.setOwnerid(loginObject.getOwnerID());
            kilometersInfo.setProjectcode(loginObject.getProjectCode());
            Integer integer = kilometersInfoMapper.updateKilometersInfo(kilometersInfo);
            if(integer == 1){
                result.put(Constants.RESULT_FLG, Constants.SUCCESS);
            }else {
                result.put(Constants.MESSAGES, "更新0条数据");
                result.put(Constants.RESULT_FLG, Constants.FAILURE);
            }
        }catch (Exception e){
            e.printStackTrace();
            result.put(Constants.MESSAGES, e.getMessage());
            result.put(Constants.RESULT_FLG, Constants.FAILURE);
        }
        return result;
    }

    @Override
    public Map<String, Object> deleteKilometersInfo(String kilometersInfoId) {
        Map<String, Object> result = new HashMap<>();
        try{
            Integer integer = kilometersInfoMapper.deleteKilometersInfo(Long.valueOf(kilometersInfoId));
            if(integer == 1){
                result.put(Constants.RESULT_FLG, Constants.SUCCESS);
            }else {
                result.put(Constants.MESSAGES, "删除0条数据");
                result.put(Constants.RESULT_FLG, Constants.FAILURE);
            }
        }catch (Exception e){
            e.printStackTrace();
            result.put(Constants.MESSAGES, e.getMessage());
            result.put(Constants.RESULT_FLG, Constants.FAILURE);
        }

        return Collections.emptyMap();
    }
}

mapper

java 复制代码 
package app.mapper.master;

import app.controller.master.KilometersInfo;
import app.model.master.KilometersInfoBo;
import app.model.master.Kilometersinfo;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * ClassName:KilometersInfoMapper
 * Package:app.mapper.master
 * DESCRIPTION:
 *
 * @Author zzc
 * @Create 2025/9/2 14:32
 * @Version
 */
@Mapper
public interface KilometersInfoMapper {

    // 查询所有
    List<Kilometersinfo> selKilometersInfo(@Param("kilometersInfoBo")KilometersInfoBo kilometersInfoBo,
                                           @Param("ownerid")String ownerid,
                                           @Param("projectcode")String projectcode);
    // 添加
    boolean addKilometersInfo(@Param("kilometersInfo") Kilometersinfo kilometersInfo);
    // 修改
    Integer updateKilometersInfo(@Param("kilometersInfo")Kilometersinfo kilometersInfo);
    // 删除
    Integer deleteKilometersInfo(@Param("kilometersInfoId")Long kilometersInfoId);

}

xml（oracle的分页）

java 复制代码 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="app.mapper.master.KilometersInfoMapper">
    <insert id="addKilometersInfo">
        insert into kilometersinfo (ownerid, projectcode, id, startLocationCode, targetLocationCode, startLocationName,
                                    targetLocationName, distance, remark, createby, createtime)
        values (#{ownerid}, #{projectcode}, #{id}, #{startLocationCode}, #{targetLocationCode}, #{startLocationName},
                #{targetLocationName}, #{distance}, #{remark}, #{createby}, sysdate)
    </insert>
    <update id="updateKilometersInfo">
        update kilometersinfo
        set startLocationCode  = #{kilometersInfo.startLocationCode},
            targetLocationCode = #{kilometersInfo.targetLocationCode},
            startLocationName  = #{kilometersInfo.startLocationName},
            targetLocationName = #{kilometersInfo.targetLocationName},
            distance           = #{kilometersInfo.distance},
            remark             = #{kilometersInfo.remark},
            uodateby           = #{kilometersInfo.updateby},
            updatetime         = sysdate
        where ownerid = #{kilometersInfo.ownerid}
          and projectcode = #{kilometersInfo.projectcode}
          and id = #{kilometersInfo.id}
    </update>
    <delete id="deleteKilometersInfo">
        delete
        from kilometersinfo
        where id = #{kilometersInfoId}
    </delete>
    <select id="selKilometersInfo" resultType="app.model.master.Kilometersinfo">
        <![CDATA[
        SELECT *
        FROM (
            SELECT TEMPTABLE.*,
                   ROW_NUMBER() OVER (ORDER BY CREATETIME DESC) AS No000  -- 按创建时间降序排序
            FROM (
                SELECT t.*,
                       COUNT(*) OVER () AS total  -- 计算总记录数
                FROM kilometersinfo t
                WHERE 1 = 1
                  AND t.ownerid = #{ownerid}
                  AND t.projectcode = #{projectcode}
        ]]>
                <if test="kilometersInfoBo.startLocationCode != null and kilometersInfoBo.startLocationCode != ''">
                    <![CDATA[ AND t.startLocationCode = #{kilometersInfoBo.startLocationCode} ]]>
                </if>
                <if test="kilometersInfoBo.targetLocationCode != null and kilometersInfoBo.targetLocationCode != ''">
                    <![CDATA[ AND t.targetLocationCode = #{kilometersInfoBo.targetLocationCode} ]]>
                </if>
                <![CDATA[
                ORDER BY t.CREATETIME DESC  -- 排序条件
            ) TEMPTABLE
        )
        WHERE No000 > (#{kilometersInfoBo.pageNum} - 1) * #{kilometersInfoBo.pageSize}  -- 分页起始位置
          AND No000 <= #{kilometersInfoBo.pageNum} * #{kilometersInfoBo.pageSize}  -- 分页结束位置
        ]]>
    </select>
</mapper>
相关推荐
三十_A12 分钟前
【实录】使用 Verdaccio 从零搭建私有 npm 仓库（含完整步骤及避坑指南）
前端·npm·node.js
huangql52017 分钟前
从零到一打造前端内存监控 SDK，并发布到 npm ——基于 TypeScript + Vite + ECharts的解决方案
前端·typescript·echarts
weixin_4569042719 分钟前
离线下载npm包
前端·npm·node.js
低代码布道师20 分钟前
少儿舞蹈小程序（19）地址列表功能实现及默认地址逻辑
前端·低代码·小程序
90后的晨仔22 分钟前
Vue3 + TypeScript + Pinia 实战全解析
前端
90后的晨仔27 分钟前
Vue 3 + TypeScript + Pinia 实战架构指南
前端
妄小闲43 分钟前
免费html网页模板 html5网站模板 静态网页模板
前端·html·html5
zuoyou-HPU43 分钟前
QT中的pyodbc.connect（）函数
服务器·数据库·oracle
last_zhiyin1 小时前
Oracle sql tuning guide 翻译 Part 6-3 --- 用Hint影响优化器
数据库·sql·oracle·优化器·hint
静若繁花_jingjing1 小时前
数据库连接池原理
数据库·oracle
热门推荐
01UV 工具安装与国内镜像源配置指南02GitHub 镜像站点03Multisim使用教程详尽版--(2025最新版)04UV安装并设置国内源05KGG转MP3工具|非KGM文件|解密音频0646个Nano-banana 精选提示词，持续更新中07Spec-Kit 使用指南08VsCode远程Copilot无法使用Claude Agent问题09jdk21下载、安装（Windows、Linux、macOS）10阿里最新开源Wan2.2-Animate-14B 本地部署教程：统一双模态框架，MoE架构赋能电影级角色动画与替换