[英]jQuery DataTables server-side processing using ASP.NET WebForms
問題:
解:
public class Data : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Paging parameters:
var iDisplayLength = int.Parse(context.Request["iDisplayLength"]);
var iDisplayStart = int.Parse(context.Request["iDisplayStart"]);
// Sorting parameters
var iSortCol = int.Parse(context.Request["iSortCol_0"]);
var iSortDir = context.Request["sSortDir_0"];
// Search parameters
var sSearch = context.Request["sSearch"];
// Fetch the data from a repository (in my case in-memory)
var persons = Person.GetPersons();
// Define an order function based on the iSortCol parameter
Func<Person, object> order = person => iSortCol == 0 ? (object) person.Id : person.Name;
// Define the order direction based on the iSortDir parameter
persons = "desc" == iSortDir ? persons.OrderByDescending(order) : persons.OrderBy(order);
// prepare an anonymous object for JSON serialization
var result = new
{
iTotalRecords = persons.Count(),
iTotalDisplayRecords = persons.Count(),
aaData = persons
.Where(p => p.Name.Contains(sSearch)) // Search: Avoid Contains() in production
.Where(p => p.Id.ToString().Contains(sSearch))
.Select(p => new[] {p.Id.ToString(), p.Name})
.Skip(iDisplayStart) // Paging
.Take(iDisplayLength)
};
var serializer = new JavaScriptSerializer();
var json = serializer.Serialize(result);
context.Response.ContentType = "application/json";
context.Response.Write(json);
}
public bool IsReusable { get { return false; } }
}
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public static IEnumerable<Person> GetPersons()
{
for (int i = 0; i < 57; i++)
{
yield return new Person { Id = i, Name = "name " + i };
}
}
}
我寫了一個簡單的例子來說明這個想法。
首先編寫一個處理服務器端數據的通用處理程序( Data.ashx
但這可能是一個網頁,Web服務,任何能夠返回JSON格式化數據的服務器端腳本):
public class Data : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Those parameters are sent by the plugin
var iDisplayLength = int.Parse(context.Request["iDisplayLength"]);
var iDisplayStart = int.Parse(context.Request["iDisplayStart"]);
var iSortCol = int.Parse(context.Request["iSortCol_0"]);
var iSortDir = context.Request["sSortDir_0"];
// Fetch the data from a repository (in my case in-memory)
var persons = Person.GetPersons();
// Define an order function based on the iSortCol parameter
Func<Person, object> order = p =>
{
if (iSortCol == 0)
{
return p.Id;
}
return p.Name;
};
// Define the order direction based on the iSortDir parameter
if ("desc" == iSortDir)
{
persons = persons.OrderByDescending(order);
}
else
{
persons = persons.OrderBy(order);
}
// prepare an anonymous object for JSON serialization
var result = new
{
iTotalRecords = persons.Count(),
iTotalDisplayRecords = persons.Count(),
aaData = persons
.Select(p => new[] { p.Id.ToString(), p.Name })
.Skip(iDisplayStart)
.Take(iDisplayLength)
};
var serializer = new JavaScriptSerializer();
var json = serializer.Serialize(result);
context.Response.ContentType = "application/json";
context.Response.Write(json);
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public static IEnumerable<Person> GetPersons()
{
for (int i = 0; i < 57; i++)
{
yield return new Person
{
Id = i,
Name = "name " + i
};
}
}
}
然后是WebForm:
<%@ Page Title="Home Page" Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="/styles/demo_table.css" />
<script type="text/javascript" src="/scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="/scripts/jquery.dataTables.js"></script>
<script type="text/javascript">
$(function () {
$('#example').dataTable({
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': '/data.ashx'
});
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
這個例子過於簡單,但我希望它能說明如何盯着看的基礎知識。
您列出的示例頁面實際上是排序,分頁,初始化過濾。 基本上,您通過查詢字符串傳遞這些數據。
就像是:
sAjaxSource": "../examples_support/server_processing.ashx?SortBy=FirstName&FilterBy=StackOverFlow"
話雖如此,如果你想覆蓋某些行為或想要擴展dataTable的功能,你有幾個選擇: 擴展dataTable功能 自定義滾動
您可以按照上面的示例進行自定義,以進行過濾,排序和分頁
我是asp.Net開發人員......請記住.net開發人員習慣使用.net控件構建網頁,而不是javascript控件。
區別在於:一個asp.net控件是一個服務器端控件,你管理它而不用自己編寫javascript,而是用C#/ VB.net編程。 當網站運行時,asp.net控件自動生成客戶端javascript控件。
它的方法更“現代”,而且非常強大。
因此,如果您是.net開發人員,我建議您使用此方法。 如果您是一名javascript開發人員並且只構建應用程序的客戶端接口,那么您可能需要一個webService,它提供XML格式的服務器端數據,您可以通過HTTP調用和讀取。 但是,要“搜索”,通過AJAX提供“分頁”和“排序”,你需要開發服務器端......
http://naspinski.net/post/REAL-AJAX-with-AspNet-(not-AspNet-AJAX).aspx
這家伙已經使用asp.net和datatables進行了ajax工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.