jQuery DataTable JS 不工作（ASP .NET 3 层架构）

Question

我在我的项目中使用 3 层架构，其结构如下：

网页（参考了 BusinessLogic(C# Class)
业务逻辑（参考了DataAccess(C# class）包含所有数据访问方法。
DataAccess - 包含数据库操作方法（插入、更新、删除等）

现在在我的网站中，我使用的是 MasterPage-ContentPage 关系。据我所知，我正在为我的母版页中的各个页面加载我的所有脚本和 CSS。

这是母版页的底部部分（脚本参考）：

 <!-- jQuery 2.1.4 -->
    <script type="text/javascript" src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>

    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

    <!-- SlimScroll -->
    <script src="../../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>

    <!-- FastClick -->
    <script type="text/javascript" src='../../plugins/fastclick/fastclick.min.js'></script>

    <!-- AdminLTE App -->
    <script src="../../dist/js/app.min.js" type="text/javascript"></script>

    <script src="dist/js/toastr.js" type="text/javascript"></script>

    <!-- Demo -->
    <script src="../../dist/js/demo.js" type="text/javascript"></script>

    <!-- DATA TABES SCRIPT -->
    <script type="text/javascript" src="media/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $('#example').dataTable();
    </script>

这是我主页的顶部部分（CSS 参考）：

 <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />

    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <link href="dist/css/toastr.css" rel="stylesheet" type="text/css" />

    <link href="media/css/jquery.dataTables.css" rel="stylesheet" />

    <!-- AdminLTE Skins. Choose a skin from the css/skins 
         folder instead of downloading all of them to reduce the load. -->
    <link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />

正如我从官方看到的jQuery DataTable tutorial page，这是我应该在我的脚本中初始化我的 DataTable 的方式。

当我运行时，CSS 仍按预期工作，但 JS 不工作，因为我尝试使用 排序、搜索等功能 - 没有任何效果。

这是我的参考内容页面：

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="content-wrapper">
        <div class="content">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Products : </h3>
                </div>
                <div class="box-body">
                    <asp:Repeater ID="rptr" runat="server">

            <HeaderTemplate>
                <table id="example" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th >Sr. No</th>
                            <th>Name</th>
                            <th>Category</th>
                            <th>Company</th>
                            <th>Price</th>
                            <th>In Stock</th>
                            <th>Min. Qty</th>
                            <th>Date Created</th>
                            <th></th>
                        </tr>
                    </thead>
            </HeaderTemplate>
            <ItemTemplate>
                <tbody>
                    <tr>
                        <td><%# Container.ItemIndex + 1 %></td>
                        <td><%# Eval("ProdName") %></td>
                        <td><%# Eval("CategoryName") %></td>
                        <td><%# Eval("CompanyName") %></td>
                        <td><%# Eval("ProdPrice") %></td>
                        <td><%# Eval("QuantityInStock")%></td>
                        <td><%# Eval("MinQuantity")%></td>
                        <td><%# Eval("DateCreated")%></td>
                        <td><a href='<%# "ProductDetails.aspx?ID=" + Eval("ProductID") %>'>View</a></td>
                    </tr>
                </tbody>
            </ItemTemplate>

            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

这是我的 PageLoad 方法。除了 PageLoad 之外，页面没有其他方法：

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Session["user"] != null)
            {
                rptr.DataSource = new ProductLogic().fillProductTable();
                rptr.DataBind();
            }
            else
            {
                Response.Redirect("Login.aspx?url=ProductDetails.aspx");
            }
        }
    }

我不知道我做错了什么。数据正在正确加载，CSS 是，但 JS 根本不起作用。我在这里做错了什么？

Answer 1

我相信除了我在回答中提到的在您的 ASP.NET 网络应用程序中使用 jQuery DataTable 之外，还有其他方法。但我发现这是最简单的方法。

步骤 1) 在您的 website.In 下面的代码中创建一个 网络服务 我正在转换一个 datatable 从我的查询结果返回到 JSON Array，其中包含我在 Internet 上找到的一个实用程序。这是 WebService 的代码：

/// <summary>
/// Summary description for ProductDetailsWebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class ProductDetailsWebService : System.Web.Services.WebService
{
    [WebMethod]
    public void GetProductDetails()
    {
        ProductLogic prodLogic = new ProductLogic();
        DataTable dt = prodLogic.fillProductTable();

        JavaScriptSerializer serializer = new JavaScriptSerializer();

        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

        Dictionary<string, object> row;

        foreach (DataRow dr in dt.Rows)
        {
            row = new Dictionary<string, object>();
            foreach (DataColumn col in dt.Columns)
            {
                row.Add(col.ColumnName, dr[col]);
            }
            rows.Add(row);
        }
        Context.Response.Write(serializer.Serialize(rows));
    }


}

Step-2) HTML 看起来非常简单，基本的 <thead> 标签包含几个<tr>。请注意，您在此处提供的 id 很重要，因为此 ID 将在 JS 中用于查找 table 元素。这是 HTML :

<table id="datatable" class="table table-bordered table-striped">
       <thead>
          <tr>
             <th>Name</th>
             <th>Category</th>
             <th>Company</th>
             <th>Price</th>
             <th>In Stock</th>
             <th>Min. Qty</th>
             <th>Date Created</th>
             <th>More</th>
           </tr>
         </thead>
   </table>

Step-3) JS :

<!-- DATA TABES SCRIPT -->
    <script type="text/javascript" src="media/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $.ajax({
            url: 'ProductDetailsWebService.asmx/GetProductDetails',
            method: 'post',
            dataType: 'json',
            success: function (data) {
                var dataTableInstance = $('#datatable').dataTable({
                    data: data,
                    'scrollY': 300,
                    columns: [
                        { 'data': 'ProdName' },
                        { 'data': 'CategoryName' },
                        { 'data': 'CompanyName' },
                        {
                            'data': 'ProdPrice',
                            'render' : $.fn.dataTable.render.number(',', '.', 0)
                        },
                        { 'data': 'QuantityInStock' },
                        { 'data': 'MinQuantity' },
                        {
                            'data': 'DateCreated',
                            'render': function (jsonDate) {
                                var date = new Date(parseInt(jsonDate.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        {
                            'data': 'ProductID',
                            'searchable' : false,
                            'sortable' : false,
                            'render': function (productID) {
                                return '<a href="ProductDetails.aspx?ID='+ productID +'">Full Details...</a>';
                            }

                        }
                    ]
                });
            }
        });
    </script>

注意： 您只需要 CSS 和数据 table 的 JS，可以在 jQuery Datable Tutorial Page 找到。

可以在 Kudvenkat's jQuery Tutorial series on YouTube 找到非常重要的视频教程。

jQuery DataTable JS 不工作（ASP .NET 3 层架构）

jQuery DataTable JS not working(ASP .NET 3-tier architecture)

javascript

asp.net

jquery

datatables