可重用的客户端/支持Ajax的表设计（不要使用默认的Asp.Net网格）

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

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

支持Ajax的表（无回发）

通过Ajax调用进行分页

通过Ajax调用排序

过滤Ajax调用

---

您可以使用jQuery datatables.net执行此任务。您可以从这里下载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

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();
    }
}

#姓名描述
表单发布日期上次数据输入日期
$（窗口）。加载（函数（）{
变量oTable=$（'#tblList'）。数据表({
“bServerSide”：正确，
“sAjaxSource”：“List.aspx？load=1”，
“bProcessing”：正确，
“sPaginationType”：“完整编号”，
“oLanguage”：{“sZeroRecords”：“未找到任何记录”。}，
“aoColumns”：[
{“sName”：“ID”，“bSortable”：false}，
{“fnRender”：函数（oObj）{
返回“”；
}，“bSortable”：false}，
{“sName”：“Description”，“bSortable”：false}，
{“sName”：“FormPublishDate”，“bSortable”：false}，
{“sName”：“LastDataEnteryDate”}
],
“fnRowCallback”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
$（'td'，nRow）.addClass（“单元格”）；
}
});
});
//如果要将css添加到所有td，请使用fnRowCallback函数

代码隐藏（List.aspx.cs）：

<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

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();
    }
}

私有表单实体对象；
受保护的无效页面加载（对象发送方、事件参数e）
{
如果（！IsPostBack）
{
if（Request.QueryString[“load”！=null&&Request.QueryString[“load”].ToString（）=“1”）
BindData（）；
}
}
私有void BindData（）
{
使用（Objenties=new FormEntities（））
{
//用于分类
Func orderingFunction=（c=>c.LastDataEnteryDate）；
var sortDirection=请求[“sortdir_0”]；
IEnumerable allForms=对象属性.Forms；
var sSearch=Convert.ToString（请求[“sSearch”]）；
如果（！string.IsNullOrEmpty（sSearch））
{
allVideoLibraries=allForms.Where（c=>c.LastDataEnteryDate.ToLower（）.Contains（sSearch.ToLower（））；
}
如果（排序方向==“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[“idisplayslength”]）；
var结果=来自displayForms中的v
选择新[]{v.ID，v.Name，v.Description，v.FormPublishDate，v.LastDataEnteryDate}；
JavaScriptSerializer toJSON=新JavaScriptSerializer（）；//需要使用System.Web.Script.Serialization添加引用；
Response.Clear（）；
字符串datastring=toJSON.Serialize（新
{
sEcho=Request.QueryString[“sEcho”]，
iTotalRecords=result.Count（），
iTotalDisplayRecords=result.Count（），
aa数据=结果
});
Write（数据字符串）；
Response.End（）；
}
}

Hi，我希望此功能是动态的，就像我们可以将其用作用户控件，并可以与不同的数据集绑定一样。谢谢你，拉吉