JQUERY DataTable -- TypeError: k is undefined - 使用 MVC 动态形成表

Posted 2023-05-07

【中文标题】JQUERY DataTable -- TypeError: k is undefined - 使用 MVC 动态形成表

【英文标题】：JQUERY DataTable -- TypeError: k is undefined - Dynamically forming Table with MVC

【发布时间】：2013-05-26 23:24:03

【问题描述】：

我正在尝试 JQUERY DataTable 和 MVC。我要做的第一件事是尝试建立基地。

我正在尝试动态获取列和数据值。我正在使用 fnServerData 和 sAjaxSource。

我的控制器文件中有一个断点，以查看它是否被调用以确认我在继续之前已正确设置它。

当我运行这段代码时。我得到 "TypeError: k is undefined" 所以控制器没有被调用

当搜索到这个问题时，我来了jQuery datatables issue，其中指出

为了使 DataTables 能够正常工作，目标表的 html 必须以格式良好的方式布局，并声明 'thead' 和 'tbody' 部分。

但是我正在动态地形成每一个东西，所以我不确定做错了什么。我的示例代码如下。

任何关于正确做法的建议都会有所帮助！

CSHMTL 文件

<table id="TestDatatable">

</table>

数据表脚本文件

$('#TestDatatable').dataTable(
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "Search/Testcall",
        "fnServerData": function (sSource, aoData, fnCallback, oSettings) 
            aoData.push( "name": "more_data", "value": "my_value" );
            oSettings.jqXHR = $.ajax(
                "dataType": 'json',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            );
        
    );

样本模型

public class DataTableParam
    
        /// <summary>
        /// Request sequence number sent by DataTable, same value must be returned in response
        /// </summary>       
        public string sEcho  get; set; 

        /// <summary>
        /// Text used for filtering
        /// </summary>
        public string sSearch  get; set; 

        /// <summary>
        /// Number of records that should be shown in table
        /// </summary>
        public int iDisplayLength  get; set; 

        /// <summary>
        /// First record that should be shown(used for paging)
        /// </summary>
        public int iDisplayStart  get; set; 

控制器

public JsonResult Testcall(DataTableParam searchData)
        
         return Json("", JsonRequestBehavior.AllowGet); 
        

更新

我在解决这个问题时得到的另一个更新是我们需要先设置列，然后再将数据分配给 DataTable。但在我的场景中，我试图在 ajax 调用中点击控制器，但在此之前我得到了上述错误。

更新

动态数据表根本不可能吗？我只会在运行时知道列和数据？

谢谢

【问题讨论】：

我看到的第一个问题是你的表格 html 没有完全形成，数据表需要完整的表格 thead tbody 声明，所有这些都具有正确的 tr 和语法

同意。当我动态形成它时怎么样？第二点是收到 ajax 调用时我的控制器参数为空！

我将与您一起偶然发现这一点，因为 asp.net mvc 不是我的强项...我注意到您的控制器设置为允许获取，但您的 fnServerData ajax 是通过邮寄提交的，请设置获取，至于动态生成的表结构，只要它是在加载 DOM 之前，应该没问题，但通常我总是为表做 statc html（从长远来看让事情变得更容易）

Allowget 用于允许 JQOERY 访问 JSON 数据。实时静态表的目的是什么？如果您必须显示 Table 中的 10 万条记录怎么办？我们需要服务器端分页和排序，否则事情会一团糟！

【参考方案1】：

编辑#1

您收到类型错误的原因是您似乎已经知道的格式错误的表格。您还提到表是动态创建的，因此我们将尝试使用服务器代码动态添加表头以动态写入列

sTitle will provide table headers in absentia（sClass 只提供一个行类）

