jQuery EasyUI Pagination实现分页的常用方法

这篇文章主要介绍了如何使用jQuery EasyUI的Pagination功能来实现数据分页的常用方法。对于使用EasyUI datagrid并希望实现服务器端分页的朋友来说，这将是一个很好的参考。

一、使用datagrid默认机制

后台代码示例展示了一个名为GetQuestionUnit的方法，该方法用于获取分页数据。其中，通过Request获取前端传递的rows和page参数，然后使用这些数据来查询数据库。查询结果需要按照特定的格式返回，包括总记录数（total）和当前页的数据（rows）。

前台代码示例展示了一个初始化datagrid的过程。在这个过程中，需要设置pageNumber、columns、pagination等属性。还展示了如何对分页插件进行个性化设置，如自定义页数文本框前显示的文字、共几页以及共几条数据等。需要注意的是，将datagrid的初始化代码放置在$(function () {})中，以确保在页面加载完成后执行。

对于url的设置，如果页面一加载就需要查询数据，则可以在初始化datagrid时直接设置url。但如果url的参数需要根据界面上的某些操作来动态获取，可以先注释掉url，然后在其他地方进行赋值并调用ajax来获取数据。

二、利用Ajax获取数据并填充Datagrid

除了使用datagrid的默认机制外，我们还可以利用Ajax来获取数据并填充到datagrid中。这种方式更加灵活，可以根据需求进行个性化定制。

我们启动一个进度提示框，让用户知道数据正在加载。这是通过调用`$.messager.progress`实现的，显示标题为“Please Waiting”，消息为“Loading data...”以及处理文本“PROCESSING.......”。然后，我们通过获取数据网格的分页器对象，对其进行分页设置。当用户选择新的页码和页面大小后，我们为`onSelectPage`事件添加了一个事件处理器。当页码发生变化时，这个处理器会触发`getData`方法，并传入新的页码和页面大小作为参数。首次调用时，默认加载第一页的3条数据。

`getData`方法是我们自定义的数据获取函数。它使用Ajax异步请求从服务器获取数据。请求的类型是POST，请求的URL是`@ViewBag.Domain/Paper/GetQuestionUnit`。在请求的参数中，我们传入了页码和每页的行数。如果在请求过程中发生错误，我们会弹出一个提示框显示错误状态，并关闭进度提示框。如果请求成功，我们会关闭进度提示框，并使用获取的数据更新数据网格。具体地，我们使用`$('dgd').datagrid('loadData', data)`来加载新的数据。

我们通过自定义的`step1Ok`和`getData`方法绕过了数据网格的默认分页机制，实现了自己的分页逻辑。我们利用进度提示框来提供更好的用户体验，确保用户在等待数据加载时有明确的反馈。希望这些内容对大家的学习有所帮助。如有更多疑问或需要进一步的解释，请随时提问。以上内容即为本文的全部内容。如有疑问或需要进一步的帮助，请访问我们的网站或联系我们获取更多信息。本文由Cambrian系统渲染完成并发布在指定的位置。