web-dev-qa-db-ja.com

ASP.Net MVC JSONResult jQueryDataTablesをロードします

DataTables（http://datatables.net）をASP.NetMVCコントローラーから返されたJsonResultで動作させようとしています。 「DataTables警告（テーブルID = '例'）：行0のデータソースから不明なパラメーター '0'を要求しました」というエラーが表示され続けます。これは、ドキュメントによると、列が見つからないことを意味します。

JsonResultを返すコントローラーのコードは次のようになります。

    public JsonResult LoadPhoneNumbers()
    {
        List<PhoneNumber> phoneNumbers = new List<PhoneNumber>();
        PhoneNumber num1 = new PhoneNumber { Number = "555 123 4567", Description = "George" };
        PhoneNumber num2 = new PhoneNumber { Number = "555 765 4321", Description = "Kevin" };
        PhoneNumber num3 = new PhoneNumber { Number = "555 555 4781", Description = "Sam" };

        phoneNumbers.Add(num1);
        phoneNumbers.Add(num2);
        phoneNumbers.Add(num3);

        return Json(phoneNumbers, JsonRequestBehavior.AllowGet);
    }

PhoneNumberは、NumberとDescriptionの2つのプロパティを持つ単なるC＃クラスです。

データを取得してロードするJavaScriptは次のようになります。

<script>
$(document).ready(function () {
    $('#example').dataTable({
        "bProcessing": true,
        "sAjaxSource": '/Account/LoadPhoneNumbers/',
        "sAjaxDataProp": ""
    });
});
</script>

そして、htmlは次のようになります。

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
    <tr>
        <th>
            Number
        </th>
        <th>
            Description
        </th>
    </tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>

DataTablesがaaDataを検索しないように、意図的にsAjaxDataPropを空の文字列に設定しました。コントローラでaaDataをそのように明示的に設定した場合でも：

return Json(new { aaData = phoneNumbers });

それでもエラーが発生します。何かアドバイスはありますか？

ありがとう！

jqueryjsonasp.net-mvc-3datatables
11
PW763

以下は私にとって素晴らしい働きをします：

$(function () {
    $('#example').dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Home")'
    });
});

sAjaxDataPropプロパティを削除しました。

このデータソースで：

public ActionResult LoadPhoneNumbers()
{
    return Json(new
    {
        aaData = new[] 
        {
            new [] { "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" },
            new [] { "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A" },
            new [] { "Webkit", "iPod Touch / iPhone", "iPod", "420.1", "A" }
        }
    }, JsonRequestBehavior.AllowGet);
}

そしてあなたの例の電話の場合：

public ActionResult LoadPhoneNumbers()
{
    var phoneNumbers = new List<PhoneNumber>(new[] 
    {
        new PhoneNumber { Number = "555 123 4567", Description = "George" },
        new PhoneNumber { Number = "555 765 4321", Description = "Kevin" },
        new PhoneNumber { Number = "555 555 4781", Description = "Sam" }
    });

    return Json(new
    {
        aaData = phoneNumbers.Select(x => new[] { x.Number, x.Description })
    }, JsonRequestBehavior.AllowGet);
}
18
Darin Dimitrov

この 例 では、コントローラーメソッドから返されるデータは特定の形式である必要があるようです。彼は実際にaaDataの一部としてリストを返しています。また、各パラメーターの目的についても説明します。おそらく、DataTablesが理解できるjson形式でリターンをフォーマットしていないだけです。

public class HomeController : Controller
{
    public ActionResult AjaxHandler(jQueryDataTableParamModel param)
    {
        return Json(new{
                sEcho = param.sEcho,
                iTotalRecords = 97,
                iTotalDisplayRecords = 3,
                aaData = new List<string[]>() {
                    new string[] {"1", "a1", "a2", "a3"},
                    new string[] {"2", "b1", "b2", "b3"},
                    new string[] {"3", "c1", "c2", "c3"}
                    }
            },
        JsonRequestBehavior.AllowGet);
    }
}
0
HashTagDevDude