C# 使用easyUI datagrid 实现后台分页

最新推荐文章于 2022-02-17 13:20:38 发布
最新推荐文章于 2022-02-17 13:20:38 发布
阅读量4.6k 收藏
点赞数 2
分类专栏： C#

EASYUI DATAGRID 后台分页 C# 

前台

 

        <form id="log_Show_Ser_Form" style="margin: 2px; padding: 2px">
            <div>
                <span>查找方式：</span>
                <select onchange="change_Ser_Method()" class="easyui-combobox" id="ser_Method_Type">
                    <option value="user">当前用户</option>
                    <option value="department">当前科室</option>
                </select>
            </div>
            <div>
                <div id="cc" class="easyui-calendar"></div>
                <span>开始日期：</span><input id="strat_Date" style="width: 95px" class="easyui-datebox" data-options="sharedCalendar:'#cc'" />
                <span>结束日期：</span><input id="end_Date" style="width: 95px" class="easyui-datebox" data-options="sharedCalendar:'#cc'" />
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="queryreport()" style="width: 80px">查询</a>
            </div>
        </form>

 

 

 

 

 

JS部分

 

 $(function () {
            $('#gd_Show_Import_Sampe').datagrid({
                title: '记录',
                height: 'auto',
                nowrap: false,
                striped: true,
                border: true,
                collapsible: false,//是否可折叠的 
                fit: true,//自动大小 
                remoteSort: false,
                idField: 'Id',
                singleSelect: false,//是否单选 
                pagination: true,//分页控件 
                rownumbers: true,//行号  
                pageList:[10],//固定10行查询
                columns: [[
                    { field: 'Id', title: 'Id', width: 80, hidden: true },
                    { field: 'PatientID', title: '标识', width: "10%", align: 'center' },
                    { field: 'PatientName', title: '姓名', width: "10%", align: 'center' },
                    { field: 'SexFlag', title: '性别', width: "10%", align: 'center' },
                    { field: 'Import_Date', title: '日期', width: "15%", align: 'center' },
                    { field: 'TB_CONSENT_FORM', title: 'XXX', width: '10%', align: 'center' },
                    { field: 'Others', title: 'XXX', width: '40%', align: 'center' },
                ]]
            });
            //当分页时运行
            var pager = $("#gd_Show_Import_Sampe").datagrid("getPager");
            pager.pagination({
                onSelectPage: function (pageNo, pageSize) {
                    var type = change_Ser_Method();//根据查询类型获取值
                    var stratDate = $('#strat_Date').textbox('getValue');
                    var endDate = $('#end_Date').textbox('getValue');
                    getDataForPage(type, stratDate, endDate, pageNo, pageSize);
                }
            });
        });

查询按钮的JS方法：

 

function queryreport() {
            var type = change_Ser_Method();//根据查询类型获取值
            var stratDate = $('#strat_Date').textbox('getValue');
            var endDate = $('#end_Date').textbox('getValue');
            if (stratDate == "" || endDate == "") { $.messager.alert('错误', '查询日期不能为空', 'error'); return; }
            else {
                if (!dateCompare) { $.messager.alert('错误', '开始日期不能大于结束日期', 'error'); return; }
                else {
                    getDataForPage(type, stratDate, endDate, 0, 0);
                }
            }
        }
</pre><pre code_snippet_id="1733946" snippet_file_name="blog_20160628_5_7475488" name="code" class="javascript">function getDataForPage(type, stratDate, endDate, pageNo, pageSize) {
<span style="white-space:pre">		</span> //设置开始页码和结束页码
            var startCount;
            var endCount;
            if (pageNo != 0 && pageSize!=0) {
                startCount = (pageNo - 1) * pageSize;
                endCount = startCount + pageSize;
            }
<span style="white-space:pre">		</span>//获取远程服务器的数据
            $.ajax({
                type: 'GET',
                url: '/Fp_Ajax/GetData.aspx?action=getLogImport',
                data: {
                    Importtype: type,
                    stratDate: stratDate,
                    endDate: endDate,
                    startCount: startCount,
                    endCount: endCount
                },
                onSubmit: function () { },
                success: function (data) {
                    if (data != "") {
                        var objdata = JSON.parse(data);
                        var total = objdata.Total;
                        if (total > 0) {
<span style="white-space:pre">					</span>//数据转换<span style="white-space:pre">	</span>
                            var jsondata = objdata.JsonData;
                            var ds = jsondata.ds;
                            $('#gd_Show_Import_Sampe').datagrid('loadData', ds);
                            var pager = $("#gd_Show_Import_Sampe").datagrid("getPager");
                            var count = 10;
                            pager.pagination({
                                total: total,
                                pageNumber: pageNo
                            });
                        }
                    }
                }
            });
        }


