EasyUI中DataGrid默认分页的问题

发现在table上直接写data-options后导致数据加载两遍,后来放到了$();中只加载一遍。

另外默认分页PageSzie的设置。

 1 $(function () {
 2     //加载完后给星星加Tip
 3     $("#dg").datagrid({
 4         rownumbers:true,
 5         url:‘datagrid_data1.aspx‘,
 6         method:‘get‘,
 7         fit: true,
 8         striped:true,
 9         pagination: true,
10         onLoadSuccess: function (data) {
11             AddTipForStar();
12         }
13     });
14
15     var p = $(‘#dg‘).datagrid(‘getPager‘);
16     $(p).pagination({
17         pageSize: 15,//每页显示的记录条数,默认为10
18         pageList: [15, 30, 45],//可以设置每页记录条数的列表
19         beforePageText: ‘第‘,//页数文本框前显示的汉字
20         afterPageText: ‘页    共 {pages} 页‘,
21         displayMsg: ‘当前显示 {from} - {to} 条记录   共 {total} 条记录‘
22     });
23 });

通过火狐查看发现第一次加载默认PageSize还是10。改成这样就可以了。

 1 $(function () {
 2     //加载完后给星星加Tip
 3     $("#dg").datagrid({
 4         rownumbers:true,
 5         url:‘datagrid_data1.aspx‘,
 6         method:‘get‘,
 7         fit: true,
 8         striped:true,
 9         pagination: true,
10         pageSize: 15,//每页显示的记录条数,默认为10
11         pageList: [15, 30, 45],//可以设置每页记录条数的列表
12         onLoadSuccess: function (data) {
13             AddTipForStar();
14         }
15     });
16
17     var p = $(‘#dg‘).datagrid(‘getPager‘);
18     $(p).pagination({
19         beforePageText: ‘第‘,//页数文本框前显示的汉字
20         afterPageText: ‘页    共 {pages} 页‘,
21         displayMsg: ‘当前显示 {from} - {to} 条记录   共 {total} 条记录‘
22     });
23 });

数据绑定还是写在了th的data-options里。

时间: 2024-10-08 17:54:58

EasyUI中DataGrid默认分页的问题的相关文章

解决easyui中datagrid不分页加载大量数据渲染慢问题

easyui版本1.3.6 查看jquery.easyui.min.js源码,发现渲染数据时会调用函数_52a,会重置高度,进而增加渲染时间. 解决方法:设置datagrid的autoRowHeight: false. 原文地址:https://www.cnblogs.com/chenboxi/p/9398259.html

jQuery-EasyUI修改DataGrid默认分页大小

发现EasyUI还是很强大的,也很方便,但对于像我这样刚刚接触这个框架,JavaScript也不是很熟练的人来说,定制起来就有点困难了,主要是想要修改源码起到全局修改的作用时对应的代码找起来比较麻烦. 例如:EasyUI的DataGrid默认分页是每页10条,可供选择的每页记录数是按10递增,即10.20.30等等(如图) EasyUI本身包含了很多文件,要修改找起来真不容易,在./themes/default/easyui.css(./表示easyui根目录,default是我使用的主题,要根

SpringMVC+easyUI中datagrid分页实现_2014.5.1

一.概述 SpringMVC: 1.是面对方法级变量的,在操作起来会比struts方便一些(structs是类级变量),具体体现在了srpingMVC的注解上面, 如@RequstMapping("/login"),而且对于返回值ModelAndView这也是一大亮点,既可以返回一个页面(View),再加上@ResponseBody注解以后就可以返回一个      模型对象(也就是一种数据结构). 2.对于方法级传入的参数操作起来也相当方便,比如本例中,在加载DataGrid时,会像后

实例:SSh结合Easyui实现Datagrid的分页显示(JAVA版)

近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. 首先看一下要实现的效果:当每页显示5行数据: 当每页显示10行数据,效果如下: 具体步骤: 1.下载Easyui,并搭建环境.可参照博客 http://blog.csdn.net/lhq13400526230/article/details/9148299 2.搭建SSH工程,整个工程的目录结构如

EasyUI中datagrid实现显示、增加、 删除、 修改、 查询操作(后台代码C#)

2datagrid加载数据.代码如下所示 一.数据的显示 1新建HtmlPage2.html页面,引入相关文件.如下所示 <script src="easyui/js/jquery-1.8.2.min.js"></script>  <script src="easyui/js/jquery.easyui.min.js"></script>  <link href="easyui/css/themes/d

利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序 HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据,难免会含有方便操作的 主键ID这列的记录.现在项目需要在easyUI的DataGrid中显示的数据能全部导出Excel,包括DataGrid中的中文标题,其他的统统不 要. 完成该功能所需的工具和环境:Newtonsoft.Json序列化和反序列化类库.easyUI前端UI框架.HttpHandl

EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager implements java.io.Serializable { private Integer id; private Role role; private String loginName; private String password; private int status; private Da

SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

一.概述 根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案

在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var dc = $(this).data('datagrid').dc; var header2Row = dc.header2.find('tr.datagrid-header-row'); dc.body2.find('table').append(header2Row.clone().css({"