Jquery EasyUI DataGrid分页问题

我本良人 2015-11-06 03:38:56
现在正在学习Jquery EasyUI DataGrid这个东西，自己瞎搞
Json数据是使用JsonConvert.SerializeObject来转换的，可是分页信息怎么添加
现在绑定的只有数据，分页那里不起作用，求指导，有加分哦


<head id="Head1" runat="server">

    <title></title>

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/default/easyui.css" />

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/icon.css" />

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/demo/demo.css" />

    <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>

    <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>

    <script type="text/javascript" language="javascript">

        $(function ()

        {

            $('#tt').datagrid({

                idField: 'LoginID',

                url: 'Handler7.ashx',

                loadMsg: '数据装载中......',

                sortName: 'LoginID',

                singleSelect: true,

                columns: [[

                { field: 'UserName', title: '姓名', width: $(this).width() * 0.1 },

                { field: 'LoginID', title: '编号', width: $(this).width() * 0.1 ,sortable:true},

                { field: 'Department', title: '部门', width: $(this).width() * 0.1 },

                { field: 'Post', title: '职务', width: $(this).width() * 0.1 },

                { field: 'Sex', title: '性别', width: $(this).width() * 0.1 }

                ]],

                pagination: true,

                rownumbers: true

            });

            //设置分页控件  

            var p = $('#tt').datagrid('getPager');  

            $(p).pagination({  

                pageSize: 1000,//每页显示的记录条数，默认为10  

                pageList: [1000,2000,3000],//可以设置每页记录条数的列表  

                beforePageText: '第',//页数文本框前显示的汉字  

                afterPageText: '页    共 {pages} 页',  

                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  

            });  

        })

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table id="tt" class="easyui-datagrid" data-options="singleSelect:true,collapsible:true,rownumbers:true,autoRowHeight:false,height:650,width:1000,method:'get',toolbar:'#tb',striped:true,">

        </table>

    </div>

    </form>

</body>

</html>






<%@ WebHandler Language="C#" Class="Handler7" %>



using System;

using System.Collections;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

using System.Collections.Generic;

using System.Text.RegularExpressions;

using Newtonsoft.Json;

using System.Text;





public class Handler7 : IHttpHandler {



    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        SqlHelp sqla = new SqlHelp();

        string stra = "select LoginID,UserName,Department,Sex,Post from tOAPower";

        DataTable dta = sqla.GetDataTable(stra);

        sqla.SqlClose();



        string json = JsonConvert.SerializeObject(dta);



        context.Response.Write(json);

    }



    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}
...全文
177 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
fox123871 2015-11-12
  • 打赏
  • 举报
 回复
必须设置Total才行
songhuanle 2015-11-12
  • 打赏
  • 举报
 回复
string jsonFormat = "{ \"total\": {0}, \"rows\": [{1}]}";
让爱延续 2015-11-11
  • 打赏
  • 举报
 回复
引用 6 楼 yangmingxing980 的回复:
[quote=引用 5 楼 ZaiDuXinLing 的回复:] 像楼上说的一样，还需要设置 total 属性 我使用的是 Newtonsoft 进行json序列化，返回如下的最基本结构 

    public class DataGridJsonResult
    {
        /// <summary>
        /// 总记录行数
        /// </summary>        
        [JsonProperty(PropertyName = "total")]
        public long Total { get; set; }

        /// <summary>
        /// 每一行数据
        /// </summary>       
        [JsonProperty(PropertyName = "rows")]
        public IList Rows { get; set; }
}
前端的分页代码，可用如下方式实现： 

 jQuery('#list').datagrid({
        title: 'XXXX列表',
        idField: 'id',
        fitColumns: true,
        toolbar: '#toolbar',
        height: 'auto',
        pageNumber: 1,
        pageSize: 5,
        pageList: [5, 10, 15, 20, 30, 40],
        url: '....',
        queryParams: {},
        pagination: true,
        remoteSort: false,
        columns: [[
               // ...
        ]], onLoadSuccess: function (data) {
               // ...
        }
    });
