Javascript 在网格视图上搜索、排序

我尝试使用这个示例进行搜索和排序，但在这个示例中，他们使用table，而我使用的是

gridview

我试试这个

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();
    }
}

公共数据表信息（字符串id）
{
尝试
{
Entities2 wr=新的Entities2（）；
List sv=wr.spvechile（id.ToList（）；
DataTable dt=新的DataTable（）；
添加（“名称”，类型（int））；
foreach（sv中的var c）
{
dt.Rows.Add（c.Name）；
}
GridView1.DataSource=dt；
GridView1.DataBind（）；
返回dt；
}
捕获（例外情况除外）
{
抛出新异常（）；
}
}

那么，如何在gridview中使用这个示例呢

最新更新

我修改了这个文件

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

然后取下右边的填充物：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>

在最后一列中有很长的文本，由于格式不正确，网格视图高度变得很长，如何管理

<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
HTML
中只添加了这一行
CssClass=“table table striped table bordered”Width=“100%”CellPadding=“0”
，这是用于table还是gridview@Krunal Mevadai也这样添加，但始终显示格式错误的gridview放入最新的gridview html您需要包装最后一列的文本。为什么在这个问题上写下2：输入最新的grid view html内容
<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>