jQuery Datatable：分页和筛选未正确显示。

Question

我不知道如何解决这个问题，尝试了一整天但没有成功修复分页。我正在使用jQuery datatable，并且为了显示我的大量数据，我正在使用服务器端。

作为测试，只调用10行数据到表中。然后在传递到表格之前，我重组了 dataSrc 中的数据，使用了这个解决方案。表格成功显示，但分页和筛选器没有正确显示。

有人能帮忙吗？

以下是我的代码。

AJAX

$('#example').DataTable({
  "processing": true,
  "serverSide": true,
  "ajax": {
     type: "POST",
     contentType: "application/json; charset=utf-8",
     url: "datatables.aspx/GetData",
     'data': function (data) {
        return JSON.stringify(data);
     },
     "dataSrc": function (data) {
        var json = $.parseJSON(data.d);

        var myData = {};
        myData.draw = parseInt(json.otherData[0].draw);
        myData.recordsTotal = parseInt(json.otherData[0].recordsTotal);
        myData.recordsFiltered = parseInt(json.otherData[0].recordsFiltered);
        myData.data = json.searchData;

        return myData.data;
     }
   },
   "columns": [
      { "data": "Username" }
   ]
  }
});

C#

[WebMethod]
[ScriptMethod(UseHttpGet = false)]
public static string GetData(int draw, object columns, object order, int start, int length, object search)
{
    string constr = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        string mySql = "SELECT TOP 10 username AS Username FROM user_lookup";
        using (SqlCommand cmd = new SqlCommand(mySql, con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                con.Open();
                DataSet ds = new DataSet();
                sda.Fill(ds, "searchData");

                DataTable newDT = new DataTable("otherData");

                //Add columns to DataTable.
                newDT.Columns.AddRange(new DataColumn[4] {
                    new DataColumn("draw"),
                    new DataColumn("recordsTotal"),
                    new DataColumn("recordsFiltered"),
                    new DataColumn("userRole")
                });

                //Add rows to DataTable.
                newDT.Rows.Add(draw, length, start, "myrole");
                ds.Tables.Add(newDT);

                string JSONString = string.Empty;
                JSONString = JsonConvert.SerializeObject(ds);
                return JSONString;
            }
        }
    }
}

这是我返回给datatable以构建表格的数据。 数据筛选和分页不正确，应该只有1页的分页。

- saf21

---

请查看此页面https://dev59.com/DnI-5IYBdhLWcg3wpqMK - Miguel

@Haksu 这与他的问题无关。 - Shiffty

由于您的响应中 recordsFiltered = 0 - 尝试更改 recordsFiltered = totalRecords 看看会发生什么。 - Dawood Awan

之前已经尝试过了，即使你在图片中看到我得到了recordsTotal = 10，至少行的总数也应该显示出来，而不是NaN。看起来插件存在问题。 - saf21

@saf21，我在你的代码中观察到两件事情：1. 你发送了一个名为“（searchData）”的DataSet作为响应，但你没有访问响应中确切的DataTable。 - Krsna Kishore

Answer 1

我有一个解决方案适用于我们的情况。你应该直接修改响应对象。

"dataSrc": function (data) {
        var json = $.parseJSON(data.d);

        data.draw = parseInt(json.otherData[0].draw);
        data.recordsTotal = parseInt(json.otherData[0].recordsTotal);
        data.recordsFiltered = parseInt(json.otherData[0].recordsFiltered);
        data.data = json.searchData;

        return data.data;
     }

希望这对你有用。

- Yusril Maulidan Raji

---

@saf21 很高兴听到那个。 :) - Yusril Maulidan Raji

Answer 2

您的响应中不包含属性otherData和searchData，但您正在使用这些名称访问数据。

您的响应是一个简单对象，具有以下属性。

• data
• recordsTotal
• recordsFiltered
• draw

因此，您需要直接从响应中访问它们，如下所示：

var myData = {};
myData.draw = parseInt(json.draw);
myData.recordsTotal = parseInt(json.recordsTotal);
myData.recordsFiltered = parseInt(json.recordsFiltered);
myData.data = json.data;

同时，recordsTotal 应该是 records 的总数，而你现在返回的是 10，显示的记录也是 10。

你得到了 NaN 是因为没有 json.otherData[0].recordsFiltered 属性，所以当你将其更改为 json.recordsFiltered 时，它将显示数字。

- Mairaj Ahmad

---

谢谢你，但我已经按照你的建议去做了。你可以在上面的代码中进行检查。我发现返回数据仅用于绘制表格，而不是绘制筛选和分页。 - saf21

你能创建一个 JS Fiddle 吗？ - Mairaj Ahmad