Блог

Я пытаюсь создать отзывчивую таблицу данных, в которой datatable собирает информацию из sql с использованием C #. Когда таблица не находит результатов, панель поиска присутствует, и таблица реагирует, но как только появляются результаты, результаты отображаются, но таблица перестает отвечать. Вот мой код.

Это 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)
    {
    }
}
  

Для вашего требования есть два обходных пути:

1. Вы можете добавить table-responsive класс bootstrap в свой GridView, чтобы всякий раз, когда в вашем GridView есть какие-то данные и ширина экрана вот-вот заполнится, он будет отображать прокрутку, а не переполняться и перестать отвечать на запросы.

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

2. Если это не работает, самый простой способ — обернуть весь 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>