.net MVC模式下easyui datagrid控制項分頁

標籤：style   class   tar   color   get   width   

此參照一位仁兄代碼，稍作修改

視圖代碼：

<div id="tab" class="easyui-tabs" data-options="tools:‘#tab-tools‘" style="width:800px;height:400px">
<div title="****" style="padding:0px;">
<div class="easyui-tabs" data-options="fit:true,plain:true" id="easyuitab">
<div title="****" style="padding:0px;">
<table id="grid" class="easyui-datagrid" style="height:600px"
data-options="iconCls: ‘icon-ok‘,
pageSize: 20,//預設顯示行數
animate: true,
collapsible: true,
url:‘/Json/Dt‘,
singleSelect:true,
method: ‘get‘,
idField: ‘id‘,
treeField: ‘name‘,
pagination:true"//必須設定

>
<thead>
<tr>
<th data-options="field:‘ID‘,width:80" hidden="hidden">ID</th>
<th data-options="field:‘**‘,width:80">**</th>
<th data-options="field:‘**‘,width:80">**</th>
<th data-options="field:‘**‘,width:80">**</th>
<th data-options="field:‘**‘,width:80">**</th>
<th data-options="field:‘**‘,width:200">**</th>
<th data-options="field:‘**‘,width:150">**1</th>
<th data-options="field:‘**‘,width:150">**2</th>
<th data-options="field:‘**‘,width:100">**</th>
<th data-options="field:‘**‘,width:80">**</th>
<th data-options="field:‘**‘,width:100">**</th>
<th data-options="field:‘**‘,width:100">**</th>
<th data-options="field:‘**‘,width:300">**</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>

 

public class PageRows
{
public int PageSize { get; set; }
public int PageIndex { get; set; }
}

視圖datagrid會自動傳兩個參數進來page（頁碼，第幾頁）跟rows(每頁顯示行數)

然後再接收total跟rows兩個參數來進行分頁（這兩個參數是固定的不需要後台去定義，只要把值賦給它們返回就行）

控制

public class JsonController : Controller
{

　　

/// <summary>
/// 分頁
/// </summary>
/// <param name="page"></param>
/// <param name="rows"></param>
/// <returns></returns>
public JsonResult Dt(int page, int rows)
{
SqliteConnection sq = new SqliteConnection();

var temp = new PageRows()
{
PageIndex = page,
PageSize = rows
};
int totalNum = 0;
var datalist = sq.LoadPage(temp, out totalNum);//訪問資料層，傳入temp ，指定一個返回參數 
var result = from dal in datalist select new { dal.ID,dal.**, dal.**, dal.**, dal.**, dal.**, dal.**, dal.**,
dal.**, dal.**, dal.**, dal.**, dal.Address };遍曆把需要傳人視圖datagrid的欄位放入result
var jsonResult = new { total = totalNum, rows = result };給total，rows賦值（datagrid分頁用這兩個參數分頁）
JsonResult json = new JsonResult { Data = jsonResult, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
return json;//返回json格式的資料
}

}

資料

/// <summary>
/// 分頁
/// </summary>
/// <param name="param"></param>
/// <param name="total"></param>
/// <returns></returns>

public IEnumerable<DataList> LoadPage(PageParam param, out int total)
{
string dt = string.Format("Select * from Information");
SqliteConnection sq = new SqliteConnection();
DataSet ds = sq.Search(dt);//查詢資料庫
List<DataList> dataList = new List<DataList>();
foreach (DataRow row in ds.Tables[0].Rows)
{
try
{
DataList d = new DataList();
d.ID = Convert.ToInt32(row["Id"]);
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
d.**= row["**"].ToString();
dataList.Add(d);
}
catch (Exception ex)
{

}
}
total = dataList.Count();
var result = dataList.OrderBy(d => d.Id)

.Skip(param.PageSize * (param.PageIndex - 1))//跳過總行數*頁數 返回剩餘的行數的資料

.Take(param.PageSize);//擷取剩餘行數中的指定行數的資料
return result;
}
}
把查詢資料庫方法補上全照搬功能即可實現