标题: jQuery插件：DataTables分页取数据示例
作者: dnawo
日期: 2012-10-22 10:32 AM
分类: 脚本语言
内容: DataTables分页取数据示例
Default.aspx：
复制内容到剪贴板 程序代码<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DataTables分页取数据示例 - Mzwu.COM</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#example").dataTable({
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bAutoWidth": false,
"bStateSave": true,
"iDisplayLength": 10,
//"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "data.ashx",
"sServerMethod": "POST",
"fnServerParams": function (aoData) {
aoData.push({"name": "name1", "value": "value1"});
aoData.push({"name": "name2", "value": "value2"});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="example" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
</thead>
</table>
</form>
</body>
</html>
data.ashx：
复制内容到剪贴板 程序代码<%@ WebHandler Language="C#" Class="data" %>
using System;
using System.Web;
using System.Linq;
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class data : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//data
List<List<string>> data = new List<List<string>>();
for (int i = 0; i < 100; i++)
{
data.Add(new List<string> { i.ToString(), "user" + i.ToString() });
}
//Request.Form
//sEcho=1&iColumns=2&sColumns=&iDisplayStart=10&iDisplayLength=10&mDataProp_0=0&mDataProp_1=1&name1=value1&name2=value2
string sEcho = context.Request.Form["sEcho"];
int iDisplayStart, iDisplayLength;
int.TryParse(context.Request.Form["iDisplayStart"], out iDisplayStart);
int.TryParse(context.Request.Form["iDisplayLength"], out iDisplayLength);
//Server Data
ServerData serverdata = new ServerData();
serverdata.sEcho = sEcho;
serverdata.iTotalRecords = data.Count;
serverdata.iTotalDisplayRecords = data.Count;
serverdata.aaData = data.Skip(iDisplayStart).Take(iDisplayLength).ToList();
//output json
JavascriptSerializer serializer = new JavascriptSerializer();
context.Response.Write(serializer.Serialize(serverdata));
}
public bool IsReusable {
get {
return false;
}
}
}
public class ServerData
{
public string sEcho { get; set; }
public int iTotalRecords { get; set; }
public int iTotalDisplayRecords { get; set; }
public List<List<string>> aaData { get; set; }
}
参考资料
[1].Server-side processing：http://www.datatables.net/usage/server-side
+ 查看当前日志评论 (0)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.063 ms
标题: jQuery插件：DataTables分页取数据示例
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.063 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.063 ms