Jquey easyUI 分页查询

sxl_88 2017-03-27 02:00:12
目前直接在 HTML 声明datagrid组件,但是需要写查询参数都不方便,后来编写 JavaScript 代码来创建datagrid组件,但是发现分页时直接查询出后台数据库所有数据后再分页,这样效果不好,影响效率。
请问有没有办法实现点击分页按钮后根据页码和记录数实现分页查询?请问如何修改下面的代码,谢谢!

附上 HTML 声明datagrid组件

<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
url="get_users.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
...全文
459 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
lovehong123 2017-04-19
  • 打赏
  • 举报
回复
引用 9 楼 guanyelong 的回复:
楼主你先明白datagrid带参数绑定的过程再问这个问题吧。

<div style="padding-left:2px;padding-right:2px;height:100%;">
    <table id="dg" title="服务列表"></table>
</div>

var queryData = {
            name: $.trim($("#firstname").datebox("getValue"))
        };
        $('#dg').datagrid({   //定位到Table标签,Table标签的ID是grid
            url: '/AppService/GetAppServiceList',   //指向后台的Action来获取当前菜单的信息的Json格式的数据
            title: '服务列表',
            iconCls: 'icon-view',
            fit: true,
            fitColumns: true,
            nowrap: true,
            autoRowHeight: false,
            striped: true,
            collapsible: true,
            pagination: true,
            pageSize: 15,
            pageList: [15, 30, 45, 60],
            rownumbers: true,
            sortOrder: 'asc',
            remoteSort: false,
            singleSelect: true,  //选中行唯一
            method: 'post',
            idField: 'ServId',
            queryParams: queryData,  //异步查询的参数
            columns: [[
{ title: "id", field: "id", width: 95, hidden: true },
                          { title: "姓", field: "firstname", width: 95, sortable: true },
                          { title: "名", field: "lastname", width: 95, sortable: true },
                          { title: "电话", field: "phone", width: 95},
                          { title: "邮箱", field: "email", width: 95,}
            ]],
            onClickCell: function (index, row) {
               
            },
            onLoadSuccess: function (row, data) {
                
            }
        })
    };
这就是EasyUI使用datagrid的例子,还可以去官网下载EasyUI的例子。
guanyelong 2017-04-18
  • 打赏
  • 举报
回复
楼主你先明白datagrid带参数绑定的过程再问这个问题吧。

<div style="padding-left:2px;padding-right:2px;height:100%;">
    <table id="dg" title="服务列表"></table>
</div>

var queryData = {
            name: $.trim($("#firstname").datebox("getValue"))
        };
        $('#dg').datagrid({   //定位到Table标签,Table标签的ID是grid
            url: '/AppService/GetAppServiceList',   //指向后台的Action来获取当前菜单的信息的Json格式的数据
            title: '服务列表',
            iconCls: 'icon-view',
            fit: true,
            fitColumns: true,
            nowrap: true,
            autoRowHeight: false,
            striped: true,
            collapsible: true,
            pagination: true,
            pageSize: 15,
            pageList: [15, 30, 45, 60],
            rownumbers: true,
            sortOrder: 'asc',
            remoteSort: false,
            singleSelect: true,  //选中行唯一
            method: 'post',
            idField: 'ServId',
            queryParams: queryData,  //异步查询的参数
            columns: [[
{ title: "id", field: "id", width: 95, hidden: true },
                          { title: "姓", field: "firstname", width: 95, sortable: true },
                          { title: "名", field: "lastname", width: 95, sortable: true },
                          { title: "电话", field: "phone", width: 95},
                          { title: "邮箱", field: "email", width: 95,}
            ]],
            onClickCell: function (index, row) {
               
            },
            onLoadSuccess: function (row, data) {
                
            }
        })
    };
sxl_88 2017-04-10
  • 打赏
  • 举报
回复
谢谢各位的回复,我想问下,如果想根据firstname这个字段进行查询,我还想在 HTML 声明中写查询,请问如何写?谢谢!
戴跃雄 2017-03-30
  • 打赏
  • 举报
回复
get_users.php 这里是关键。。。 这个是你数据源的输出。。。根据easyui-datagrid 的文档做好查询分页sql就O了
飘2018 2017-03-29
  • 打赏
  • 举报
回复
我也是服了,你只贴这么一点代码。有用吗? 你好好看看easy ui的帮助文档吧。上面写的很清楚的 你写要自已写一个分页的方法 返回json就可以了。、 json的格式为 {"total":10,rows[{"uid":100,"upwd":"abc123"},....."uid":100,"upwd":"abc123"}]} 其中total表示总记录数 rows表示查结查询,每次分页的查询结果 分页时的参数名称为 page参数表示当前页 rows表示每页大小 希望对你有帮助。 帮助文档上都 有的。
  • 打赏
  • 举报
回复
你在这里贴一个写着
url="get_users.php"
的代码,那么为什么不把那几行 php 源代码也贴出来、看看它是如何写 sql 语句的呢?
  • 打赏
  • 举报
回复
引用 3 楼 sxl_88 的回复:
那问下问下,如果有查询的参数,应该怎么写呢,是不是要写JavaScript 还是继续在 HTML 声明中写?
学习 easyUI分页查询的文档。对文档中的代码有问题,再问。
sxl_88 2017-03-28
  • 打赏
  • 举报
回复
引用 2 楼 u012536120 的回复:
这个是要写sql语句啊 返回当前页信息加载就好了嘛。 请求服务器的时候,后台可以获取到page(页码),rows(页大小)这样的参数。(反正我的是这2个。在后台这样子就获取到了:context.Request["rows"]) 根据这些东西请求数据库,就好。 然后在datagrid上点下一页的时候,它自己会去请求生成时候的url
那问下问下,如果有查询的参数,应该怎么写呢,是不是要写JavaScript 还是继续在 HTML 声明中写?
sanGuo_uu 2017-03-27
  • 打赏
  • 举报
回复
这个是要写sql语句啊 返回当前页信息加载就好了嘛。 请求服务器的时候,后台可以获取到page(页码),rows(页大小)这样的参数。(反正我的是这2个。在后台这样子就获取到了:context.Request["rows"]) 根据这些东西请求数据库,就好。 然后在datagrid上点下一页的时候,它自己会去请求生成时候的url
Poopaye 2017-03-27
  • 打赏
  • 举报
回复
去问写查询接口的人,你贴的这个有什么用?

62,244

社区成员

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

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

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

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