javascript代码实例教程-Juery DataTable加载后台数据

发布时间:2019-02-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Juery DataTable加载后台数据脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 1.先从DataTable官网下载所需的js文件,或者直接引用也可--https://datatables.net/usage/

 

2.放入你的项目中引用

[htML]  

<%@ 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="https://www.asp.net/cn" title="ASP.NET 网站">www.asp.net/cn</a>。  

    </p>  

    <p>  

        您还可以找到 <a href="https://go.microsoft.COM/fwlink/?LinkID=152368" title="MSDN ASP.NET 文档">  

            MSDN 上有关 ASP.NET 的文档</a>。  

    </p>  

    <p 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>  

    </p>  

</asp:Content>  

 

3.后台代码

[csharp

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

        }  

    }  

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Juery DataTable加载后台数据全部内容,希望文章能够帮你解决javascript代码实例教程-Juery DataTable加载后台数据所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。