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

Posted 2023-04-12

【中文标题】响应式数据表 SQL C# ASP.net

【英文标题】：Responsive Datatable SQL C# ASP.net

【发布时间】：2021-01-31 01:05:06

【问题描述】：

我正在尝试制作一个响应式数据表，其中数据表使用 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)
    
    

【问题讨论】：

您的代码中有一个空的 catch 块。这是一个非常糟糕的主意。你想通过它来完成什么？

这是我编写代码时的临时性。你能解释一下为什么这是个坏主意吗？

一个空的 catch 块说“我不在乎这段代码是否有效。如果出现问题，请忽略该问题。甚至不要告诉我。”。相反，您应该捕获异常当您可以对其进行处理时，或者当您需要获取一些额外的上下文以进行日志记录时。你有几个不错的选择。您可以删除 try/catch。您可以在 catch 块中添加一些错误日志记录。或者，您可以在 catch 块中使用一些逻辑向用户显示错误标签（最好使用一些日志记录，以便获得完整的错误详细信息以进行调试）。

@mason，谢谢，我会研究如何有效地使用它。同时，你能帮我弄清楚这个数据表吗？我没有使用此代码获得搜索和排序功能。

【参考方案1】：

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

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

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

如果这不起作用，最简单的方法是将整个 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>

【讨论】：

谢谢，两种方法都试过了，还是不行。我有分页可用，但排序和搜索不可用。

@tolyP 什么不起作用？您没有获得响应式数据表还是没有获得排序和搜索功能？

对不起，我没说清楚，我没有排序和搜索功能。