EasyUI的datagrid分页

前台代码:

<script type="text/javascript">
    $(function () {
        //查询
        search();
    });

    //查询
    function search() {
        var startDate = $("input[name=‘startDate‘]").val();
        var endDate = $("input[name=‘endDate‘]").val();

        //加载datagrid
        $(‘#listdata‘).datagrid({
            url: "@Url.Content("~/Backstage/MachineMng/CashMng/TouBiZhaoLingSearch")",
            queryParams: { ‘startDate‘: startDate, ‘endDate‘: endDate },
            columns: [[
                { field: ‘addTime‘, title: ‘日期‘, width: 100 },
                {
                    field: ‘orderId‘, title: ‘摘要‘, width: 100, formatter: function (value, rowData, rowIndex) {
                        return "订单号:" + rowData["orderId"];
                    }
                },
                { field: ‘userName‘, title: ‘操作人‘, width: 100 },
                { field: ‘opera‘, title: ‘操作‘, width: 100 }
            ]],
            rownumbers: true,
            pagination: true, //分页控件
            pageList: [10, 20, 50],
            pageNumber: 1,
            singleSelect: true,
            loadMsg: "数据加载中……",
            fitColumns: true
        });

        //设置分页控件
        var p = $(‘#listdata‘).datagrid(‘getPager‘);
        $(p).pagination({
            beforePageText: ‘第‘, //页数文本框前显示的汉字
            afterPageText: ‘页 共 {pages} 页‘,
            displayMsg: ‘当前显示 {from} - {to} 条记录 共 {total} 条记录‘
        });
    }
</script>

后台:

public ActionResult TouBiZhaoLingSearch(string startDate, string endDate, int page, int rows)
{
    int totalCount;
    DataTable dt = cashDal.GetListAll(startDate, endDate, rows, page, out totalCount);

    Dictionary<string, object> dic = new Dictionary<string, object>();
    List<object> list = new List<object>();
    foreach (DataRow dr in dt.Rows)
    {
        Dictionary<string, object> item = new Dictionary<string, object>();
        item.Add("id", dr["id"].ToString());
        item.Add("addTime", dr["addTime"].ToString());
        item.Add("orderId", dr["orderId"].ToString());
        item.Add("userName", dr["userName"].ToString());
        item.Add("opera", "");
        list.Add(item);
    }

    dic["total"] = totalCount;
    dic["rows"] = list;
    return Content(JsonConvert.SerializeObject(dic));
}

时间: 2024-10-03 23:00:18

EasyUI的datagrid分页的相关文章

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

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

EasyUI的DataGrid 分页栏英文改中文解决方案

(一)分页栏英文改中文解决方案 这个问题其实很简单,就是引入文件jquery-easyui-1.3/locale/easyui-lang-zh_CN.js . 注意这个文件要放在本页js的后面,放在最后也不会有什么影响的. 其实日期控件引入这个文件也可以把英文变为中文. 还有一种比较笨的解决办法 ,如下: 1 //设置分页控件 2 var p = $('#list_data').datagrid('getPager'); 3 $(p).pagination({ 4 pageSize: 10,//

easyui的datagrid分页写法小结

easyui的datagrid分页死活不起作用...沙雕了...不说了上代码 1 //关闭tab1打开tab2 查询Detail 2 function refundDetail(){ 3 $('#tt').tabs('select', "Detail Information");//subtitle为选项卡的标题 4 //发起ajax请求,查询退款detail 5 var dayendDate = $("#dayendDate").val(); 6 var term

EasyUI 之 DataGrid分页组件中文显示的两种方法

        在过去的这一段时间参与了高校云平台的评教系统,在系统的前端要求用MVC+Easyui,从今天开始就来给大家讲讲MVC+EasyUI的前端应用. JQueryEasyUI:一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. 在系统中经常会使用到EasyUI-DataGrid(数据

EasyUI之DataGrid分页

第一步创建分页DataGrid <table id="dg"> <thead> <tr> <th data-options="field:'username',width:100">username</th> <th data-options="field:'password',width:100,editor:'textbox'">password</th> &

easyUI的datagrid 分页保存选中状态

<span style="font-size:18px;">onLoadSuccess:function(data){ var rows = data.rows; //从编辑页面传过来的指标编码 var indeCodes=$("#indeCodes").val(); var n=indeCodes.split(';').length-1; for(var i=0;i<rows.length;i++){ var obj = rows[i]; //循

MVC+EasyUI中datagrid分页(后台)

public JsonResult ModelList_Json() { int pagesize = int.Parse(Request["rows"]);//获取每页显示多少条记录 int pagenum = int.Parse(Request["page"]);//获取当前页码 List<MODEL.Model> list = GetList();//获取所有记录 List<MODEL.Model> listpage=new List&

EasyUI Datagrid 分页

EasyUI Datagrid 分页,两种情况 第一种,向后台请求数据,点击分页请求一次,点击排序请求一次.使用表格自带的ajax. box.datagrid({ url: '', //后台请求地址 queryParams: {'name':'','age':''},//向后台传参 width: '100%', height: '500px', fitColumns: true, singleSelect:true, remoteSort:true, pageList : [ 5, 10, 20

Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的datagrid的使用方法 在这里,datagrid的使用我不做过多讲解,俺毕竟是初学者,不敢班门弄斧.所以就简单带一下. ①.在easyui的layout中的center中定义一个table,id为"datagridTable". <div region="center"