すらいむがあらわれた

こまんど >  たたかう  にげる

DataTables + ASP.NET MVC

http://datatables.net/
こっちもサンプルjavascriptを張るだけで表ができます。
機能も多くてサンプルやドキュメントも豊富。

DataTables
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