Question

当我在普通的ASP.Net页面中使用jQuery DataTable时，它工作正常。但是，当我在母版页中使用相同的代码时，它会给我一个错误：

未捕获TypeError：$（...）。prepend（...）。dataTableExt不是函数

我正在用作品写两个代码：

工作代码：

.aspx页码

 RequestQueue queue = Volley.newRequestQueue(LoginActivity.this);
    final ProgressDialog pDialog = new ProgressDialog(LoginActivity.this);
pDialog.setMessage("Logging In...");
    pDialog.show();

    JsonObjectRequest jsonObjReq = new JsonObjectRequest(Request.Method.POST, Constants.URL_Login, Jsonobj,
            new Response.Listener<JSONObject>() {
                @Override
                public void onResponse(JSONObject response) {
                    // mPostCommentResponse.requestCompleted();
                    Log.e(TAG, "Service--o/p-" + response);
                    pDialog.dismiss();
                }
            }, new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError error) {
            // mPostCommentResponse.requestEndedWithError(error);
            Log.e("TAG", "Service--i/p-" + error);
            pDialog.dismiss();

        }
    });
    jsonObjReq.setRetryPolicy(new DefaultRetryPolicy(
            60000,
            DefaultRetryPolicy.DEFAULT_MAX_RETRIES,
            DefaultRetryPolicy.DEFAULT_BACKOFF_MULT));


    queue.add(jsonObjReq);

.cs页码

<%@ 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>

不工作代码：

.aspx页码

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

    }
}

.cs页码

<%@ 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>

Answer 1

调用类似的东西

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

还要确保所有引用的js文件都存在。这意味着您在控制台中没有收到404错误。

其次，我建议将列呈现信息保存在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>

不要使用prerender事件，所有这些都可以通过标记来完成。所以尽可能多地使用它。在代码中，只需将数据集绑定到网格视图并调用databind事件。

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

jQuery无法在ASP.Net母版页中工作

1 个答案: