在 ASP 和 C# 中实现 JQuery DataTable 的最佳方法是什么答案

【问题标题】：What is the best way achieving JQuery DataTable in ASP and C#在 ASP 和 C# 中实现 JQuery DataTable 的最佳方法是什么
【发布时间】：2016-07-20 06:22:54
【问题描述】：

我有一个类似截图上传的设计，我需要从数据库中填充数据，并且不想丢失过滤分页和 JQuery 数据表提供的搜索选项。任何人都可以分享一些有用的代码或代码链接来实现这一点吗？我尝试使用 gridview 和 Listview，但没有成功。

【问题讨论】：

标签： c# jquery asp.net datatables

【解决方案1】：

使用 asp 网格视图....使用分页属性对于过滤，你必须找到一些方法如何进行分页：转到gridview属性

【讨论】：

【解决方案2】：

我尝试使用下面的代码并实现了类似于给出的屏幕截图，更多提示期待

            <script  type="text/javascript" language="javascript" src="Scripts/jquery-1.10.2.js"></script>
            <script type="text/javascript" language="javascript" src="Scripts/jquery.datatables.min.js"></script>
            <link type="text/css" href="Content/jquery.dataTables.min.css" rel="stylesheet" />
            ................
            <div class="row">
                 <div class="col-md-4">

                      <asp:GridView ID="GridView1" runat="server" CssClass="gvdatatable" AutoGenerateColumns="true" OnPreRender="GridView1_PreRender">
                      </asp:GridView>
                 </div>
            </div>

            <script type="text/javascript">
                 $(document).ready(function () {
                       $('.gvdatatable').dataTable({});
                 });
            </script>

C# 代码..

            protected void GridView1_PreRender(object sender, EventArgs e)
            {
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
            using (SqlCommand cmd = new SqlCommand())
            {
            cmd.CommandText = "SELECT [OrderNo],[Name],[Email],[Date],[Amount],[Status] FROM dbo.tbl_Orders";
            cmd.Connection = con;
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
            DataTable dt = new DataTable();
            sda.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();

            if (GridView1.Rows.Count > 0)
            {
            //Replace the <td> with <th> and adds the scope attribute
            GridView1.UseAccessibleHeader = true;

            //Adds the <thead> and <tbody> elements required for DataTables to work
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

            //Adds the <tfoot> element required for DataTables to work
            GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
            //GridView1.DataSource = GetData();  //GetData is your method that you will use to obtain the data you're populating the GridView with
            }
            }
            }
            }
            }

【讨论】：