1、从数据库每次取出的数据为当前分页的数据。

2、分页用的是EasyUI 的 Pagination控件,与DataGrid是相对独立的。

3、后台数据获取是通过WebApi去获取。

4、传入参数是:pageSize、pageNumber 及其它条件。传参用的是Post方法(Get同样可以).

效果如图:

其它的不说,直接上代码:

HTML代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6. <title></title>
  7. <meta charset="utf-8" />
  8. <link href="/Content/themes/default/easyui.css" rel="stylesheet" />
  9. <link href="/Content/themes/icon.css" rel="stylesheet" />
  10. <link href="../../Content/bootstrap.min.css" rel="stylesheet" />
  11. <link href="../../Css/BootStrapExt.css" rel="stylesheet" />
  12. <%-- <script src="/Scripts/jquery-1.11.3.min.js"></script>--%>
  13. <script src="../../JScript/jquery-easyui-1.5.1/jquery.min.js"></script>
  14. <script src="/Scripts/bootstrap.min.js"></script>
  15. <%--<script src="/Scripts/jquery.easyui-1.4.5.min.js"></script>--%>
  16. <script src="../../JScript/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
  17. <script type="text/javascript">
  18. //分页事件
  19. function RefreshPages(totalNum) {
  20. $('#uiPages').pagination('refresh', {   // change options and refresh pager bar information
  21. total: totalNum,
  22. pageList: [10, 15, 20, 25, 30, 50, 100]
  23. });
  24. }
  25. $(function(){
  26. GetUserData(0, 0);//加载dataGrid数据
  27. $('#uiPages').pagination({
  28. onSelectPage: function (pageNumber, pageSize) {
  29. GetUserData(pageSize, pageNumber);
  30. }
  31. });
  32. });
  33. function GetUserData(psize,pnumber){
  34. var grid = $('#grid1');
  35. var pagesize = $('#uiPages').pagination("options").pageSize;        //分页控件的PageSize
  36. var currIndex = $('#uiPages').pagination("options").pageNumber + 1; //分页控件的当前页数
  37. if (psize > 0) {
  38. pagesize = psize;
  39. currIndex = pnumber;
  40. }
  41. var lno = $("#txt_LoginNo").val();
  42. var lnm = $("#txt_LoginName").val();
  43. var jsonStr = [{ "name": "pgSize", "value": pagesize }
  44. , { "name": "pgIndex", "value": currIndex }
  45. , { "name": "txt_LoginNo", "value": lno }
  46. , { "name": "txt_LoginName", "value": lnm }
  47. ];
  48. var request = JSON.stringify(jsonStr);
  49. var uri = "/api/UsersInfo/GetUserList1";
  50. $.ajax({
  51. url: uri,
  52. type: 'post',
  53. data: request,
  54. contentType: "application/json",
  55. success: function (data) {
  56. //取回来的是一个DataSet,有两个表,第一个表第一行是总资料数。第二个表是当前页资料。
  57. RefreshPages(data.Table[0].num);
  58. $('#grid1').datagrid('loadData', data.Table1);
  59. },
  60. error: function (data) {
  61. alert(data.responseText);
  62. }
  63. });
  64. }
  65. function chBrand(val, row)
  66. {
  67. if(val==0)
  68. {
  69. return "品牌0";
  70. }
  71. else if (val=="1")
  72. {
  73. return "品牌1";
  74. }
  75. }
  76. </script>
  77. <style type="text/css">
  78. .panel-body {
  79. padding:0;
  80. }
  81. </style>
  82. </head>
  83. <body class="easyui-layout" style="overflow: hidden;">
  84. <form id="form1">
  85. <div data-options="region:'north',split:false,border:false" style="height: 35px; margin-top: 10px; padding-top: 0px; overflow: hidden;">
  86. <div class="row">
  87. <div class="col-xs-1 col-sm-1 col-lg-1"  style="padding-left:30px;">
  88. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" id="a_addUser">Add </a>
  89. </div>
  90. <div class="col-xs-2 col-sm-2 col-lg-2">
  91. <div class="col-xs-5 col-padding-0 col-text-right textbox5">登录名<span style="color: red;">%</span></div>
  92. <div class="col-xs-7 col-padding-0">
  93. <input id="txt_LoginNo" class="textbox textbox-text textbox5" name="txt_LoginNo" type="text" placeholder="">
  94. </div>
  95. </div>
  96. <div class="col-xs-2 col-sm-2 col-lg-2">
  97. <div class="col-xs-5 col-padding-0 col-text-right textbox5">
  98. 用户姓名<span style="color: red;">%</span>
  99. </div>
  100. <div class="col-xs-7 col-padding-0 ">
  101. <input class="textbox textbox-text textbox5" id="txt_LoginName" name="txt_LoginName" type="text" placeholder="">
  102. </div>
  103. </div>
  104. <div class="col-xs-2 col-sm-2 col-lg-2">
  105. <div class="col-xs-12">
  106. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" id="a_search">Search</a>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. <div data-options="region:'center',border:false" style="border-top: 1px solid #95B8E7; margin-top: 0; padding: 0; overflow: hidden;">
  112. <div class="easyui-layout" data-options="fit:true">
  113. <div data-options="region:'north',split:false,border:false" style="height: 30px; margin:0; padding: 0px; overflow: hidden;">
  114. <div id="uiPages" class="easyui-pagination" data-options="total:0" style="border: 0px solid #95B8E7; margin: 0; padding: 0;">
  115. </div>
  116. </div>
  117. <div data-options="region:'center',border:false,fit:true" style="border: 0px solid #95B8E7; margin-top: 0; padding: 0;">
  118. <table id="grid1" class="easyui-datagrid"  style="width:100%; height: 99%; padding:0; margin: 0;"
  119. data-options="singleSelect:true,collapsible:true,fit:true,border:false">
  120. <thead>
  121. <tr>
  122. <th data-options="field:'row',width:50,align:'center'"></th>
  123. <th data-options="field:'LoginNo',width:100">登录名</th>
  124. <th data-options="field:'LoginName',width:100">用户姓名</th>
  125. <th data-options="field:'AgentName',">代理商</th>
  126. <th data-options="field:'AgentMobile',width:100,align:'right'">代理商电话</th>
  127. <th data-options="field:'Brand',width:100,formatter:chBrand">所属品牌</th>
  128. </tr>
  129. </thead>
  130. </table>
  131. </div>
  132. </div>
  133. </div>
  134. </form>
  135. </body>
  136. </html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<meta charset="utf-8" />
