效果：
html代码：
- 使用css加载的方式，所以要在写html代码，也可以使用js操作。
<div>
<!--使用JS加载方式-->
<table id="tab"></table>
<!--按钮--->
<div id="tb">
<div style ="padding:5px;">
<a id ="add" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add',">添加</a>
<a id ="edit" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit',">修改</a>
<a id ="remove" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove',">删除</a>
</div>
<div style ="padding-left:10px;padding-bottom:10px;">
搜索姓名（可以模糊查询）：<input id ="name" name ="name" type ="text" class="textbox" style ="130px;" />
查询时间 从：<input id ="time_from" name ="time_from" type ="text" class ="easyui-datebox" style ="130px;"/>
到：<input id ="time_to" name ="time_to" type ="text" class ="easyui-datebox" style ="130px;"/>
<a id ="search" href ="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'," style ="margin-left:20px; padding:0 10px 0 10px;">搜索</a>
</div>
</div>
</div>
JS代码：
- toolbar使用css加载。其余看代码，看注释。
$(function () { //格式化日期输出样式 $('#time_from, #time_to').datebox({ formatter: function (date) { return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(); }, }); //Datagrid设置 $('#tab').datagrid({ //===================================== 样式 ===============================================// 800,//宽度 title: '信息列表',//标题名 iconCls: 'icon-search',//图标 singleSelect: true,//是否单选 striped: true,//是否开启斑马线 fitColumns: false,//是否自适应宽度（出现滚动条） loadMsg: '正在努力加载，请稍后………………',//显示加载提示信息 rownumbers: true,//显示行号 //showHeader: false,//是否显示行头（标题） //showFooter:false,//显示行尾，默认情况下不显示，要在后台使用json数据传递 //==========================================================================================// //============================= 加载数据，要显示的字段 =========================================// //要加载的数据 url: "../Json/datagridjson.ashx", //要显示的列 columns: [[ { field: 'id', title: '编号', align: 'center',//标题和内容居中 resizable: false,//不允许改变大小 //hidden:true,//隐藏该列 100,//所有字段设置成100，起到自动平均分配大小的作用 }, { field: 'name', title: '姓名', 100,//所有字段设置成100，起到自动平均分配大小的作用 halign: 'center',//仅标题居中 //显示数据的时候，格式化数据 formatter: function (value, row, index) { return '[ ' + value + ' ]'; }, }, { field: 'sex', title: '性别', 100,//所有字段设置成100，起到自动平均分配大小的作用 }, //在字段中使用排序，每点击一次，都会向后台POST要排序的字段和正序还是倒序排列。 { field: 'createtime', title: '创建时间', 400,//所有字段设置成100，起到自动平均分配大小的作用 sortable: true,//允许排序 } ]], //==========================================================================================// //===================================== 分页 ===============================================// //显示分页控件栏 pagination: true, pageNumber: 1,//初始化的时候在第几页 pageSize: 10,//，每页显示的条数 pageList: [10, 15, 20],//每页显示的条数 //==========================================================================================// //===================================== 排序 ===============================================// //通过POST传递到后台，然后进行排序。 sortName: 'createtime', sortOrder: 'desc', //==========================================================================================// //===================================== 按钮 ===============================================// toolbar: '#tb', //==========================================================================================// }); //添加 $('#add').click(function () { alert('添加按钮'); }); //修改 $('#edit').click(function () { alert('编辑按钮'); }); //删除 $('#remove').click(function () { alert('删除按钮'); }); //查询 $('#search').click(function () { $('#tab').datagrid('load', { searchvalue: $.trim($('input[name="name"]').val()), time_from: $.trim($('input[name="time_from"]').val()), time_to: $.trim($('input[name="time_to"]').val()), }); }); })
后台一般处理程序接收：
- 查询代码。
- 底部统计总条数代码。
-
rom Tb_person "+connect+" order by -
time from Tb_person " + connect + " ) as a where a.
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; //接受前台传递来的页数和每页显示的条数 //前台开启分页之后，传递来的参数 int pageIndex = Convert.ToInt32(context.Request["page"]); int pagenumber = Convert.ToInt32(context.Request["rows"]); //接收排序字段 string sortfield = context.Request["sort"]; string sortDescOrasc = context.Request["order"]; //------------------------------------------搜索----------------------------------------- string connect = ""; string searchvalue = ""; string time_from = ""; string time_to = ""; if (context.Request["searchvalue"] != null && context.Request["searchvalue"] != "") { searchvalue = "name like '%" + context.Request["searchvalue"] + "%' and "; connect += searchvalue; } if (context.Request["time_from"] != null && context.Request["time_from"] != "") { time_from = "createtime>='" + context.Request["time_from"].Replace('/','-') + "' and "; connect += time_from; } if (context.Request["time_to"] != null && context.Request["time_to"] != "") { time_to = "createtime<='" + context.Request["time_to"].Replace('/', '-') + "' and "; connect += time_to; } if (connect != "") { connect = " where " + connect.Substring(0, connect.Length - 4); } //-------------------------------------------------------------------------------------------- //存储数据 DataTable dt = new DataTable(); if (pageIndex == 1) { //加载第一页 string pageIndexOne = "select top " + pagenumber + " id, name, sex, createtime from Tb_person "+connect+" order by " + sortfield + " " + sortDescOrasc + ""; //获取并转换为JSON数据 dt = SQLHelper.ExecuteTable(pageIndexOne, CommandType.Text); } else if (pageIndex != 1) { //加载非第一页 string pageIndexNotOne = @"select id, name, sex, createtime from (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") as rownum, id, name, sex, createtime from Tb_person " + connect + " ) as a where a.rownum > " + (pageIndex - 1) * pagenumber + " and a.rownum <= " + pageIndex * pagenumber + ""; //获取并转换为JSON数据 dt = SQLHelper.ExecuteTable(pageIndexNotOne, CommandType.Text); } else { } //将datatable转换为json //在返回的JSON数据中，加入total属性（总记录数） //那么他就会在加载的时候，显示总记录数。 //显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。 //计算总条数（同时可以统计，使用关键字查询之后的条数） int totalnumber = (int)SQLHelper.ExcuteScalar("select count(*) from Tb_person " + connect + "", CommandType.Text); //返回数据 string strjson = "{"total":" + totalnumber + ", "rows":" + DatatableToJson.ToJson(dt) + "}"; context.Response.Write(strjson); }