C# 使用easyUI datagrid 实现后台分页
EASYUI DATAGRID 后台分页 C#
前台
JS部分
$(function () {
$('#gd_Show_Import_Sampe').datagrid({
title: '记录',
height: 'auto',
nowrap: false,
striped: true,
border: true,
collapsible: false,//是否可折叠的
fit: true,//自动大小
remoteSort: false,
idField: 'Id',
singleSelect: false,//是否单选
pagination: true,//分页控件
rownumbers: true,//行号
pageList:[10],//固定10行查询
columns: [[
{ field: 'Id', title: 'Id', width: 80, hidden: true },
{ field: 'PatientID', title: '标识', width: "10%", align: 'center' },
{ field: 'PatientName', title: '姓名', width: "10%", align: 'center' },
{ field: 'SexFlag', title: '性别', width: "10%", align: 'center' },
{ field: 'Import_Date', title: '日期', width: "15%", align: 'center' },
{ field: 'TB_CONSENT_FORM', title: 'XXX', width: '10%', align: 'center' },
{ field: 'Others', title: 'XXX', width: '40%', align: 'center' },
]]
});
//当分页时运行
var pager = $("#gd_Show_Import_Sampe").datagrid("getPager");
pager.pagination({
onSelectPage: function (pageNo, pageSize) {
var type = change_Ser_Method();//根据查询类型获取值
var stratDate = $('#strat_Date').textbox('getValue');
var endDate = $('#end_Date').textbox('getValue');
getDataForPage(type, stratDate, endDate, pageNo, pageSize);
}
});
});查询按钮的JS方法：
function queryreport() {
var type = change_Ser_Method();//根据查询类型获取值
var stratDate = $('#strat_Date').textbox('getValue');
var endDate = $('#end_Date').textbox('getValue');
if (stratDate == "" || endDate == "") { $.messager.alert('错误', '查询日期不能为空', 'error'); return; }
else {
if (!dateCompare) { $.messager.alert('错误', '开始日期不能大于结束日期', 'error'); return; }
else {
getDataForPage(type, stratDate, endDate, 0, 0);
}
}
}function getDataForPage(type, stratDate, endDate, pageNo, pageSize) {
//设置开始页码和结束页码
var startCount;
var endCount;
if (pageNo != 0 && pageSize!=0) {
startCount = (pageNo - 1) * pageSize;
endCount = startCount + pageSize;
} //获取远程服务器的数据
$.ajax({
type: 'GET',
url: '/Fp_Ajax/GetData.aspx?action=getLogImport',
data: {
Importtype: type,
stratDate: stratDate,
endDate: endDate,
startCount: startCount,
endCount: endCount
},
onSubmit: function () { },
success: function (data) {
if (data != "") {
var objdata = JSON.parse(data);
var total = objdata.Total;
if (total > 0) { //数据转换
var jsondata = objdata.JsonData;
var ds = jsondata.ds;
$('#gd_Show_Import_Sampe').datagrid('loadData', ds);
var pager = $("#gd_Show_Import_Sampe").datagrid("getPager");
var count = 10;
pager.pagination({
total: total,
pageNumber: pageNo
});
}
}
}
});
}
前台方面只要数据返回之后 根据页码就可以绑定上去
二、后台代码：
string strJson = "";
string strGetDataType = "";
string strImportType = Request.Params["Importtype"].ToString();
string[] array = strImportType.Split('-');
//获取传入的时间
string strStartDate = Request.Params["stratDate"].ToString();
string strendDate = Request.Params["endDate"].ToString();
//获取页码
int startCount = Convert.ToInt32(Request["startCount"]);
int endCount = Convert.ToInt32(Request["endCount"]); //当第一次获取时，默认获取前10的数据
if (startCount==0||endCount==0){startCount = 1;endCount = 10;}
else if (startCount>1){endCount = startCount+10-1;}
strJson = log_bll.GetDate(strGetDataType, "", strStartDate, strendDate, startCount, endCount);
Response.Write(strJson);
后台代码需要注意的是，需要将数据返回为JSON数据格式：
{"Total":"51","JsonData":{"ds":[{"Row":1,"Id":71,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":2,"Id":70,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":3,"Id":69,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":4,"Id":68,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":5,"Id":67,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":6,"Id":66,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":7,"Id":65,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":8,"Id":64,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":9,"Id":63,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"},{"Row":10,"Id":62,"PatientID":1000456613,"Import_Date":"2016-06-23T00:00:00","Import_State":true,"Import_Date_Msg":"{\"success\":true,\"msg\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"message\":\"10 \\u6761\\u8bb0\\u5f55\\u6210\\u529f\\u5bfc\\u5165.\",\"status\":\"DONE\",\"job_id\":\"importers:import:b7d9ede1cd0cafacefb54a7629f4a777\"}","Import_User_Id":"xys","Import_User_Department":"心研所","Import_Type":"sample","Others":"上清-心研所:5管;上清-心研所:5管","PatientName":"黄燕娥","SexFlag":"女","TB_CONSENT_FORM":"无"}]}}
由于是直接使用dataset转换的 所以需要解析多一遍
本文仅用记录，目前参考价值不大