easy UI 前端分页

敲代码的设计师

已于 2022-04-22 15:22:09 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： easyUI javascript 文章标签：分页前端 ui

于 2016-05-20 11:37:18 首次发布

本文链接：https://blog.youkuaiyun.com/qinlang193320/article/details/51460439

easyUI 同时被 2 个专栏收录

4 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文详细介绍了如何结合jQuery和EasyUI库来实现前端页面的分页功能，包括调用方法和具体定义的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery配合easyUI实现分页功能

调用

 <div region="center" class="positionR">
     <table id="TemplateList"></table>
 </div>

定义

$("#TemplateList").datagrid({
      title: '报警模板列表',
      iconCls: 'icon-save',//easy-ui一个包含图标的CSS类ID
//            fit: true,
      width: 'auto',
      height: 'auto',
      nowrap: false,//当为true时，显示数据在同一行上，默认为true
      rownumbers: true,//当为true时，显示行号，默认为false
      fitColumns: true,//True就会自动扩大或者缩小列的尺寸以适应表格的宽度并且防止水平滚动
      animate: true,//当展开或折叠时是否定义动画效果
      collapsible: true,//
      pagination: true,//True就会在datagrid的底部显示分页栏
      pageNumber: 1,//初始化页码
      pageSize: 10,//初始化尺寸
      //            url: '/Alarm/GetTemplateList?UserID=' + getCookie("UserID") + '&AreaID=' + getCookie("AreaID") + '&TemplateName=' + templateName2,
      url: '/Alarm/GetTemplateListForPaging?UserID=' + getCookie("UserID") + '&AreaID=' + getCookie("AreaID") + '&TemplateName=' + templateName2 + '&page=' + 1 + '&rowCount=' + 10,
      loadMsg: '正在加载数据,请稍候......',
      columns: [[
//                { field: 'UserID', width: 140, title: '用户ID', align: 'center',resizable:true },
          { field: 'TemplateName', width: 140, title: '报警模版名称', align: 'center' },
          { field: 'AreaName', width: 140, title: '报警区域', align: 'center' },
          { field: 'LevelName', width: 140, title: '报警级别名称', align: 'center' },
          { field: 'TypeName', width: 140, title: '报警类型名称', align: 'center' },
          { field: 'Description', width: 300, title: '备注说明', align: 'center' },
          { field: 'ID', width: 140, title: '操作', align: 'center', formatter: function (value) {
              return '<a href=\"#\" onclick=\"openEditTemplate(this,' + value + ');\">编辑</a>&nbsp;&nbsp;<a href=\"#\" onclick=\"deleteTemplate(' + value + ');\">删除</a>';
          }
          }
        ]]
  });

  $('#table').resize(function () {
      $("#TemplateList").datagrid("resize", { width: getWidth() });
  });
  function getWidth() {
      return $("#table").width() * 0.99;
  }
  $("#TemplateList").datagrid('getPager').pagination({
      displayMsg: '当前显示从{from}到{to} 共{total}条记录',
      onSelectPage: function (pageNumber, pageSize) {
          $("#TemplateList").datagrid('options').url = '/Alarm/GetTemplateListForPaging?UserID=' + getCookie("UserID") + '&AreaID=' + getCookie("AreaID") + '&TemplateName=' + templateName2 + '&page=' + 1 + '&rowCount=' + 10,
             $("#TemplateList").datagrid('reload');
      }
  });
});