<script type="text/javascript>
    $('#TestDatatable').dataTable(
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "Search/Testcall",
            "aoColumns": [
             "sTitle": "Engine" ,
             "sTitle": "Browser" ,
             "sTitle": "Platform" ,
             "sTitle": "Version", "sClass": "center" ,
             "sTitle": "Grade", "sClass": "center" 
        ], ...

必须发生的是创建一个初始查询以在 ajax 查询之前运行（因为它们不相关）。

这个查询的目的是收集表的列名，可以和原来的查询一样，我们只需要列名 （请原谅我的 asp.net 语法，不确定是否正确，但你会明白的）

数据表函数

<script type="text/javascript>
        $('#TestDatatable').dataTable(
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "Search/Testcall",
                "aoColumns": [
    <% for each ColumnList as Column
         ' "sTitle": "'& Column &'" ,'  
    %>
                ], //aoColumns end
                "fnServerData": function (sSource, aoData, fnCallback, oSettings) 
                    aoData.push( "name": "more_data", "value": "my_value" );
                    oSettings.jqXHR = $.ajax(
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    );
                
            );
</script>

以上是理论上的，但应该可行

原答案 您收到类型错误的原因是您似乎已经知道的格式错误的表格。您还提到该表是动态创建的

最佳方式：让数据表为您完成工作

<table>
    <thead><tr><th>Group</th><th>Code</th><th>Account</th><th>Type</th></tr></thead>
<tbody></tbody>
</table>

以上是您在 cshtml 文件中所需要的所有 html

现在你的 json 调用需要实际返回数据（小步骤）

我对 asp.net 中的 json 编码不太熟悉，在处理 .net 时，我通常在 c# 中使用 ashx 处理程序，但是底线是您使用的 ajax url 需要返回以下 json 用于服务器端实现，异常对于 dt_rowid 和 dtrowclass，它们只是用于分配 tr 行 id 或类的可选字段）

    "sEcho": 3,
    "iTotalRecords": 57,
    "iTotalDisplayRecords": 57,
    "aaData": [
        
            "DT_RowId": "row_7",
            "DT_RowClass": "gradeA",
            "0": "Gecko",
            "1": "Firefox 1.0",
            "2": "Win 98+ / OSX.2+",
            "3": "1.7",
            "4": "A"
        ,
...

如果您提供格式正确的 json，Datatables 将为您生成 tr td html

最后，您的数据表函数需要将 bServerSide 设置为 true，并且您的 fnRowCallback 似乎正常

以前我做的事情没有利用数据表的力量：

<table>
    <thead><tr><th>Group</th><th>Code</th><th>Account</th><th>Type</th></tr></thead>
<tbody>
 @foreach ( var i in dataset)
 '<tr><td>...</td></tr>' 

</tbody>
</table>

参考 typeerror 的文档来自usage page：

为了使 DataTables 能够正常工作，HTML 目标表必须以格式良好的方式布置 'thead' 和 'tbody' 部分声明。

在您的情况下，缺少 <thead> 和 <tbody> 部分...添加这些以修复您的 typeerror k 未定义

我们可以在类型错误解决后修复 ajax，但最初，您的控制器似乎设置为获取，而您的数据表 ajax 设置为发布，将 ajax 设置为获取并查看是否可以解决问题

【讨论】：

我的问题与动态形成数据表有关。我只在运行时知道列和数据？这在 DataTable 中可行吗？

@JayRizzi：我需要一些帮助，请看看我的问题***.com/questions/16982166/…

【参考方案2】：

尝试将sName 参数添加到aoColumnDefs，遵循@JayRizzi 初始化示例：

<script type="text/javascript>
$('#TestDatatable').dataTable(
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "Search/Testcall",
    "aoColumns": [
     "sTitle": "Engine", "sName": "engine" ,
     "sTitle": "Browser", "sName": "browser" ,
     "sTitle": "Platform", "sName": "platform" ,
], ...

sName 参数必须与您从服务器发送的JSON 中的对象属性名称匹配。在你的例子中，我想name 和value 会这样。此外，如果您指定sAjaxSource 并且响应是您需要的JSON 对象（即page.php 回显json_encode(something)），则无需调用fnServerData 就可以了。

【参考方案3】：

请确保您已将 dataTable 类添加到表格标签中：

<table class="dataTable">

享受吧！