easyui datagrid 分页

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}



<script src="~/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>

<table id="datagrid" class="easyui-datagrid" title="" style="width: 100%;"

    data-options="rownumbers:true,autoRowHeight:false,pagination:true,toolbar:'#tb',footer:'#ft',fit:true,

                pageSize:50,singleSelect:true,collapsible:true,url:'@Url.Action("Index")',method:'post',fixed:true,

    

    remoteSort:false,

                multiSort:true">

    <thead>

        <tr>

            <th data-options="field:'Id',checkbox:true"></th>

            <th data-options="field:'LoginAccount'">登陆账号</th>

            <th data-options="field:'ShopName'">名称</th>

        </tr>

    </thead>

</table>

<div id="tb" style="padding: 2px 5px;">

    <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true">增加</a>

    <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true">修改</a>

    <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" plain="true">删除</a>

    <a href="#" class="easyui-linkbutton" iconcls="icon-xls" plain="true">导出Excel</a>



    <select onchange="$('#datagrid').datagrid({singleSelect:(this.value==0)})">

        <option value="0">选中单行</option>

        <option value="1">选中多行</option>

    </select>

    <input class="easyui-textbox" id="LoginAccount" value="" name="LoginAccount" data-options="prompt:'账号:'" style="height: 22px; width: 120px">

    <input class="easyui-textbox" id="ShopName" value="" name="ShopName" data-options="prompt:'名称:'" style="height: 22px; width: 120px">



    <a href="#" class="easyui-linkbutton" onclick="doSearch()" iconcls="icon-search">查询</a>

    <div id="w" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true" style="padding: 10px;">

    </div>

</div>



<script>

    var UrlActionToExcel = "@Url.Action("ToExcel")";

</script>

 

提供2中 方法

 

  [HttpPost]

        [ActionName("Index")]

        public string Index_Search(TraderInfo model, int page, int rows)

        {

            var obj = new KT_Product_Show_Market.Models.DataGridJson();  //创建EasyUI DataGrid 所需格式对象

            int pageNum = page;         //返回第几页

            int RowsNum = rows;         //返回行数

            var All = GetAll(model);    //得到  查询 所有 数据 集的 Iqueryable 

            obj.total = All.Count();    //总行数

            obj.rows = All.OrderBy(X => X.Id).Skip((page - 1) * rows).Take(rows).ToList();     //获当前页数据集



            return JsonConvert.SerializeObject(obj, Formatting.Indented, new JsonSerializerSettings() { DateFormatHandling = 0 });

        }



        [HttpPost]

        [ActionName("Index")]

        public JsonResult List(TraderInfo model, int page, int rows)

        {

            var All = GetAll(model);

            Dictionary<string, object> json = new Dictionary<string, object>();

            json.Add("total", All.Count());

            json.Add("rows", All.OrderBy(X => X.Id).Skip((page - 1) * rows).Take(rows).ToList());

            return Json(json);



        }

第一中 需要 再写一个类

namespace KT_Product_Show_Market.Models

{

    public class DataGridJson

    {

        public int total { get; set; }    //记录的总条数

        public object rows { get; set; }  //具体内容

    }

}

前台调用

 

你可能感兴趣的:(datagrid)