jQuery Datatable：分页和过滤器无法正确显示

Posted 2023-05-07

【中文标题】jQuery Datatable：分页和过滤器无法正确显示

【英文标题】：jQuery Datatable: pagination and filter not display correctly

【发布时间】：2017-03-25 11:51:49

【问题描述】：

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

作为测试，只调用 10 行数据到表中。然后在传递到表之前，我使用 solution 重组了 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 页分页。

【问题讨论】：

请查看此页面***.com/questions/1744802/…

@Haksu 这与他的问题无关。

因为您的回复中的 recordsFiltered = 0 - 尝试更改 recordsFiltered = totalRecords 看看会发生什么

之前已经尝试过了，即使您在图片中看到我的 recordsTotal = 10，至少会显示总行而不是 NaN。插件好像有问题。

@saf21 我在您的代码中观察到两件事 1. 您发送的 DataSet 名称为 (searchData) 作为 Response 但您没有在响应中访问确切的 DataTable .

【参考方案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;
     

希望它适用于您的情况。

【讨论】：

@saf21 很高兴听到这个消息。 :)

【参考方案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 应该是 total 的数量 records 现在您正在返回 10 并且显示的记录也是 10。

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

【讨论】：

嗨，谢谢你，但我已经按照你的建议做了。您可以检查上面的代码。我发现dataSrc中的返回数据只是为了绘制表格，而不是绘制过滤器和分页。

你能做个js小提琴吗？