easyui datagrid分页默认10条正常，选择20后不正常，快疯了，求助

2014-12-26 12:11:19 2.9k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Easyui 使用datagrid分页详解代码做网站的后台设计,用到了easyui,在使用datagrid的分页时遇到了很多问题,比如如何传递分页参数,如何接收总的数据量,经过小半天的研究,终于搞出来了,下面是一些常遇到的问题,可能会对新手有所帮助 1.这是我的前端代码 var datagrid; //定义全局变量 var editRow = "";//定义当前编辑的行阅读详情

easyui datagrid分页参数

data-options=" loadMsg: '正在努力为您加载数据',
method:'get',
fitColumns:false,
multiple: true,
rownumbers:true,
pagination:true,
pageSize: 10,
pageList: [10, 20, 30] } "

js脚本调用中会加载数据，如：$("#kidsMCB").datagrid('reload', 'Customer/CustomerExec.ashx');

奇怪的是，后台数据传来后显示很正常，按默认10分页了，没有问题，这时侯选择按20条显示，就不对了，还是显示当前10条，但我调试显示20条数据确实发送到前台响应了，如图：

更怪的是，往后翻一页，显示的确是21-40的正常数据，但选择<上一页，却数据又不变了，仍然是21-40的数据
（但页数显示是第一页），如果此时换成10显示，马上正常，无论前翻或后翻都正常。

...全文

EasyUI DataGrid及Pagination DataGrid数据表格及Pagination一起介绍一、通过标记创建DataGrid,嵌套标签定义列表阅读详情

zkbao

.NET社区 62,273 成员 668,968 内容

+ 关注 + 加入社区

切换为时间正序

csdnFUCKINGSUCKS 2017-05-25

打赏
举报

写了个简单的例子完全可以使用不知道你们的问题都是怎么来的



public JsonResult getJson(int page, int rows)

{

    var users = InitialData();



    return Json(new { total = users.Count, rows = users.Skip((page - 1) * rows).Take(rows) }, JsonRequestBehavior.AllowGet);

}





public List<UserModel> InitialData()

{

    List<UserModel> list = new List<UserModel>();

    for (int i = 1; i <= 300; i++)

    {

        UserModel user = new UserModel() { ID = i, UName = "名字" + i };

        list.Add(user);

    }

    return list;

}



<div>

    <table id="dg"></table>

    <script type="text/javascript">

        $('#dg').datagrid({

            url: '/Default/getJson',

            fitColumns: true,

            rownumbers: true,

            pagination: true,         //分页属性设置

            singleSelect: true,

            pageNumber: 1,

            pageSize: 10,

            pageList: [10, 20, 30, 40],

            columns: [[

                { field: 'UId', title: 'ID', width: 50, align: 'center' },

                { field: 'UName', title: '用户名称', width: 200, align: 'center' }

            ]],



        });



    </script>

</div>

zwdownload 2017-05-24

打赏
举报

查看了前台传到后台的参数，page和rows都是正确的后台分页查询的语句是正确的，查询的结果也是正缺的。但DataGrid显示过了几页就会重复显示，需要怎么才能解决呢？

zwdownload 2017-05-24

打赏
举报

另外，使用datagrid默认的分页设置，第一次从10变为50的时候，第一页只显示10行。其他的都起作用，不知道是怎么回事。

㤁孞 2017-01-22

打赏
举报

前端修改完pagesize之后,实际上后面获取数据的语句也要跟着变的,所以后台获取数据时也要根据页面分页的情况进行加载.

wujianyang9859 2017-01-21

打赏
举报

easyui每页页数后台接受参数为rows，不是pageSize。自己也遇到这个问题，然后就把post参数全部输出就一目了然了

lifei_20150630 2016-05-17

打赏
举报

