从 Mysql 获取数据并创建 Html 表并使用 Datatable Jquery 插件答案

【问题标题】：Fetch Data from Mysql and Creating a Html table and use Datatable Jquery Plugin从 Mysql 获取数据并创建 Html 表并使用 Datatable Jquery 插件
【发布时间】：2016-02-20 13:09:51
【问题描述】：

大家好，我的问题是我想在 Datagrid 上实现多级下拉过滤器..到目前为止我无法这样做..

所以我在网上搜索并找到了这个datatable Jquery Plugin。所以我想实现这个插件。我知道它可以与 Html5 表一起使用（可能是错误的）。所以我删除了 datagrid.and 去 html5 表。但是现在当我在 asp:panel 上显示数据时：

<asp:pannel id="Pannel" runat="server"></asp:panel>

和后面的代码：

panel1.Controls.Add(new LiteralControls(html));

其中 html 是包含数据 "<tr><td>"+myDataFromDatabase+"</td>....</tr>" 的字符串此处表格显示正常，但 jQuery Datatable 插件无法正常工作..

这样的过程= 1）从mysql表中获取数据 2) 在 CodeBehind 中做一些工作（比如合并 fname 和 lname 列） 3) 显示表格（不涉及数据网格或 Html5 表格） 4) 应用 Jquery Datatable 插件

注意：我也在使用更新面板。

我从过去两天开始尝试，但没有成功

【问题讨论】：

标签： c# mysql asp.net html datatables

【解决方案1】：

好的，我已经完成了它的工作

首先我创建一个类 StudentLoginData.cs，其中包含根据表中的列的属性。

public class StudentLoginDetails
{
    public string student_id { get; set; }
    public string fname { get; set; }
    public string lname { get; set; }
    public string branch { get; set; }
    public string gender { get; set; }
    public string username { get; set; }
    public string verified { get; set; }
}

然后创建一个网络服务

public class StudentLoginDataService : System.Web.Services.WebService
{
    [WebMethod]
    public void getStudentLoginData()
    {
        string error;
        DataTable dt = DataAccessLayer.showAllStudent(out error);
        if (error == null)
        {
            List<StudentLoginDetails> sld_List = new List<StudentLoginDetails>();
            DataTableReader dtr = new DataTableReader(dt);
            while (dtr.Read())
            {
                StudentLoginDetails sld = new StudentLoginDetails();
                sld.student_id = dtr["student_id"].ToString();
                sld.fname = dtr["fname"].ToString();
                sld.lname = dtr["lname"].ToString();
                sld.branch = dtr["branch"].ToString();
                sld.gender = dtr["gender"].ToString();
                sld.username = dtr["username"].ToString();
                sld.verified = dtr["verified"].ToString();
                sld_List.Add(sld);
            }
            JavaScriptSerializer jss = new JavaScriptSerializer();
            Context.Response.Write(jss.Serialize(sld_List));
        }
    }
}

然后在我想显示数据的 aspx 页面中，添加了一个 ajax 脚本（在 head 部分的 scriptmanager 上方）

<script type="text/javascript">
    function getStudentData() {
        $.ajax({
            url: 'StudentLoginDataService.asmx/getStudentLoginData',
            method: 'post',
            dataType: 'json',
            success: function (data) {
                    var table = $("#studentDataTable").DataTable({
                    data: data,
                    columns: [
                        { 'data': 'student_id' },
                        { 'data': 'fname' },
                        { 'data': 'lname' },
                        { 'data': 'branch' },
                        { 'data': 'gender' },
                        { 'data': 'username' },
                        { 'data': 'verified' },
                    ]
                })
            }
        })
    }
</script>

【讨论】：

我想在表格的第一列添加序列号..有人可以告诉我该怎么做吗