<link href="/Content/themes/default/easyui.css" rel="stylesheet" />
<link href="/Content/themes/icon.css" rel="stylesheet" />
<link href="../../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../../Css/BootStrapExt.css" rel="stylesheet" /> <%-- <script src="/Scripts/jquery-1.11.3.min.js"></script>--%>
<script src="../../JScript/jquery-easyui-1.5.1/jquery.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<%--<script src="/Scripts/jquery.easyui-1.4.5.min.js"></script>--%>
<script src="../../JScript/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript">
//分页事件
function RefreshPages(totalNum) {
$('#uiPages').pagination('refresh', { // change options and refresh pager bar information
total: totalNum,
pageList: [10, 15, 20, 25, 30, 50, 100]
});
} $(function(){
GetUserData(0, 0);//加载dataGrid数据
$('#uiPages').pagination({
onSelectPage: function (pageNumber, pageSize) {
GetUserData(pageSize, pageNumber);
}
}); }); function GetUserData(psize,pnumber){
var grid = $('#grid1');
var pagesize = $('#uiPages').pagination("options").pageSize; //分页控件的PageSize
var currIndex = $('#uiPages').pagination("options").pageNumber + 1; //分页控件的当前页数
if (psize > 0) {
pagesize = psize;
currIndex = pnumber;
}
var lno = $("#txt_LoginNo").val();
var lnm = $("#txt_LoginName").val();
var jsonStr = [{ "name": "pgSize", "value": pagesize }
, { "name": "pgIndex", "value": currIndex }
, { "name": "txt_LoginNo", "value": lno }
, { "name": "txt_LoginName", "value": lnm }
]; var request = JSON.stringify(jsonStr); var uri = "/api/UsersInfo/GetUserList1";
$.ajax({
url: uri,
type: 'post',
data: request,
contentType: "application/json",
success: function (data) {
//取回来的是一个DataSet,有两个表,第一个表第一行是总资料数。第二个表是当前页资料。
RefreshPages(data.Table[0].num);
$('#grid1').datagrid('loadData', data.Table1);
},
error: function (data) {
alert(data.responseText);
}
});
} function chBrand(val, row)
{
if(val==0)
{
return "品牌0";
}
else if (val=="1")
{
return "品牌1";
}
} </script>
<style type="text/css">
.panel-body {
padding:0;
}
</style>
</head>
<body class="easyui-layout" style="overflow: hidden;">
<form id="form1">
<div data-options="region:'north',split:false,border:false" style="height: 35px; margin-top: 10px; padding-top: 0px; overflow: hidden;">
<div class="row">
<div class="col-xs-1 col-sm-1 col-lg-1" style="padding-left:30px;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" id="a_addUser">Add </a>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2">
<div class="col-xs-5 col-padding-0 col-text-right textbox5">登录名<span style="color: red;">%</span></div>
<div class="col-xs-7 col-padding-0">
<input id="txt_LoginNo" class="textbox textbox-text textbox5" name="txt_LoginNo" type="text" placeholder="">
</div>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2">
<div class="col-xs-5 col-padding-0 col-text-right textbox5">
用户姓名<span style="color: red;">%</span>
</div>
<div class="col-xs-7 col-padding-0 ">
<input class="textbox textbox-text textbox5" id="txt_LoginName" name="txt_LoginName" type="text" placeholder="">
</div>
</div>
<div class="col-xs-2 col-sm-2 col-lg-2">
<div class="col-xs-12">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" id="a_search">Search</a>
</div>
</div>
</div>
</div>
<div data-options="region:'center',border:false" style="border-top: 1px solid #95B8E7; margin-top: 0; padding: 0; overflow: hidden;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',split:false,border:false" style="height: 30px; margin:0; padding: 0px; overflow: hidden;">
<div id="uiPages" class="easyui-pagination" data-options="total:0" style="border: 0px solid #95B8E7; margin: 0; padding: 0;">
</div>
</div>
<div data-options="region:'center',border:false,fit:true" style="border: 0px solid #95B8E7; margin-top: 0; padding: 0;">
<table id="grid1" class="easyui-datagrid" style="width:100%; height: 99%; padding:0; margin: 0;"
data-options="singleSelect:true,collapsible:true,fit:true,border:false">
<thead>
<tr>
<th data-options="field:'row',width:50,align:'center'"></th>
<th data-options="field:'LoginNo',width:100">登录名</th>
<th data-options="field:'LoginName',width:100">用户姓名</th>
<th data-options="field:'AgentName',">代理商</th>
<th data-options="field:'AgentMobile',width:100,align:'right'">代理商电话</th>
<th data-options="field:'Brand',width:100,formatter:chBrand">所属品牌</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</form>
</body>
</html>

WebAPI代码:

  1. [HttpPost]
  2. public IHttpActionResult GetUserList1([FromBody]JArray js)
  3. {
  4. JToken jt = js.Single(e => e["name"].ToString() == "pgSize");
  5. int pgSize = int.Parse(jt["value"].ToString());
  6. jt = js.Single(e => e["name"].ToString() == "pgIndex");
  7. int pgCurIndex = int.Parse(jt["value"].ToString());
  8. jt = js.Single(e => e["name"].ToString() == "txt_LoginNo");
  9. string loginNo = jt["value"].ToString();
  10. jt = js.Single(e => e["name"].ToString() == "txt_LoginName");
  11. string LoginName = jt["value"].ToString();
  12. List<SqlParameter> Parameters = new List<SqlParameter>(); ;
  13. if (!string.IsNullOrWhiteSpace(loginNo))
  14. {
  15. Parameters.Add(new SqlParameter("@LoginNo", loginNo));
  16. }
  17. if (!string.IsNullOrWhiteSpace(LoginName))
  18. {
  19. Parameters.Add(new SqlParameter("@LoginName", LoginName));
  20. }
  21. int startIndex = (pgCurIndex - 1) * pgSize + 1;
  22. int endIndex = pgCurIndex * pgSize;
  23. UsersInfo info = new UsersInfo();
  24. UsersBLL bll = new UsersBLL(info);
  25. DataSet ds = bll.QueryByPage(Parameters.ToArray(), "", startIndex, endIndex);
  26. int recordCount = int.Parse(ds.Tables[0].Rows[0][0].ToString());
  27. return Ok(ds);
  28. }
[HttpPost]
public IHttpActionResult GetUserList1([FromBody]JArray js)
{
JToken jt = js.Single(e => e["name"].ToString() == "pgSize");
int pgSize = int.Parse(jt["value"].ToString()); jt = js.Single(e => e["name"].ToString() == "pgIndex");
int pgCurIndex = int.Parse(jt["value"].ToString()); jt = js.Single(e => e["name"].ToString() == "txt_LoginNo");
string loginNo = jt["value"].ToString(); jt = js.Single(e => e["name"].ToString() == "txt_LoginName");
string LoginName = jt["value"].ToString(); List<SqlParameter> Parameters = new List<SqlParameter>(); ;
if (!string.IsNullOrWhiteSpace(loginNo))
{
Parameters.Add(new SqlParameter("@LoginNo", loginNo));
}
if (!string.IsNullOrWhiteSpace(LoginName))
{
Parameters.Add(new SqlParameter("@LoginName", LoginName));
}
int startIndex = (pgCurIndex - 1) * pgSize + 1;
int endIndex = pgCurIndex * pgSize; UsersInfo info = new UsersInfo();
UsersBLL bll = new UsersBLL(info); DataSet ds = bll.QueryByPage(Parameters.ToArray(), "", startIndex, endIndex);
int recordCount = int.Parse(ds.Tables[0].Rows[0][0].ToString()); return Ok(ds);
}

读库的我就不贴出来了,我这里用的是自已编写的一个BLL与Module结合紧密的一个DAL层,用SqlParameter传参是因为会对公网,用这个后不需再做SQL注入过虑。

最终返回的DataSet 里有两个表,第一个表是读出资料总数,一个Count(0) num,第二个表,是当前页的资料。所以对应的我HTML的data值也有两个Table。

C#的WebApi 与 EasyUi的DataGrid结合生成的可分页界面的更多相关文章

  1. Easyui的datagrid结合hibernate实现数据分页

    最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...

  2. 运用EasyUI中datagrid读取数据库数据实现分页

    1dao层 package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate ...

  3. abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  4. easyUI 中datagrid 返回列隐藏方法

    easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...

  5. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  6. easyui的datagrid行的某一列添加链接

    通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...

  7. easyui的datagrid打印(转)

    在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...

  8. EasyUI的datagrid分页

    EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...

  9. easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题

    做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...

随机推荐

  1. Uncaught SyntaxError: Unexpected token o

    浏览器报Uncaught SyntaxError: Unexpected token o 这原因是你ajax获取数据的时候对数据进行错误操作,比如使用了 JSON.parse(data) 对数据进行转 ...

  2. 计蒜客——Reversion Count

    Reversion Count 解析:题目数字的长度最大为 99,因此使用字符串处理,那么必然这些数存在某些规律.对于数 a (XYZW) 和数 b (WZYX),原式 = (1000X + 100Y ...

  3. 学习opencv(1)

    目录 CV_8UC3 Scalar--颜色赋值 using namespace cv找不到命名空间 waitKey() getTickCount() 引用 CV_8UC3 a) 存放单通道图像中像素: ...

  4. SpringBoot框架 之 Thymeleaf

    目录 Thymeleaf 添加启动器 创建模板文件夹 基本使用 综合使用 Thymeleaf 介绍 SpringBoot并不推荐使用jsp Thymeleaf 是一个跟 Velocity.FreeMa ...

  5. Systemback制作大于4G的Ubuntu系统镜像

    1 安装Systemback 依此执行如下命令. sudo apt-get update sudo add-apt-repository ppa:nemh/systemback sudo apt-ge ...

  6. 第2课第5节_Java面向对象编程_异常_P【学习笔记】

    摘要:韦东山android视频学习笔记  java的异常处理的原则如下: 1.我们先写一个没有对异常处理的程序,在进行除法运算的时候,除数是非零的话,运行时没有问题的,但是除数为零的时候,运行就会有问 ...

  7. Centos7安装PHP、安装MySQL、安装apache

    Centos7安装PHP.MySQL.apache 这里今天教大家如何在centos7安装PHP,apache,mysql. 首先我们需要先安装centos7,我们可以在我们的电脑上安装一个虚拟机,在 ...

  8. 如何解决“HttpException (0x80004005): 超过了最大请求长度”问题

    .net mvc项目在做上传文件时,出现这个问题,上传文件的是通过表单提交,后台是通过请求里面获取文件信息的 1.问题截图: 堆栈信息 “/”应用程序中的服务器错误.超过了最大请求长度.说明: 执行当 ...

  9. Leetcode: Find And Replace in String

    To some string S, we will perform some replacement operations that replace groups of letters with ne ...

  10. iOS - 点击UIButton不变灰,button的image不变灰

    要想让uibutton点击不变灰 初始化的时候就不能 UIButton *button = [[UIButton alloc]init]; 初始化的时候酱紫,可以保证button点击时不变灰 UIBu ...