$(function () { var qParams = { mode: 'Query', hfjia: $("#<%=hfjia.ClientID %>").val(), sfz: $("#sfz").val() }; //取得查询参数 var oldRowIndex; var opt = $("#grid"); opt.datagrid({ width: '780', height: '440', nowrap: false, striped: true, fitColumns: true, singleSelect: true, queryParams: qParams, //参数 url: '../Service/ServiceHanlder.ashx', //idField: 'id', //主索引 //frozenColumns: [[{ field: 'ck', checkbox: true}]], pageSize: 20, pageList: [20, 25, 30], pagination: true, //是否启用分页 rownumbers: true, //是否显示列数 onClickRow: function (rowIndex) { if (oldRowIndex == rowIndex) { opt.datagrid('clearSelections', oldRowIndex); } var selectRow = opt.datagrid('getSelected'); oldRowIndex = opt.datagrid('getRowIndex', selectRow); }, columns: [[ { title: "浏览档案", width: 20, align: "center", formatter: function (value, rowData, rowIndex) { return "<font onclick=searchDA('" + rowData.PersonIdNum + "'); color='blue' > 查看档案 </font>"; } }, { field: 'DAGInPosition', title: "档案位置", width: 40, align: "center" }, { field: 'PersonIdNum', title: "身份证号", width: 80, align: "center" }, { field: 'PersonName', title: "姓名", width: 40, align: "center" }, { field: 'PersonSex', title: "性别", width: 30, align: "center" }, { field: 'DAId', title: "档案编号", width: 60, align: "center" } // { field: 'DAGInOrg', title: "业务经办机构", width: 60, align: "center" } ]] }).datagrid("getPager").pagination({ beforePageText: '第', //页数文本框前显示的汉字 afterPageText: '页/{pages}页', displayMsg: '共{total}条记录', onBeforeRefresh: function () { return true; } }); }); 粘贴复制过来的注意：设置每页显示多少条在设置datagrid属性的时候就设置， onBeforeRefresh: function () { return true; } 这个事件一定要写

lifei_20150630 2016-05-17

打赏
举报

我的也是设置了20条可只显示 10条

yaniu 2014-12-30

打赏
举报

应该是程序代码的问题，仔细调试一下

jhdxhj 2014-12-27

打赏
举报

引用 4 楼 guwei4037 的回复:

参考一下这个：http://blog.csdn.net/chinacsharper/article/details/39523053

做个记号，友情帮顶

全栈极简 2014-12-27

打赏
举报

参考一下这个：http://blog.csdn.net/chinacsharper/article/details/39523053

Hello World, 2014-12-27

打赏
举报

给你个示例：前端：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../Scripts/jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" />
    <link href="../Scripts/jquery-easyui-1.4/themes/icon.css" rel="stylesheet" />
</head>
<body>
    <table id="tt" class="easyui-datagrid" style="width:700px;height:350px"
            data-options="url:'datagrid_getdata.ashx',
                        title:'Load Data',
                        iconCls:'icon-save', pageList:[10, 20, 30],
                        rownumbers:'true', pagination:true">
        <thead>
            <tr>
                <th field="productid" width="120">Product ID</th>
            </tr>
        </thead>
    </table>
</body>
</html>
<script src="../Scripts/jquery-easyui-1.4/jquery.min.js"></script>
<script src="../Scripts/jquery-easyui-1.4/jquery.easyui.min.js"></script>

datagrid_getdata.ashx：

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

using System;
using System.Web;

public class datagrid_getdata : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        int intPageSize = int.Parse(context.Request["rows"] == null ? "10" : context.Request["rows"]);
        int intCurrentPage = int.Parse(context.Request["page"] == null ? "0" : context.Request["page"]);
        int totalCount = 100;
        string json = "";
        int start = intPageSize * (intCurrentPage - 1);
        for (int i = 0; i < intPageSize; i++)
        {
            json += string.Format("{{\"productid\":\"{0}\"}},", i + start + 1);
            if (i + start + 1 == totalCount)
            {
                break;
            }
        }
        json = "[" + json.TrimEnd(',') + "]";
        string result = "{\"total\":" + totalCount + ", \"rows\":" + json + "}";
        context.Response.Write(result);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

zkbao 2014-12-26

打赏
举报

引用 1 楼 lwq222121 的回复:

不要用$("#kidsMCB").datagrid('reload', 'Customer/CustomerExec.ashx'); 直接在data-options里写url:Customer/CustomerExec.ashx

试过了，还是一样

lwq222121 2014-12-26

打赏
举报

不要用$("#kidsMCB").datagrid('reload', 'Customer/CustomerExec.ashx'); 直接在data-options里写url:Customer/CustomerExec.ashx

easyui datagrid分页默认10条正常，选择20后不正常，快疯了，求助

相关推荐