响应式数据表 SQL C# ASP.net

Question

我正在尝试制作一个响应式数据表，其中数据表使用 C# 从 sql 收集信息。当表格没有找到结果时，搜索栏存在并且表格有响应，但是一旦有结果，结果就会显示但表格变得无响应。这是我的代码。

这是Javascript

<script type="text/javascript">
    $(document).ready(function () {
        $(".table").prepend($("<thead></thead").append($(this).find("tr:first"))).dataTable();
    });


</script>

这是 ASP

 <asp:GridView cssclass="table table-striped table-bordered dt-responsive"  runat="server" ID="GridView1" AutoGenerateColumns="false" AllowPaging="true"
    OnPageIndexChanging="OnPageIndexChanging">
                           <Columns>
                              <asp:BoundField DataField="childs_name" HeaderText="Childs Name" SortExpression="childs_name" >
                              </asp:BoundField>
                               <asp:BoundField DataField="EI_number" HeaderText="EI Number" SortExpression="EI_number" />
                               <asp:BoundField DataField="service_type" HeaderText="Service Type" SortExpression="service_type" />
                               <asp:BoundField DataField="session_section" HeaderText="Attendance Status" SortExpression="session_section" />
                               <asp:BoundField DataField="session_date" HeaderText="Session Date" SortExpression="session_date" />
                               <asp:BoundField DataField="time_from" HeaderText="Start Time" SortExpression="time_from" />
                               <asp:BoundField DataField="time_to" HeaderText="End Time" SortExpression="time_to" />
                               <asp:BoundField DataField="Draft_Final" HeaderText="Note Status" SortExpression="Draft_Final" />
                           </Columns>
                        </asp:GridView>

这是 C# 中的代码

string strcon = ConfigurationManager.ConnectionStrings["con"].ConnectionString;

protected void Page_Load(object sender, EventArgs e)
{
    //GridView1.DataBind();

    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}

protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex;
    this.BindGrid();
}

private void BindGrid()
{
    try
    {
        SqlConnection con = new SqlConnection(strcon);
        if (con.State == ConnectionState.Closed)
        {
            con.Open();
        }
            
        SqlCommand cmd = new SqlCommand("SELECT DISTINCT TOP 1000 childs_name, EI_number, service_type, session_section, session_date, time_from, time_to, Draft_Final FROM session_note_data_tbl where NPI = '" + Session["npi"].ToString() + "'; ", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();

        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();

        con.Close();
    }
    catch (Exception ex)
    {
    }
}

Answer 1

有两种解决方法可以满足您的要求：

1. 您可以将 table-responsive 引导类添加到您的 GridView 中，这样当您的 GridView 有一些数据并且屏幕宽度即将填满时，它将显示滚动而不是溢出和变得无响应。

<asp:GridView cssclass="table table-striped table-bordered table-responsive></GridView>

1. 如果这不起作用，最简单的方法是将整个 Gridview 包装在一个容器中

<div class="container">
   <asp:GridView cssclass="table table-striped table-bordered></GridView>
</div>

或者你也可以把它包在卡片里

<div class="container">
    <div class="card">
        <div class="card-header">
            <div class="card-title">Results</div>
         </div>
        <div class="card-body">
            <asp:GridView cssclass="table table-striped table-bordered table-responsive></GridView>
        </div>
    </div>
</div>