在ASP和C＃中實現JQuery DataTable的最佳方法是什么

Question

我有一個設計，如上傳的屏幕截圖，我需要填充數據庫中的數據，並且不想丟失JQuery數據表提供的過濾分頁和搜索選項。 任何人都可以共享一些有用的代碼或代碼鏈接來實現這一目標嗎？ 我嘗試使用gridview和Listview並沒有成功。

Answer 1

使用asp網格視圖....使用分頁屬性進行過濾，您必須找到某種方法進行分頁：轉到gridview屬性

Answer 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
            }
            }
            }
            }
            }