2016-12-08 24 views
1

通常のASP.NetページでjQuery DataTableを使用すると問題なく動作します。jQueryがASP.Netマスターページで動作しない

Uncaught TypeError: $(...).prepend(...).dataTableExt is not a function

私は作品かとの両方のコード書いています:

ワーキングコード:

.aspxページのコードを、私はマスターページに同じ同じコードを使用している場合しかし、それは私にエラーを与えます

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryDataTables.aspx.cs" Inherits="Portal.WebApp.Login.JqueryDataTables" %> 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link href="css/bootstrap.min.css" rel="stylesheet" /> 
    <script src="js/jquery-1.12.3.js"></script> 
    <script src="js/jquery.dataTables.min.js"></script> 
    <link href="css/dataTables.jqueryui.min.css" rel="stylesheet" /> 
    <link href="css/jquery-ui.css" rel="stylesheet" /> 

    <script type="text/javascript"> 
     $(function() { 
      debugger; 
      $("#DataGridView").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable(); 
      $('#DataGridView').dataTable(); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <asp:GridView ID="DataGridView" Font-Names="Calibri" Font-Size="11pt" AutoGenerateColumns="false" OnPreRender="DataGridView_PreRender" runat="server"></asp:GridView> 
     </div> 
    </form> 
</body> 
</html> 

は.csページコード

using System; 
using System.Data; 
using System.Web.UI.WebControls; 
namespace Citizen.WebApp.Login 
{ 
    public partial class JqueryDataTables : System.Web.UI.Page 
    { 
     RegistrationBLL m_RegistrationBLL = new RegistrationBLL(); 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      DataTable dt = null; 
      dt = m_RegistrationBLL.GetList(); 
      DataGridView.DataSource = dt; 
      int i; 

      for (i = 0; i < dt.Columns.Count; i++) 
      { 
       BoundField test = new BoundField(); 
       test.DataField = dt.Columns[i].ToString(); 
       test.HeaderText = dt.Columns[i].ToString(); 
       DataGridView.Columns.Add(test); 
       test = null; 
      } 
      DataGridView.DataBind(); 
     } 

     protected void DataGridView_PreRender(object sender, EventArgs e) 
     { 
      if (DataGridView.Rows.Count > 0) 
      { 

       DataGridView.UseAccessibleHeader = true; 


       DataGridView.HeaderRow.TableSection = TableRowSection.TableHeader; 


       DataGridView.FooterRow.TableSection = TableRowSection.TableFooter; 
      } 
     } 

    } 
} 

動作しないコード:

.aspxページのコード

<%@ Page Title="" Language="C#" MasterPageFile="~/portal/master/Home.Master" AutoEventWireup="true" CodeBehind="MasterDataTable.aspx.cs" Inherits="Portal.WebApp.Login.MasterDataTable" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
    <script src="js/jquery-1.12.3.js"></script> 
    <script src="js/jquery.dataTables.min.js"></script> 
    <link href="css/bootstrap.min.css" rel="stylesheet" /> 
    <link href="css/dataTables.jqueryui.min.css" rel="stylesheet" /> 
    <link href="css/jquery-ui.css" rel="stylesheet" /> 

    <script type="text/javascript" lang="javascript"> 
     $(function() { 
      debugger; 
      $("#DataGridView").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTableExt(); 
      $('#DataGridView').dataTableExt(); 
     }); 
    </script> 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="cphbody" runat="Server"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head id="Head1"> 
     <title></title> 
    </head> 
    <body> 
     <div> 
      <asp:GridView ID="DataGridView" Font-Names="Calibri" Font-Size="11pt" AutoGenerateColumns="false" OnPreRender="DataGridView_PreRender" runat="server"></asp:GridView> 
     </div> 
    </body> 
    </html> 
</asp:Content> 

は.csページコード

using System; 
using System.Data; 
using System.Web.UI.WebControls; 
namespace Citizen.WebApp.Login 
{ 
    public partial class MasterDataTable : System.Web.UI.Page 
    { 
     RegistrationBLL m_RegistrationBLL = new RegistrationBLL(); 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      DataTable dt = null; 
      dt = m_RegistrationBLL.GetList(); 
      DataGridView.DataSource = dt; 
      int i; 

      for (i = 0; i < dt.Columns.Count; i++) 
      { 
       BoundField test = new BoundField(); 
       test.DataField = dt.Columns[i].ToString(); 
       test.HeaderText = dt.Columns[i].ToString(); 
       DataGridView.Columns.Add(test); 
       test = null; 
      } 
      DataGridView.DataBind(); 
     } 

     protected void DataGridView_PreRender(object sender, EventArgs e) 
     { 
      if (DataGridView.Rows.Count > 0) 
      { 

       DataGridView.UseAccessibleHeader = true; 


       DataGridView.HeaderRow.TableSection = TableRowSection.TableHeader; 


       DataGridView.FooterRow.TableSection = TableRowSection.TableFooter; 
      } 
     } 
    } 
} 
+2

MasterPagesでライブラリファイルを読み込むほうがよい。なぜ、子ページに 'html'と' body'タグを使用していますか? – Satpal

+0

パスが新しいプロジェクトに関連していることを確認してください。 – ScanQR

+0

私は運がないすべての可能な解決策を実行しました。私は空のマスターページと同じことを確認し、運がないと同じ応答を得る...私はそれらがasp.netマスターページでjqueryのデータテーブルをロードして初期化するためにマスターページを制限するいくつかの制限と制限であると信じています。 –

答えて

1

コール何かこの

$(function() { 
    $("table[id$='DataGridView']").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable(); 
}); 

はまた確認してくださいのようなそのすべての参照JSファイルが存在します。コンソールで404エラーが表示されないことを意味します。

第2に、列のレンダリング情報をコードに保管するのではなく、aspxマークアップに保存することをお勧めします。以下のように:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound"> 
    <Columns> 
     <asp:BoundField DataField="Id" HeaderText="Customer Id" ItemStyle-Width="90" /> 
     <asp:BoundField DataField="" HeaderText="Name" ItemStyle-Width="120" /> 
     <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" /> 
    </Columns> 
</asp:GridView> 

プレレンダーイベントは使用しないでください。これらの作業はすべてマークアップで行うことができます。だから可能な限り使用してください。コードでは、データセットをグリッドビューにバインドし、databindイベントを呼び出します。

GridView1.DataSource = ds; // here assume ds is a dataset 
GridView1.DataBind(); 
+0

ありがとうございました....その作業の罰金は: - $( "table [id $ = 'DataGridView']")。prepend($( "").append($(this)).find( " tr:first "))).dataTable(); 私はこの3日間最後に立ち往生しました。 助けをありがとう。☺ –

+0

あなたは大歓迎です:) –

関連する問題