MVCEasyUI+jQuery+EF+Ajax实现分页+条件查询

Controller代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCEasyUIEF.Models;
namespace MVCEasyUIEF.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        EmpEntities Db = new EmpEntities();
        public ActionResult Index()
        {
            return View();
        }
        //获取数据
        public ActionResult GetEmp(int pageIndex,int pageSize)
        {
            var data1 = (from r in Db.Emp
                         join t in Db.Dept on r.DeptID equals t.ID
                         orderby r.ID
                         select new { r.ID, r.EmpName, r.EmpNum, r.Phone, t.DeptName }).Skip(pageSize * (pageIndex - 1)).Take(pageSize);
            int total = Db.Emp.Count();//获取总条数
            var result = new { total=total,rows=data1};
            return Json(result, JsonRequestBehavior.AllowGet);

        }
        //按照工号查询
        public ActionResult GetEmp2(string EmpNum)
        {
            var data2 = (from r in Db.Emp
                         join t in Db.Dept on r.DeptID equals t.ID
                         where r.EmpNum == EmpNum
                         orderby r.ID
                         select new { r.ID, r.EmpName, r.EmpNum, r.Phone, t.DeptName });

            int total = Db.Emp.Count();//总条数

            var result = new { total = total, rows = data2 };
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
}

<script type="text/javascript">
        $(function () {
            $('#tbEmp').datagrid({
                url: '/Home/GetEmp',
                pagination: true,//分页显示
                rownumbers: true,//行号
                singleSelect: true,//只允许选择一行
                pageSize: 10,
                method: 'get',
                frozenColumns: [[
                { field: '选择', checkbox: 'true', width: 30 },
                { field: 'EmpNum', title: '工号', width: 100 },
                { field: 'EmpName', title: '姓名', width: 100 },
                { field: 'Phone', title: '手机', width: 130 },
                { field: 'DeptName', title: '部门', width: 240 }
                ]],      
            });
        });
        $(function ($) {
            getPager_DataGrid('tbEmp');//获取table分页的id
            initDataTables(1, 10);
        });

        function initDataTables(pageIndex, pageSize) {
            $.ajax({
                type: "get",
                dataType: "json",
                data: "&pageIndex=" + pageIndex
                + "&pageSize=" + pageSize,
                url: '/Home/GetEmp',
                success: function (json) {
                    $('#tbEmp').datagrid('loadData', json);
                },
            });
        };
        function getPager_DataGrid(tbEmp) {
            var p = $('#tbEmp').datagrid('getPager');
            $(p).pagination({
                pageSize: 10,
                pageList: [10, 30, 50],
                onSelectPage: function (pageIndex, pageSize) {
                    initDataTables(pageIndex, pageSize);//回调函数，通过ajax请求，返回参数
                }
            });
        }
        //查询
        function btnSearch() {
            var pars = { EmpNum: $("#txtEmpNum").val() };
            //有参数时执行此方法
            initTable(pars)
        };
        //实现DataGird控件的绑定操作
        function initTable(pars) {
            $('#tbEmp').datagrid({   //定位到Table标签#tbEmp
                fitColumns: true,
                url: '/Home/GetEmp2',  //指向后台的Action来获取当前用户的信息的Json格式的数据
                nowrap: true,
                collapsible: true,
                pagination: true,
                rownumbers: true,//添加列数字
                remoteSort: false,
                idField: 'ID',//主键
                queryParams: pars,  //异步查询的参数
                pageSize: 10,//每页的默认值大小
                frozenColumns: [[
               { field: '选择', checkbox: 'true', width: 30 },
               { field: 'EmpNum', title: '工号', width: 100 },
               { field: 'EmpName', title: '姓名', width: 100 },
               { field: 'Phone', title: '手机', width: 130 },
               { field: 'DeptName', title: '部门', width: 240 }
                ]],

            });
        }
    </script>

<div id="mainTab" class="easyui-tabs" data-options="fit:true">
            <div title="我的桌面" data-options="closable:true" style="overflow: hidden; background:#fff">
                请输入工号：<input type="text" id="txtEmpNum" />
                <input type="button" id="btnSearch" value="查询" onclick="btnSearch()" />
                <div>
                    <table id="tbEmp" class="easyui-datagrid" title="员工信息" style="width:600px;height:400px"
                           data-options="collapsible:true"></table>
                </div>
                <iframe scrolling="auto" frameborder="0" src="" style="width: 100%; height: 100%;"></iframe>
            </div>
        </div>

效果图