DataTables + ASP.NET MVC
http://datatables.net/
こっちもサンプルjavascriptを張るだけで表ができます。
機能も多くてサンプルやドキュメントも豊富。
DataTables posted by (C)kanpan
Controller側
public ActionResult DataTables() { return View(); } private int GetTotalCount() { int count = 0; using (SqlConnection sqlCon = new SqlConnection(conStr)) { try { sqlCon.Open(); String sql = "select count(*) from usage"; SqlCommand command = new SqlCommand(sql, sqlCon); count = (int)command.ExecuteScalar(); } catch (Exception) { count = 0; } } return count; } string[] columnNames = new string[] { "year", "month", "day", "hour", "capacity", "usage" }; public ActionResult UseDataTables( int sEcho, int iDisplayStart, int iDisplayLength, int iSortCol_0, string sSortDir_0 ) { int total = GetTotalCount(); int page = sEcho; int rp = iDisplayLength; int start = iDisplayStart; string sortName = columnNames[iSortCol_0]; string sortOrder = sSortDir_0; using (SqlConnection sqlCon = new SqlConnection(conStr)) { try { sqlCon.Open(); String sql = String.Join(" ", new string[] { "select *", " from ( ", " select ROW_NUMBER() over (order by " + sortName + " " + sortOrder + ") as rn, *", " from usage", " ) as TMP", " where TMP.rn > @p0 and TMP.rn <= @p1", } ); SqlCommand command = new SqlCommand(sql, sqlCon); command.Parameters.Add("@p0", SqlDbType.Int).Value = start; command.Parameters.Add("@p1", SqlDbType.Int).Value = start + iDisplayLength; SqlDataReader reader = command.ExecuteReader(); List<object[]> rowList = new List<object[]>(); while (reader.Read()) { long recNo = reader.GetInt64(1); int year = reader.GetInt32(2); int month = reader.GetInt32(3); int day = reader.GetInt32(4); int hour = reader.GetInt32(5); int capacity = reader.GetInt32(7); int usage = reader.GetInt32(10); rowList.Add(new object[] { year, month, day, hour, capacity, usage }); } if (Request.IsAjaxRequest()) { JsonResult result = Json( new { sEcho = page, iTotalRecords = total, iTotalDisplayRecords = total, aaData = rowList.ToArray(), } ); return result; } else { this.Response.StatusCode = 403; return new EmptyResult(); } } catch (Exception ex) { this.Response.StatusCode = 500; return new EmptyResult(); } }
View側
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> DataTables </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>DataTables</h2> <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> <thead> <tr> <th width="10%">year</th> <th width="10%">month</th> <th width="10%">day</th> <th width="10%">hour</th> <th width="20%">capacity</th> <th width="20%">usage</th> </tr> </thead> <tbody> </tbody> </table> <script src="<%= ResolveClientUrl("~/Scripts/DataTables/jquery.dataTables.js") %>" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { $('#example').dataTable({ "bFilter": false, "bServerSide": true, "sAjaxSource": '<%: ResolveClientUrl("~/Main/UseDataTables") %>', "fnServerData": function (sSource, aoData, fnCallback) { $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback }); } }); }); </script> </asp:Content>
こちらもTHE CODE PROJECTに詳しい英文記事があります。
jQuery DataTables and ASP.NET MVC Integration - Part I
http://www.codeproject.com/KB/aspnet/JQuery-DataTables-MVC.aspx
ASP.NET MVC Editable DataTable (jQuery DataTables and ASP.NET MVC integration - Part II)
http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx