ajax - 再利用可能なクライアント側/Ajax 対応のテーブル デザイン (デフォルトの Asp.Net グリッドを使用しないでください)

Question

HTMLテーブルで以下の機能を持つコードを探しています。

以下のデフォルト機能を持つ再利用可能なグリッドを設計します。

1. Ajax 対応テーブル (ポストバックなし)
2. Ajax 呼び出しによるページング
3. Ajax 呼び出しの並べ替え
4. Ajax 呼び出しによるフィルタリング

Answer 1

このタスクにはjQuerydatatables.netを使用できます。ここからjsファイルをダウンロードできます。

JSファイルをダウンロード

ここでは、同じサンプルについて説明します。エンティティフレームワークを使用してバックエンドからデータをフェッチしました。エンティティフレームワークを使用していない場合は、このサンプルから概念を取得して、途中で実装します。

HTML：

<table id="tblList" cellpadding="0" cellspacing="0" border="0" class="grid" >
    <thead>
        <tr>
            <th class="headingtextcenter">#</th><th class="headingtextcenter">Name</th><th class="headingtextcenter">Description</th>
            <th class="headingtextcenter">Form Publish Date</th><th class="headingtextcenter">Last Data Entery Date</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(window).load(function () {
        var oTable = $('#tblList').dataTable({
            "bServerSide": true,
            "sAjaxSource": "List.aspx?load=1",
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "oLanguage": { "sZeroRecords": "<div style='width:99%;text-align:center;padding:4px;'>No record found.</div>" },
            "aoColumns": [
                { "sName": "ID","bSortable": false },
                { "fnRender": function (oObj) {
                        return '<a  href=\"Whitepaper/' +
                            oObj.aData[3] + '\" >' + oObj.aData[0] + '</a>';
                    },"bSortable": false },
                { "sName": "Description", "bSortable": false},
                { "sName": "FormPublishDate", "bSortable": false},
                { "sName": "LastDataEnteryDate"}
            ],
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $('td', nRow).addClass("cells");
            }
        });
    });
</script>
//User fnRowCallback function if you want to add css to all td

コードビハインド（List.aspx.cs）：

private FormEntities objEntities;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        if (Request.QueryString["load"] != null && Request.QueryString["load"].ToString() == "1")
            BindData();
    }
}

private void BindData()
{
    using (objEntities = new FormEntities())
    {
        //For sorting
        Func<Forms, string> orderingFunction = (c => c.LastDataEnteryDate);
        var sortDirection = Request["sSortDir_0"];

        IEnumerable<Forms> allForms = objEntities.Forms;

        var sSearch = Convert.ToString(Request["sSearch"]);
        if (!string.IsNullOrEmpty(sSearch))
        {
            allVideoLibraries = allForms.Where(c => c.LastDataEnteryDate.ToLower().Contains(sSearch.ToLower()));
        }

        if (sortDirection == "asc")
            allForms = allForms.OrderBy(orderingFunction);
        else if (sortDirection == "desc")
            allForms = allForms.OrderByDescending(orderingFunction);

        var displayForms = allForms.Skip(int.Parse(Request.QueryString["iDisplayStart"])).Take(int.Parse(Request.QueryString["iDisplayLength"]));

        var result = from v in displayForms
                     select new[] { v.ID,v.Name, v.Description, v.FormPublishDate ,v.LastDataEnteryDate };

        JavaScriptSerializer toJSON = new JavaScriptSerializer(); //need to add reference using System.Web.Script.Serialization;
        Response.Clear();
        string datastring = toJSON.Serialize(new 
        {
            sEcho = Request.QueryString["sEcho"],
            iTotalRecords = result.Count(),
            iTotalDisplayRecords = result.Count(),
            aaData = result
        });
        Response.Write(datastring);
        Response.End();
    }
}