在网格视图上搜索、排序

Question

我尝试使用此示例进行搜索和排序，但在此示例中他们使用表格，而我使用的是gridview

datatable example

我试试这个

public DataTable info(string id)
{
    try
    {
        Entities2 wr = new Entities2();
        List<spvechile_Result> sv = wr.spvechile(id).ToList();
        DataTable dt = new DataTable();
        dt.Columns.Add("Name", typeof(int)); 
        foreach (var c in sv)
        {
        dt.Rows.Add(c.Name);
        }
        GridView1.DataSource = dt;
        GridView1.DataBind();
        return dt;
    }
    catch (Exception ex)
    {
        throw new Exception();
    }
}

那么如何将这个示例与 gridview 一起使用

最新更新

我修改了这个文件。

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />

并移除 padding-right:30px 所以在我之后，这就是结果 这是更新的html

    <div class="panel" id="paneldiv">           
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="firstgrid">
                  <asp:GridView ID="GridView1" runat="server"
        CssClass="table table-striped table-bordered" Width="100%" CellPadding="0"
        Font-Names="Verdana" BackColor ="White" BorderColor="#CCCCCC" BorderStyle="None" 
        BorderWidth="1px" Font-Size="9pt">
    <FooterStyle BackColor="White" ForeColor="#000066" />
    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
    <RowStyle ForeColor="#000066" />
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#007DBB" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>          
        </div>

在最后一列有很长的文字，因为这种格式不正确，网格视图的高度变长了如何管理这个

Answer 1

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

<script>
    $(document).ready(function () {
        $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
            "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }]
        });
    });
</script>

在gridview中添加css类CssClass="table table-striped table-bordered"并设置Width="100%" CellPadding="0"

供参考：jquery bootstrap datatable

更新：

<asp:GridView ID="GridView1" runat="server"
        CssClass="table table-striped table-bordered" Width="100%" CellPadding="0"
        Font-Names="Verdana" BackColor ="White" BorderColor="#CCCCCC" BorderStyle="None" 
        BorderWidth="1px" Font-Size="9pt">
    <FooterStyle BackColor="White" ForeColor="#000066" />
    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
    <RowStyle ForeColor="#000066" />
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#007DBB" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>

我在您当前的gridview HTML 中只添加了这一行CssClass="table table-striped table-bordered" Width="100%" CellPadding="0"