我想在ASP.NET GridView中使用“ JQuery Datatable”。 这样。

我尝试了发现的东西，但是没有用。

“内容”页面上的GridView

<div class="card-body">
    <div class="table-responsive" style="height:auto; width:100%; overflow:auto">
        <asp:GridView ID="customergridview" runat="server" CssClass="table table-bordered" AutoGenerateColumns="false" DataKeyNames="Customer ID" Width="100%" CellPadding="0" OnRowdatabound="customergridview_Rowdatabound">
                      <Columns>
                        <asp:BoundField DataField="Customer ID" HeaderText="Customer ID" ReadOnly="True" SortExpression="Customer ID"></asp:BoundField>
                        <asp:BoundField DataField="Customer Name" HeaderText="Nama Customer" SortExpression="Nama Customer"></asp:BoundField>
                        <asp:BoundField DataField="Adrress" HeaderText="Alamat" SortExpression="Alamat"></asp:BoundField>
                        <asp:BoundField DataField="Contact Number" HeaderText="Nomor Kontak" SortExpression="Nomor Kontak"></asp:BoundField>
                        <asp:BoundField DataField="Type Outlet" HeaderText="Tipe Outlet" SortExpression="Tipe Outlet"></asp:BoundField>
                      </Columns>
        </asp:GridView>
    </div>
</div>

我使用的脚本和CSS位于“母版”页面上-

  <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
  <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet" type="text/css" />
  <script src="vendor/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
  <script src="vendor/datatables/dataTables.bootstrap4.min.js" type="text/javascript"></script>
  <script src="js/demo/datatables-demo.js"></script>

在服务器端

string connection = "Data Source=DESKTOP-KN2OIQ6;Initial Catalog=WEBDB;User ID=sa;Password=sa";
        protected void Page_Load(object sender,EventArgs e)
        {
            //check for a postback
            if (!Page.IsPostBack)
            {
                try
                {
                    DataTable dt = new DataTable();
                    SqlConnection conn = new SqlConnection(connection);
                    conn.Open();
                    string ngisi = "SELECT [CustumerID] as 'Customer ID',[CustumerName] as 'Customer Name',[Address],[ContactNo] as 'Contact Number',[TipeOutlet] as 'Type Outlet' FROM [WEBDB].[dbo].[Customer]";
                    SqlCommand comm = new SqlCommand(ngisi,conn);
                    dt.Load(comm.ExecuteReader());
                    conn.Close();

                    customergridview.DataSource = dt;
                    customergridview.DataBind();
                }
                catch (Exception ex)
                {
                    Response.Write(ex.ToString());
                }
            }

        }

表的设计完全没有改变。如何解决这个问题呢？