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

本文关键字：Html 一个 Jquery Datatable 插件 数据 获取 Mysql 创建 | 更新日期: 2023-09-27 18:35:32

嗨，伙计们，我的问题是我想在数据网格上实现多级下拉过滤器。到目前为止我无法这样做..

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

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

和代码隐藏：

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

其中 html 是包含数据"<tr><td>"+myDataFromDatabase+"</td>....</tr>"的字符串这里的表格显示正常，但随后jQuery数据表插件不起作用。

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

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

我正在尝试过去两天，但没有成功

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

好的，

所以我完成了它的工作

首先，我创建一个类 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 部分的脚本管理器上方）

<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>
相关文章：