ASP.Net MVC+Data Table實現(xiàn)分頁+排序功能的方法
本文實例講述了ASP.Net MVC+Data Table實現(xiàn)分頁+排序功能的方法。分享給大家供大家參考,具體如下:
實現(xiàn)思路:
使用datatable內(nèi)置的分頁,排序
使用attribute+反射來控制需要排序和顯示的字段以及順序
分離排序和顯示邏輯
若要添加搜索邏輯只需要傳遞搜索的字段到后端即可(js初始化時把"searching": false拿掉)。
View :
@using BCMS.BusinessLogic
@using BCMS.BusinessLogic.Models
@model List<BusCaptainObj>
<table id="tblData" class="table table-striped">
<thead>
<tr class="data-list">
<th style="width:10%;">@Html.DisplayNameFor(model => model.First().PersNo)</th>
<th style="width:30%;">@Html.DisplayNameFor(model => model.First().Personnel_Name)</th>
<th style="width:20%;">@Html.DisplayNameFor(model => model.First().Position)</th>
<th style="width:20%;">@Html.DisplayNameFor(model => model.First().Interchange)</th>
<th style="width:20%;">Action</th>
</tr>
</thead>
</table>
@section scripts {
<script type="text/javascript">
@{
var columns = DataTableHelper.DisplayColumns<BusCaptainObj>();
}
$(document).ready(function () {
$('#tblData').dataTable({
"processing": true,
"serverSide": true,
"searching": false,
"stateSave": true,
"oLanguage": { "sInfoFiltered": "" },
"ajax": {
"url": @Url.Action("GetJsonData"),
"type": "GET"
},
"columns": [
{ "data": "@columns[0]" },
{ "data": "@columns[1]" },
{ "data": "@columns[2]" },
{ "data": "@columns[3]" },
{
"data": "@columns[0]",
"orderable": false,
"searchable": false,
"render": function (data, type, full, meta) {
if (type === 'display') {
return GetDetailButton("/BusCaptain/Detail?bcId=", data) + GetInfoButton("/Telematics?bcId=", data, "Performance");
} else { return data; }
}
}
],
"order": [[0, "asc"]]
});
});
</script>
}
Controller :
public ActionResult GetJsonData(int draw, int start, int length)
{
string search = Request.QueryString[DataTableQueryString.Searching];
string sortColumn = "";
string sortDirection = "asc";
if (Request.QueryString[DataTableQueryString.OrderingColumn] != null)
{
sortColumn = GetSortColumn(Request.QueryString[DataTableQueryString.OrderingColumn]);
}
if (Request.QueryString[DataTableQueryString.OrderingDir] != null)
{
sortDirection = Request.QueryString[DataTableQueryString.OrderingDir];
}
DataTableData dataTableData = new DataTableData();
dataTableData.draw = draw;
int recordsFiltered = 0;
dataTableData.data = BusCaptainService.Instance.SearchMyBuscaptains(User.Identity.Name, out recordsFiltered, start, length, sortColumn, sortDirection, search).Data;
dataTableData.recordsFiltered = recordsFiltered;
return Json(dataTableData, JsonRequestBehavior.AllowGet);
}
public string GetSortColumn(string sortColumnNo)
{
var name = DataTableHelper.SoringColumnName<BusCaptainObj>(sortColumnNo);
return name;
}
public class DataTableData
{
public int draw { get; set; }
public int recordsFiltered { get; set; }
public List<BusCaptainObj> data { get; set; }
}
Model :
class XXX{
...
[DisplayColumn(0)]
[SortingColumn(0)]
public int? A { get; set; }
[DisplayColumn(1)]
[SortingColumn(1)]
public string B { get; set; }
...
}
Helper class :
public class SortingColumnAttribute : Attribute
{
public int Index { get; }
public SortingColumnAttribute(int index)
{
Index = index;
}
}
public class DisplayColumnAttribute : Attribute
{
public int Index { get; }
public DisplayColumnAttribute(int index)
{
Index = index;
}
}
public static class DataTableQueryString
{
public static string OrderingColumn = "order[0][column]";
public static string OrderingDir = "order[0][dir]";
public static string Searching = "search[value]";
}
public static class DataTableHelper
{
public static IList<string> DisplayColumns<T>()
{
var result = new Dictionary<int, string>();
var props = typeof(T).GetProperties();
foreach (var propertyInfo in props)
{
var propAttr =
propertyInfo
.GetCustomAttributes(false)
.OfType<DisplayColumnAttribute>()
.FirstOrDefault();
if (propAttr != null)
{
result.Add(propAttr.Index,propertyInfo.Name);
}
}
return result.OrderBy(x => x.Key).Select(x => x.Value).ToList();
}
public static string SoringColumnName<T>(string columnIndex)
{
int index;
if (!int.TryParse(columnIndex, out index))
{
throw new ArgumentOutOfRangeException();
}
return SoringColumnName<T>(index);
}
public static string SoringColumnName<T>(int index)
{
var props = typeof(T).GetProperties();
foreach (var propertyInfo in props)
{
var propAttr =
propertyInfo
.GetCustomAttributes(false)
.OfType<SortingColumnAttribute>()
.FirstOrDefault();
if (propAttr != null && propAttr.Index == index)
{
return propertyInfo.Name;
}
}
return "";
}
}
Query:
...
var query = context.BusCaptains
.Where(x => ...)
.OrderByEx(sortDirection, sortField)
.Skip(start)
.Take(pageSize);
...
LINQ Helper :
...
public static IQueryable<T> OrderByEx<T>(this IQueryable<T> q, string direction, string fieldName)
{
try
{
var customProperty = typeof(T).GetCustomAttributes(false).OfType<ColumnAttribute>().FirstOrDefault();
if (customProperty != null)
{
fieldName = customProperty.Name;
}
var param = Expression.Parameter(typeof(T), "p");
var prop = Expression.Property(param, fieldName);
var exp = Expression.Lambda(prop, param);
string method = direction.ToLower() == "asc" ? "OrderBy" : "OrderByDescending";
Type[] types = new Type[] {q.ElementType, exp.Body.Type};
var mce = Expression.Call(typeof(Queryable), method, types, q.Expression, exp);
return q.Provider.CreateQuery<T>(mce);
}
catch (Exception ex)
{
_log.ErrorFormat("error form OrderByEx.");
_log.Error(ex);
throw ;
}
}
...
更多關(guān)于asp.net相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《asp.net優(yōu)化技巧總結(jié)》、《asp.net字符串操作技巧匯總》、《asp.net操作XML技巧總結(jié)》、《asp.net文件操作技巧匯總》、《asp.net ajax技巧總結(jié)專題》及《asp.net緩存操作技巧總結(jié)》。
希望本文所述對大家asp.net程序設(shè)計有所幫助。
相關(guān)文章
asp.net用url重寫URLReWriter實現(xiàn)任意二級域名 高級篇
Asp.net 用url重寫(URLReWriter)實現(xiàn)任意二級域名,需要的朋友可以參考下,建議先看一下上一篇文章。2009-11-11
ASP.NET實現(xiàn)偽靜態(tài)網(wǎng)頁方法小結(jié)
這篇文章主要介紹了ASP.NET實現(xiàn)偽靜態(tài)網(wǎng)頁方法小結(jié),主要包括了利用Httphandler實現(xiàn)URL重寫、地址重寫、利用Mircosoft URLRewriter.dll實現(xiàn)頁面?zhèn)戊o態(tài)等,需要的朋友可以參考下2014-09-09
asp.net mvc webapi 實用的接口加密方法示例
本篇文章主要介紹了asp.net mvc webapi 實用的接口加密方法示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10
Visual?Studio?2022?MAUI?NU1105(NETSDK1005)?問題處理記錄
某一天修改了幾行代碼后,突然項目無法編譯了,提示NU1105錯誤,這篇文章主要介紹了Visual?Studio?2022?MAUI?NU1105(NETSDK1005)?處理記錄,需要的朋友可以參考下2022-12-12
asp.net在Repeater嵌套的Repeater中使用復(fù)選框詳解
這篇文章主要介紹了asp.net在Repeater嵌套的Repeater中使用復(fù)選框,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12

