JQuery DataTable无法加载后端返回数据问题求助

Let's break down why your DataTable isn't displaying data and fix it step by step:

Key Issues Identified #

1. DataTable expects an array, not a single object: Your backend returns a single PersonModel object, but DataTable requires an array of objects to render rows correctly.
2. Session key casing mismatch: C# Session keys are case-sensitive—you're storing values with uppercase keys (e.g., Session["Surname"]) but retrieving them with lowercase (e.g., Session["surname"]), which will throw a NullReferenceException in production.
3. Reinitializing DataTable on every click: This can cause DOM conflicts and unexpected behavior instead of updating existing table data.

Fixes to Apply #

1. Fix Backend Session Handling & Return Format #

First, correct the Session key casing and wrap your single PersonModel in a list (array) to match DataTable's data requirements:

public class PersonModel {
    public string Name { get; set; }
    public string Surname { get; set; }
    public string Adres { get; set; }
    public string Email { get; set; }
    public string DateTime { get; set; }
}

public ActionResult Index() {
    return View();
}

[HttpPost]
public JsonResult AjaxMethod(string name,string surname,string adres,string email) {
    // Store values with consistent casing
    Session["Name"] = name;
    Session["Surname"] = surname;
    Session["Adres"] = adres;
    Session["Email"] = email;

    PersonModel person = new PersonModel {
        Name = Session["Name"].ToString(),
        Surname = Session["Surname"].ToString(), // Match stored key casing
        Adres = Session["Adres"].ToString(),
        Email = Session["Email"].ToString(),
        DateTime = DateTime.Now.ToString()
    };

    // Return as an array/list instead of single object
    return Json(new List<PersonModel> { person });
}

2. Update Frontend DataTable Logic #

Initialize the DataTable once on page load, then update its data after Ajax success instead of reinitializing it:

For DataTable 1.10+ (Recommended)

$(function () {
    // Initialize empty DataTable on page load
    var table = $('#myTable').DataTable({
        data: [],
        columns: [
            { "data": "Name" },
            { "data": "Surname" },
            { "data": "Adres" },
            { "data": "Email" }
        ],
        searching: false
    });

    $("#btnSet").click(function () {
        var obj = {
            name: $("#txtName").val(),
            surname: $("#txtSurname").val(),
            adres: $("#txtAdres").val(),
            email: $("#txtEmail").val()
        };
        $.ajax({
            type: "POST",
            url: "/Home/AjaxMethod",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                // Clear existing data, add new data, and redraw the table
                table.clear().rows.add(data).draw();
            },
            error: function(xhr, status, error) {
                // Add error logging for debugging
                console.error("Ajax request failed:", error);
            }
        });
    });
});

For Older DataTable Versions

$(function () {
    var table = $('#myTable').dataTable({
        data: [],
        columns: [
            { "data": "Name" },
            { "data": "Surname" },
            { "data": "Adres" },
            { "data": "Email" }
        ],
        searching: false
    });

    $("#btnSet").click(function () {
        var obj = {
            name: $("#txtName").val(),
            surname: $("#txtSurname").val(),
            adres: $("#txtAdres").val(),
            email: $("#txtEmail").val()
        };
        $.ajax({
            type: "POST",
            url: "/Home/AjaxMethod",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                table.fnClearTable();
                table.fnAddData(data);
            },
            error: function(xhr, status, error) {
                console.error("Ajax error:", error);
            }
        });
    });
});

3. Verify Returned JSON Format #

After the fixes, your backend should return JSON in this array format:

[{"Name":"YourName","Surname":"YourSurname","Adres":"YourAddress","Email":"your@email.com","DateTime":"2024-05-20 12:34:56"}]

内容的提问来源于stack exchange，提问作者Uğur Tuncer