Jquey easyUI 分页查询

2017-03-27 02:00:12 530 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

EasyUI 增删改查完全详细本实例使用EasyUI编写，涵盖eaui的各种元素的创建，验证限制，事件，ajax等阅读详情

目前直接在 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>

...全文

EasyUI datagrid+SpringMVC+MyBatis实现分页查询前面需导入：&lt;link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css"&gt;&lt;link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css&q 阅读详情

sxl_88

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

+ 关注 + 加入社区

切换为时间正序

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表示每页大小希望对你有帮助。帮助文档上都有的。

以专业开发人员为伍 2017-03-28

打赏
举报

你在这里贴一个写着

url="get_users.php"

的代码，那么为什么不把那几行 php 源代码也贴出来、看看它是如何写 sql 语句的呢？

以专业开发人员为伍 2017-03-28

打赏
举报

引用 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

打赏
举报

去问写查询接口的人，你贴的这个有什么用？

Jquey easyUI 分页查询

相关推荐