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

在ASP和C＃中实现JQuery DataTable的最佳方法是什么？

2 个答案: