easyui datagrid 添加分页事件
1.定义一个datagrid
<table id="dg" style="width: 100%; height: 100%;" title="" pagination="true" singleSelect="true" rownumbers="true"></table>
2.初始化datagrid
//初始化datagrid $("#dg").datagrid({ title: title, toolbar: '#tb', url: '', fitColumns: false, pagination: true, rownumbers: true, singleSelect: false, selectOnCheck: false, loadMsg: "正在加载数据...",// frozenColumns: [[ ]], columns: [[ { field: 'ID', title: '序号', align: 'center', hidden: true }, { field: 'operate', title: '操作', align: 'center', width: 60, formatter: function (value, row, index) { var str = '<img src="/Themes/easyui/icons/pencil.png" title="修改" alt="修改" onclick="Edit()"> <img src="/Themes/easyui/icons/cancel.png" title="删除" alt="删除" onclick="Del()">'; return str; } }, { field: 'DeviceCode', title: '编号', width: 90, align: 'center', sortable: true }, { field: 'DeviceType', title: '类型', sortable: 'true', width: 80, align: 'center', sortable: true }, { field: 'Manufacturer', title: '制造厂家', width: 110, align: 'center', sortable: true }, { field: 'SpecificationType', title: '规格型号', width: 90, align: 'center', sortable: true }, { field: 'CertificateCode', title: '证书编号', width: 100, align: 'center', sortable: true }, { field: 'VerificationInstitution', title: '检定机构', width: 100, align: 'center' }, { field: 'CheckDate', title: '检定日期', width: 100, align: 'center' }, { field: 'ChkeckExpireDate', title: '到检时间', width: 100, align: 'center' }, { field: 'CheckPeriod', title: '检定周期', width: 60, align: 'center' }, { field: 'UseStatusName', title: '使用状态', width: 70, align: 'center' }, { field: 'UseStatus', title: '使用状态', width: 0, hidden: true }, { field: 'DevieceLevel', title: '级别', width: 0, hidden: true }, { field: 'DesignParameters', title: '设计参数', width: 0, hidden: true }, { field: 'SetupPosition', title: '安装位置', width: 90, align: 'center' }, { field: 'FileNames', title: '文件名称', width: 80, hidden: true }, { field: 'FilePaths', title: '附件', width: 120, formatter: function (value, row, index) { var str = ''; //../Files/UploadFile/Safety/ //判断是否存在附件 if (value != undefined) { if (value != '') { var arryFilePaths = new Array(); var arryFileNames = new Array(); arryFilePaths = value.split(","); arryFileNames = row.FileNames.split(","); //console.log('arryFilePaths=', arryFilePaths); for (i = 0; i < arryFilePaths.length; i++) { str += ' <a href="../Files/UploadFile/Safety/' + arryFilePaths[i] + '" title="' + arryFileNames[i] + '"><img src="/Themes/easyui/icons/report_go.png"></a>'; } } } return str; } } ]], pagination: true });
3.添加分页事件监听
var pg = $("#dg").datagrid("getPager"); if (pg) { $(pg).pagination({ onBeforeRefresh: function () { //刷新前 }, onRefresh: function (pageNumber, pageSize) { //刷新时 }, onChangePageSize: function () { //更改分页数字 }, onSelectPage: function (pageNumber, pageSize) { //分页选择,上一页、下一页、首页、尾页 //如果想保持datagrid继续编号 就添加以下代码 var gridOpts = $('#dg').datagrid('options'); gridOpts.pageNumber = pageNumber; gridOpts.pageSize = pageSize; //调用后台ajax方法获取动态数据 getData(pageNumber, pageSize, null, null) } }); }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!