JQUERY DataTable – TypeError：k未定义 – 使用MVC动态形成表

2023年5月2日 251次阅读

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

我试图动态获取列和Datavalues.我正在使用fnServerData和sAjaxSource.

我在我的控制器文件中有一个断点,看看它是否被调用以使sue我已经正确设置它然后继续.

当我运行此代码.我得到“TypeError：k未定义”因此控制器没有被调用

什么时候搜索到这个问题,我来的是jQuery datatables issue

为了使DataTable能够正常运行,目标表的HTML必须以良好的方式布局,并声明’thead’和’tbody’部分.

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

以正确的方式做任何建议都会有所帮助！

CSHMTL文件

<table id="TestDatatable">

</table>

DataTable脚本文件

$('#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之前先设置Columns.但在我的情况下我试图在ajax调用中击中控制器,但即使在此之前我得到上述错误.

更新

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

谢谢

最佳答案 编辑#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,数据表将为你生成tr td html

最后,你的datatables函数需要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>

从usage page开始引用typeerror的文档：

In order for DataTables to be able to function correctly, the HTML for
the target table must be laid out in a well formed manner with the
‘thead’ and ‘tbody’ sections declared.

在您的情况下,< thead>和< tbody>部分缺失…添加那些来修复你的typeerror k未定义

我们可以在类型错误解决后修复ajax,但最初看起来你的控制器设置为get,而你的datatables ajax设置为post,设置ajax得到并查看是否能解决问题

点赞