EasyUI 分页总结

原创 2012年09月18日 23:15:18
最近用到了easyui的分页和搜索栏功能,使用过程中由于运用不熟练导致其间也出现过一些问题,下面做个小结,供大家共同学习。
1.首先使用EasyUI 的DataGrid分页,得加载其js类库:
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>


2.新建一个DataGrid
有两种方法来新建一个DataGrid。下面先说第一种方法。
1)使用table标签来创建
<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  
        url="datagrid24_getdata.php" toolbar="#tb"  
        title="Load Data" iconCls="icon-save"  
        rownumbers="true" pagination="true">  
    <thead>  
        <tr>  
            <th field="itemid" width="80">Item ID</th>  
            <th field="productid" width="80">Product ID</th>  
            <th field="listprice" width="80" align="right">List Price</th>  
            <th field="unitcost" width="80" align="right">Unit Cost</th>  
            <th field="attr1" width="150">Attribute</th>  
            <th field="status" width="60" align="center">Stauts</th>  
        </tr>  
    </thead>  
</table>  


2)使用js代码来创建
<script type="text/javascript">
    $(document).ready(function () {
        $('#historydisplay').datagrid({
            title: '历史数据',
            toolbar: '#search',    //设置工具栏
            fitColumns:true,       //设置列宽度自适应屏幕
            iconCls: 'icon-save',
            url: '@Url.Action("TestData","TCtrl")',
            pageSize:15,        //设置默认分页大小
            pageList:[10,15,20,25,30,35,40,45,50],   //设置分页大小
            columns: [[
            { field: 'StoreNum', title: 'StoreNum', width: 80 ,align:'center'},
            { field: 'T1', title: 'T1', width: 80, align: 'center' },
            { field: 'T2', title: 'T2', width: 80, align: 'center' },
            { field: 'O2', title: 'O2', width: 80, align: 'center' },
            { field: 'CO2', title: 'CO2', width: 100, align: 'center' }
            ]],
            pagination: true
        });
    });
</script>


3.在要放置DataGrid的页面添加div
<table id="historydisplay"></table>


4.编写后台代码,对数据进行分页控制
public ActionResult TestData(int page, int rows,int? storenum,DateTime? datefrom,DateTime? dateto) {
            var total = db.TCtrls.OrderBy(x => x.Id).ToList();
            if (storenum != null)
                total = total.Where(x => x.StoreNum == storenum).ToList();
            if ((datefrom != null) && (dateto != null)) {
                DateTime dateBegin = (DateTime)datefrom;
                DateTime dateEnd = (DateTime)dateto;
                total = total.Where(x => x.Time >= dateBegin).Where(x => x.Time <= dateEnd).ToList();
            }
            var result=total.Skip((page - 1)*rows).Take(rows).ToList();
            Dictionary<string, object> json = new Dictionary<string, object>();  
            json.Add("total",total.ToList().Count);
            json.Add("rows",result);
            return Json(json, JsonRequestBehavior.AllowGet);
        }
我此次是用asp.net mvc3实现的,不过大同小异,只要将总数据量total和最后显示的结果数据result封装到JSON对象中即可。


以上部分仅是实现了easyui的分页,下面来总结下easyui的搜索栏实现
在以上基础上添加搜索栏,步骤如下:
1.在相应的DataGrid页面中添加如下代码:
<div id="search" style="padding:5px;height:auto">  
    <span>库号:</span>  
    <input id="storenum" style="border:1px solid #ccc"/>  
    <span>日期:</span>  
    <input class="easyui-datebox" style="width:100px"/>至
    <input class="easyui-datebox" style="width:100px"/>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">搜索</a>  
</div>


2.将DataGrid中的toolbar属性设置为搜索栏div的id。
eg:
toolbar: '#search'
见上面DataGrid的2.2


3.添加响应函数
function doSearch() {
        $('#historydisplay').datagrid('load', {
            storenum: $('#storenum').val(),
            datefrom: $('#datefrom').val(),
            dateto: $('#dateto').val()
        });
}


4.添加相应的后台代码,对前端传过去的搜索字段进行处理
具体代码见DataGrid的步骤4.

EasyUI数据分页实现(真假分页)

数据分页功能的实现是在任何一个项目中都非常实用的一个功能,在ASP.NET学习的时候,曾写过一篇关于分页功能的实现(点击查看),上面已经介绍的真假分页的优缺点,在这里我们就不过多的赘述了。现在的分页实...
  • why15732625998
  • why15732625998
  • 2016年08月14日 11:56
  • 10957

easyui的datagrid使用以及分页

easyui对于开发桌面级的WEB应用界面确实十分方便,而且美观。这里着重记录一下datagrid的使用,以及通过前后端配合实现的超简单的数据分页查询方式。...
  • tzdwsy
  • tzdwsy
  • 2015年08月09日 13:57
  • 3642

easyui 分页实现

1、用datagrid 做分页显示, 根据API例子,终于解决,废话不说,datagrid分页 有一个附加的分页控件 通过在datagrid中设置pagination:true 就会显示分页 当请求是...
  • itlqi
  • itlqi
  • 2015年07月04日 16:19
  • 4046

easyUI前端分页与后台分页总结

分页往往是依附于数据表格的,所以我们就使用的是easyui的datagrid组件,来开启pagination分页组件,为了方便,我们使用js实现。        表格显示初始化 ...
  • qq_36827957
  • qq_36827957
  • 2017年08月17日 20:30
  • 2202

EasyUI Pagination 分页的两种做法

因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因。 如有冒犯请联系本人,或删除,或标明出处。 因为好的文章,以前只想收藏,但连接有时候会失效,...
  • sat472291519
  • sat472291519
  • 2014年02月27日 11:13
  • 9304

easyUi分页以及条件查询

//easyUi分页以及条件查询JQuery 写法 (只需要找一个地方放入就行); //大表格数据$('#dg').datagrid({ url : _getP...
  • sddycai
  • sddycai
  • 2017年05月19日 15:46
  • 222

easyui分页实现的原理

1.数据的提取和显示。____DataGrid是通过url属性获取数据的。例如:url:’ListInfo.action’,这样通过调用Action中的方法获取数据。返回的是JSON字串。注意,JSO...
  • sinat_31659933
  • sinat_31659933
  • 2015年10月23日 12:58
  • 3152

easyUI分页中,如何实现页面跳转,再返回时,仍然到跳转前页数。(含页面显示条数)

easyUI中,分页情况下,跳转到其他页面修改数据,再返回时,相当于重新打开此页面,即显示第一页。 这样很不方便。故提出跳转回修改前的页面的需求。 通过网上搜索,了解到实现页面跳转回去的基本原理是:传...
  • zhaoyizhilan
  • zhaoyizhilan
  • 2017年07月21日 17:33
  • 1258

easyUI使用datagrid分页栏不显示

今天在使用easyUI的时候,发现一个很奇怪的问题,就是我的中部布局的div中在加了一个table后,里面表格的分页栏就不能显示出来了,不多说了,直接上代码吧 datagrid表格加载函数 $('...
  • PTtaoge
  • PTtaoge
  • 2017年08月31日 15:59
  • 1765

jquery easyUI ajax加载数据分页功能

今天自己搞框架,分享一些封装ajax请求数据,封装分页代码的一些代码心得。 页面先引入easyUI的基础样式和js文件 路径自己修改 然后定义自己的table singleSelect:...
  • shuaipu813
  • shuaipu813
  • 2016年08月16日 16:53
  • 4757
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:EasyUI 分页总结
举报原因:
原因补充:

(最多只允许输入30个字)