前台方面只要数据返回之后 根据页码就可以绑定上去

 

二、后台代码：

                string strJson = "";
                string strGetDataType = "";
                string strImportType = Request.Params["Importtype"].ToString();
                string[] array = strImportType.Split('-');
                //获取传入的时间
                string strStartDate = Request.Params["stratDate"].ToString();
                string strendDate = Request.Params["endDate"].ToString();
                //获取页码
                int startCount = Convert.ToInt32(Request["startCount"]);
                int endCount = Convert.ToInt32(Request["endCount"]);
 <span style="white-space:pre">		</span>//当第一次获取时，默认获取前10的数据
          if (startCount==0||endCount==0){startCount = 1;endCount = 10;}
          else if (startCount>1){endCount = startCount+10-1;}

<span style="white-space:pre">	</span>       strJson = log_bll.GetDate(strGetDataType, "", strStartDate, strendDate, startCount, endCount);

<span style="white-space:pre">	</span>       Response.Write(strJson);

</pre><p>后台代码需要注意的是，需要将数据返回为JSON数据格式：</p><p></p><pre code_snippet_id="1733946" snippet_file_name="blog_20160628_14_4292287" name="code" class="plain">{"Total":"51","JsonData":{"ds":[{"Row":1,"Id":71,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":2,"Id":70,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":3,"Id":69,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":4,"Id":68,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":5,"Id":67,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":6,"Id":66,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":7,"Id":65,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":8,"Id":64,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":9,"Id":63,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":10,"Id":62,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"}]}}


由于是直接使用dataset转换的 所以需要解析多一遍

 

 

本文仅用记录，目前参考价值不大

 

 

 

 

目涩
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用EasyUI完成datagrid数据分页
gods_boy的博客
05-11 2万+
      当数据库中的数据量过多时一般都会进行分页操作，下面为大家提供一种EasyUI自带分页的操作，非常简便实用，喜欢EasyUI可以参考一下，希望可以给你带来帮助！    实用EasyUI首先要引用文件，这里不再进行叙述，为了让大家能够明白，现在从数据库一步步讲起。   数据库中的表为Goods表 go create table Goods ( Id int  primary key ...
使用easyUI datagrid分页
qq_29094997的博客
12-29 602
使用easyUI datagrid分页 我用了比较简单的sturts2和mybatis结合的小测试demo实现的。 一、使用easyUI datagrid分页注意事项及原理： 1.EasyUI的DataGrid要求返回的JSON数据集是这样的形式： 【“total”:总记录数量, "rows":数据记录数组】 {"total":14,"rows":[{"deptNo":20,"empNa
DataGridView分页功能实现，最简单的方法，不用使用存储过程
10-10
DataGridView分页功能实现，最简单的方法，不用使用存储过程
EasyUI easyui-datagrid分页功能实现
落泪的只有我
03-30 9720
easyui-datagrid的综合实现 可用于直接绑定一个datatable进行显示数据
easyui 之datagrid分页
weixin_45504270的博客
07-24 1575
前端js $(function(){ //初始化分页 loadList(""); }); function loadList(pcode){ var parm = $("#parm").serialize() parm = decodeURIComponent(parm,true); parm = encodeURI(encodeURI(parm)); //var $width = $(window).width();//(1)这样取值的话,结合(2)会导致在IE下列表出不来,故注释掉了 tree = $
EasyUI-- datagrid分页详解
程序员大阳
03-15 1万+
分页的英文是pagination，记住这个单词，因为会经常遇见。在EasyUI框架下，datagrid使用分页简单到令人发指，只需要2点：1，为table启用class=”easyui-datagrid”，这样table就成为了一个数据网格。2，为table启用pagination=”true”，表示表格启用分页功能。<table id="userTable" title="用户列表" class=
C# mvc4加存储过程加easyUI-DataGrid开发的数据分页Demo
01-20
6.Jquery Easy-UI DataGrid的使用 7.jquery 的ajax 示例数据库表和存储过程在MyMVC.WebUI\App_Data文件夹里。数据库自己创建，创建完修改web.config文件里的数据库连接字符串。 自己写的，很简单，但是需要去好好...
C#基于MVC+EasyUI+ECharts后台管理系统完整源码
07-09
主要功能:新增、修改、删除、分页、导出Excel文件、上传图片、权限设置、图形报表展示 (权限设置只是为了练习easyUI tree的使用,具体项目具体分析) (例子涉及两张表(用户表+权限表)，datagrid分页默认采用sqls
C#+EasyUI+ECharts(二)
09-18
是在我之前上传的基础上修改的,...(例子涉及两张表(用户表+权限表)，datagrid分页默认采用sqlserver2012新增关键字分页， 如果你的数据库是2005或2008，请修改 UserInfoDAL.cs页面通过 getPage2005(userInfo)来分页)
C#基于MVC+EasyUI+ECharts后台管理系统完整源码(1.0.6)
10-09
(例子涉及两张表(用户表+权限表)，datagrid分页有两种方式，请参考 UserInfoDAL.cs页面方法: getPage2005和getPage2012 ) EasyUI 1.5中文版文档下载地址:http://download.csdn.net/detail/jx_521/9647628
asp.net 中使用EasyUI Datagrid 加载动态数据分页查询
无问西东的博客
05-04 3269
asp.net 中使用EasyUI Datagrid 加载动态数据分页查询
EasyUI之简单实现Datagrid分页（C#）
weixin_30900589的博客
07-27 158
EasyUI之简单实现Datagrid分页（C#） 刚刚开始学着用EasyUI，有兴趣的TX可以去http://www.jeasyui.com/看一下，当然很多人都知道，不是什么新鲜的东西； 这两天在学着用各种控件，花了一下午才把Datagrid的增删改等等一些操作才弄明白（脑袋瓜太笨了，o(∩_∩)o ），下面我们主要来看下 分写，增删改...
c#+easyui实现分页
浩瀚与渺小
02-17 570
easyui+c#实现后端真分页
easyUI的datagrid实现分页
sdzhangshulong的博客
05-17 822
防止自己以后忘记，在这里把代码贴出来，前台用的easyUI，后台用的ssh，希望可以和大家一起学习进步 首先前台代码 $("#lsdata1").datagrid( { url : "jylsJk",//加载的URL pagination : true, pageSize:10, rownumbers:true, pageList:[10,20,30], dataty
jquery easyUI ajax加载数据分页功能
帅蒲
08-16 9597
今天自己搞框架，分享一些封装ajax请求数据，封装分页代码的一些代码心得。 页面先引入easyUI的基础样式和js文件 路径自己修改 然后定义自己的table singleSelect:true, autoRowHeight:true, pagination:true, pageSize:10,fit:false">
EasyUI中datagrid设置分页及各种属性
qq_31459039的博客
04-19 2885
使用手册:http://www.runoob.com/jeasyui/plugins-dt-datagrid.html $('#data-list').datagrid({ width: 880, nowrap: true, singleSelect: false, rownumbers: tru...
easyui使用ajax请求后台结合datagrid分页和动态设置行头
decpzuu417443的博客
03-28 354
需求：最近公司有个功能需要查询后台数据在前台展示，展示的行头会根据后台的数据显示数据（如数据中的一个环节list，不同的数据这个list长度不一样），还要分页展示； 一下是源码： function loadGrid(){ if(!$("#queryForm").form('validate')) {//判断查询参数是否为空　　　　return false; 　　} ...
EasyUI的datagrid组件实现分页
热门推荐
XiangNick的博客
11-08 2万+
EasyUI的datagrid组件实现分页，后台为Struts2+Spring+Hibernate，利用DetachedCriteria对象进行简单的分页查询。要点： datagrid组件的参数和响应格式 DetachedCriteria对象的条件查询
EasyUI Datagrid 分页
weixin_30483495的博客
11-05 143
EasyUI Datagrid 分页，两种情况 第一种，向后台请求数据，点击分页请求一次，点击排序请求一次。使用表格自带的ajax。 box.datagrid({ url: '’, //后台请求地址 queryParams: {'name':'','age':''},//向后台传参 ...
easyui datagrid前端分页如何实现
最新发布
05-30
EasyUI Datagrid前端分页可以通过以下步骤实现： 1. 设置分页相关参数 在Datagrid的初始化代码中，设置以下分页相关参数： ``` pagination: true, // 启用分页 pageSize: 10, // 每页显示的记录数 pageList: [10, 20, 30], // 可供选择的每页记录数 pageNumber: 1, // 初始页码 ``` 2. 设置分页插件 在HTML页面中引入EasyUI的分页插件： ``` <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> ``` 3. 处理分页事件 在Datagrid的初始化代码中，设置分页事件的处理函数： ``` onBeforeLoad: function (params) { params.page = params.pageNumber; // 将页码参数改为EasyUI要求的参数名称 params.rows = params.pageSize; // 将每页记录数参数改为EasyUI要求的参数名称 }, ``` 4. 加载数据 通过Ajax从后台加载数据，设置Datagrid的data属性： ``` $.ajax({ type: "POST", url: "data.php", data: {page: pageNumber, rows: pageSize}, dataType: "json", success: function(data){ $('#datagrid').datagrid('loadData', data); } }); ``` 以上就是EasyUI Datagrid前端分页的实现步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值