Juery DataTable加载后台数据

1.先从DataTable官网下载所需的js文件，或者直接引用也可--http://datatables.net/usage/

2.放入你的项目中引用

<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="TestEntityFramework._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <link href="Styles/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="Styles/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" />
    <link href="Styles/demo_page.css" rel="stylesheet" type="text/css" />
    <link href="Styles/demo_table.css" rel="stylesheet" type="text/css" />
    <link href="Styles/demo_table_jui.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.dataTables.js" type="text/javascript"></script>
    <script src="Scripts/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="Scripts/ExamplTable.js" type="text/javascript"></script>
    <h2>
        欢迎使用 ASP.NET!
    </h2>
    <p>
        若要了解关于 ASP.NET 的详细信息，请访问 <a href="http://www.asp.net/cn" title="ASP.NET 网站">www.asp.net/cn</a>。
    </p>
    <p>
        您还可以找到 <a href="http://go.microsoft.com/fwlink/?LinkID=152368" title="MSDN ASP.NET 文档">
            MSDN 上有关 ASP.NET 的文档</a>。
    </p>
    <div class="container">
        <table id="example" class="display" width="100%">
            <thead>
                <tr align="left">
                    <th>
                        UserName
                    </th>
                    <th>
                        UserCode
                    </th>
                    <th>
                        UserEmail
                    </th>
                </tr>
            </thead>
            <tfoot>
                <tr align="left">
                    <th>
                        UserName
                    </th>
                    <th>
                        UserCode
                    </th>
                    <th>
                        UserEmail
                    </th>
                </tr>
            </tfoot>
            <tbody>
                <asp:Repeater ID="userRe" runat="server">
                    <ItemTemplate>
                        <tr>
                            <td>
                                <%#Eval("UserName")%>
                            </td>
                            <td>
                                <%#Eval("UserCode")%>
                            </td>
                            <td>
                                <%#Eval("UserEmail")%>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </tbody>
        </table>
    </div>
</asp:Content>

3.后台代码

public partial class _Default : System.Web.UI.Page
	{
		protected void Page_Load(object sender, EventArgs e)
		{
			if (!IsPostBack)
			{
				InitData();
			}
		}

		public void InitData()
		{
 			ProductEntities db = new ProductEntities();
			var user = db.T_User;
			DataTable dt = new DataTable();
			dt.Columns.Add("UserName");
			dt.Columns.Add("UserCode");
			dt.Columns.Add("UserEmail");
			if (user != null)
			{
				foreach (var item in user)
				{
					DataRow dr = dt.NewRow();
					dr["UserName"] = item.User_Name;
					dr["UserCode"] = item.User_Code;
					dr["UserEmail"] = item.User_EMail;

					dt.Rows.Add(dr);
				}
			}

			userRe.DataSource = dt;
			userRe.DataBind();
		}
	}

4.效果