Jquey easyUI 分页查询

[sxl_88]

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

[Poopaye]

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

[sanGuo_uu]

这个是要写sql语句啊 返回当前页信息加载就好了嘛。 请求服务器的时候，后台可以获取到page(页码),rows(页大小)这样的参数。（反正我的是这2个。在后台这样子就获取到了：context.Request["rows"]） 根据这些东西请求数据库，就好。 然后在datagrid上点下一页的时候，它自己会去请求生成时候的url

[sxl_88]

引用 2 楼 u012536120 的回复:

这个是要写sql语句啊 返回当前页信息加载就好了嘛。 请求服务器的时候，后台可以获取到page(页码),rows(页大小)这样的参数。（反正我的是这2个。在后台这样子就获取到了：context.Request["rows"]） 根据这些东西请求数据库，就好。 然后在datagrid上点下一页的时候，它自己会去请求生成时候的url

那问下问下，如果有查询的参数，应该怎么写呢，是不是要写JavaScript 还是继续在 HTML 声明中写？

[以专业开发人员为伍]

引用 3 楼 sxl_88 的回复:

那问下问下，如果有查询的参数，应该怎么写呢，是不是要写JavaScript 还是继续在 HTML 声明中写？

学习 easyUI分页查询的文档。对文档中的代码有问题，再问。

[以专业开发人员为伍]

你在这里贴一个写着

url="get_users.php"

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

[飘2018]

我也是服了，你只贴这么一点代码。有用吗？ 你好好看看easy ui的帮助文档吧。上面写的很清楚的 你写要自已写一个分页的方法 返回json就可以了。、 json的格式为 {"total":10,rows[{"uid":100,"upwd":"abc123"},....."uid":100,"upwd":"abc123"}]} 其中total表示总记录数 rows表示查结查询，每次分页的查询结果 分页时的参数名称为 page参数表示当前页 rows表示每页大小 希望对你有帮助。 帮助文档上都 有的。

[戴跃雄]

get_users.php 这里是关键。。。 这个是你数据源的输出。。。根据easyui-datagrid 的文档做好查询分页sql就O了

[sxl_88]

谢谢各位的回复，我想问下，如果想根据firstname这个字段进行查询，我还想在 HTML 声明中写查询，请问如何写？谢谢！

[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) {
                
            }
        })
    };

[lovehong123]

引用 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的例子。