4

我正在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 调用中点击控制器，但在此之前我得到了上述错误。

更新

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

谢谢

4

3 回答 3

1

尝试在 @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" },
], ...

sNameJSON参数必须与您从服务器发送的对象属性名称匹配。在你的例子中，我想那会是nameand value。此外，如果您指定sAjaxSource并且响应是JSON您需要的对象（即page.phpechoes json_encode(something)），则无需调用fnServerData.

于 2013-06-10T05:02:22.457 回答
1

编辑#1

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

sTitle 将缺席提供表头（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 的文档来自使用页面：

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

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

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

于 2013-06-04T01:07:38.123 回答
0

请确保您已将 dataTable 类添加到 table 标记：

<table class="dataTable">

享受！

于 2014-01-28T15:53:28.390 回答