的更新

Question

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

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

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

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

当我越来越接近搜索这个问题时，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之前先设置列。但在我的场景中我试图在ajax调用中击中控制器，但即使在此之前我也遇到了上述错误。

的更新

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

由于

Answer 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
，数据表会为你生成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>

要引用typeerror的文档来自usage page：

为了使DataTable能够正常运行，HTML for 目标表必须以良好的方式布置 'thead'和'tbody'部分宣布。

在您的情况下，<thead>和<tbody>部分缺失...添加那些以修复未定义的类型错误

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

Answer 2

在@JayRizzi初始化示例之后，尝试将sName参数添加到aoColumnDefs：

<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的情况下做得很好

Answer 3

请确保已将dataTable类添加到表标记中：

<table class="dataTable">

享受！

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

的更新

的更新

3 个答案: