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. Android Studio3.0的下载及其安装详解加eclipse下载安装配置jdk9

    关注我,每天都有优质技术文章推送,工作,学习累了的时候放松一下自己. 本篇文章同步微信公众号  欢迎大家关注我的微信公众号:「醉翁猫咪」 今天我们来讲解如何下载android studio 3.0及其 ...

  2. avalon $computed不起作用?

    computed写的个数,应该是只能一个的,之前写了两个,一个是空,一个里面有数据,那个有数据的不起作用,但是在有数据的里面写一个一个console.log就会起作用,所以将多余的空的computed ...

  3. es6学习3：promise

    promise含义: 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. 从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Pro ...

  4. 坑爹微信之读取PKCS12流时出现的java.io.IOException: DerInputStream.getLength

    背景 微信退款接口需要使用到证书,我参考微信的官方Demo进行,部分代码如下: char[] password = config.getMchID().toCharArray(); InputStre ...

  5. 刷题记录：[CISCN2019 华北赛区 Day1 Web1]Dropbox

    目录 刷题记录:[CISCN2019 华北赛区 Day1 Web1]Dropbox 一.涉及知识点 1.任意文件下载 2.PHAR反序列化RCE 二.解题方法 刷题记录:[CISCN2019 华北赛区 ...

  6. JAVA学习网站分享

    好久没用博客园了 最近工作不忙了,可以花时间自己学习知识提升自己,所以开始查找各种资料 java资源查找网站:           http://www.java1234.com/ 前端学习网站:  ...

  7. git的commit撤销

    写完代码后,我们一般这样 git add . //添加所有文件 git commit -m "本功能全部完成" 执行完commit后,想撤回commit,怎么办? 这样凉拌: gi ...

  8. python的subprocess模块介绍

    一.subprocess以及常用的封装函数运行python的时候,我们都是在创建并运行一个进程.像Linux进程那样,一个进程可以fork一个子进程,并让这个子进程exec另外一个程序.在Python ...

  9. Xamarin图表开发基础教程（12）OxyPlot框架支持的金融图表类型

    Xamarin图表开发基础教程(12)OxyPlot框架支持的金融图表类型 OxyPlot组件中支持5种类型的金融图表,它们分别为销量图.高低图.股票K线图.股票走势图和旧式股票图,如图1.20~1. ...

  10. openresty开发系列33--openresty执行流程之2重写赋值阶段

    openresty开发系列33--openresty执行流程之2重写赋值阶段 一)重写赋值阶段 1)set_by_lua 语法:set_by_lua $res <lua-script-str&g ...