ajax - 可重用客户端/启用 Ajax 的表格设计（不要使用默认的 Asp.Net Grid）

Question

我正在寻找具有以下 HTML 表功能的代码。

设计一个具有以下默认功能的可重用网格：

1. 启用 Ajax 的表（无回发）
2. 通过 Ajax 调用进行分页
3. 对 Ajax 调用进行排序
4. 通过 Ajax 调用过滤

Answer 1

你可以使用 jQuery datatables.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();
    }
}