兄弟，能给贴点完整的代码给我研究下不，我现在也是看着官网上面的事例学习，不过它那个是基于PHP的，着实不咋能看懂，谢了 [/quote 代码好像全了？ 不知道哪里还有疑问？
让爱延续 2015-11-10
  • 打赏
  • 举报
 回复
像楼上说的一样，还需要设置 total 属性 我使用的是 Newtonsoft 进行json序列化，返回如下的最基本结构 

    public class DataGridJsonResult
    {
        /// <summary>
        /// 总记录行数
        /// </summary>        
        [JsonProperty(PropertyName = "total")]
        public long Total { get; set; }

        /// <summary>
        /// 每一行数据
        /// </summary>       
        [JsonProperty(PropertyName = "rows")]
        public IList Rows { get; set; }
}
前端的分页代码，可用如下方式实现： 

 jQuery('#list').datagrid({
        title: 'XXXX列表',
        idField: 'id',
        fitColumns: true,
        toolbar: '#toolbar',
        height: 'auto',
        pageNumber: 1,
        pageSize: 5,
        pageList: [5, 10, 15, 20, 30, 40],
        url: '....',
        queryParams: {},
        pagination: true,
        remoteSort: false,
        columns: [[
               // ...
        ]], onLoadSuccess: function (data) {
               // ...
        }
    });
娃都会打酱油了 2015-11-10
  • 打赏
  • 举报
 回复
$(p).pagination({  这里面加个total属性，就是你符合条件的共多少条记录，你没设置total，那默认值就是0
我本良人 2015-11-10
  • 打赏
  • 举报
 回复
引用 5 楼 ZaiDuXinLing 的回复:
像楼上说的一样，还需要设置 total 属性 我使用的是 Newtonsoft 进行json序列化，返回如下的最基本结构 

    public class DataGridJsonResult
    {
        /// <summary>
        /// 总记录行数
        /// </summary>        
        [JsonProperty(PropertyName = "total")]
        public long Total { get; set; }

        /// <summary>
        /// 每一行数据
        /// </summary>       
        [JsonProperty(PropertyName = "rows")]
        public IList Rows { get; set; }
}
前端的分页代码，可用如下方式实现： 

 jQuery('#list').datagrid({
        title: 'XXXX列表',
        idField: 'id',
        fitColumns: true,
        toolbar: '#toolbar',
        height: 'auto',
        pageNumber: 1,
        pageSize: 5,
        pageList: [5, 10, 15, 20, 30, 40],
        url: '....',
        queryParams: {},
        pagination: true,
        remoteSort: false,
        columns: [[
               // ...
        ]], onLoadSuccess: function (data) {
               // ...
        }
    });
兄弟，能给贴点完整的代码给我研究下不，我现在也是看着官网上面的事例学习，不过它那个是基于PHP的，着实不咋能看懂，谢了
娃都会打酱油了 2015-11-09
  • 打赏
  • 举报
 回复
http://www.jeasyui.net/demo/379.html 最重要的total设置呢？
jhdxhj 2015-11-09
  • 打赏
  • 举报
 回复
分页你需要在后台取分页的数据， public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; HttpRequest req = context.Request; string page = req["page"]; string pagesize = req["rows"]; }
我本良人 2015-11-09
  • 打赏
  • 举报
 回复
我本良人 2015-11-06
  • 打赏
  • 举报
 回复
看来床上等你真的凋零了 这么半天了，连个发表情的都没有 真是醉了
JQuery EasyUI DataGrid服务端分页时行号不延续的解决方法
JQuery EasyUI DataGrid服务端分页加载数据后，DataGrid行号不能延续，总是重新由1开始。因为服务端分页取回的是单页数据，通过LoadData方法加载数据后，pageNumber属性被初始化为1，因此行号总是重新由1开始。现在提供了解决方法。
easyui datagrid 分页查询样例
采用easyui datagrid实现后台Springmvc分页查询的maven工程,下载吧， 你不得后悔，jquery-easyui-1.5.2
jQuery EasyUI datagrid实现本地分页的方法
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下： 一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听，以及JS数组的slice方法来完成。代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title></title> <link href=js/jquery-easyui-1.3.6/themes/default/easyui.css rel=stylesheet/>
jquery自制分页，控制easyui datagrid分页，集中处理了一下前后台
jquery自制分页，控制easyui datagrid分页，集中处理了一下前后台
jquery easyui datagrid实现增加，修改，删除方法总结
主要介绍了jquery easyui datagrid实现增加，修改，删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下
.NET社区

62,046

社区成员

669,048

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章