如何使用ASP.NET MVC中的jQuery DataTables表插件为特定列设置数据?

时间:2017-02-21 08:58:48

标签: jquery asp.net-mvc datatables

我是jQuery DataTables插件的新手。我遇到了一个问题,我被困住了,对如何继续下去并不知情。

首先,这是我的控制器类内部的实现(PlaylistId的类型为GUID)

    public ActionResult PlayListAjaxHandler(JQueryDataTableParamModel param)
        {
            var result = from c in playLists
                         select new IComparable[]
                         {
                             c.PlaylistName,
                             c.PageSecondsRefresh,
                             c.ImageSecondsRefresh,
                             c.SubscriptionName,
                             Convert.ToString(c.PlaylistId)
                         };

            return Json(new
            {
                param.sEcho,
                iTotalRecords = playListViewModel.Count,
                iTotalDisplayRecords = files.Length,
                aaData = result
            }, JsonRequestBehavior.AllowGet);
}

这是返回的JSON数据的结构

{
"sEcho": "1",
"iTotalRecords": 3,
"iTotalDisplayRecords": 3,
"aaData": [
    ["ChorusLab", 86400, 3, "Solta", "4020b281-2af6-478e-a9a2-b3582d5941db"],
    ["Solta Landscape", 60, 2, "Solta", "3fd61499-fa1e-4584-bcad-57cdd40d2b4b"],
    ["Solta Portrait", 0, 0, "Solta", "1b08e36a-dbe4-4846-a91e-24ec69453407"]
]

}

如您所见,aaData是元素3的数组,每个元素也是一个数组。我想将此数组内的GUID元素绑定到我页面中的锚标记。

.cshtml页面中的脚本实现

<script language="javascript" type="text/javascript">
$(document).ready(function () {
    var oTable = $("#tblPlaylist").DataTable({
        "iDisplayLength": 10,
        "bServerSide": true,
        "sAjaxSource": "@Url.Content("PlayListAjaxHandler")",
        "bProcessing": true,
        "bStateSave": true,
        "aoColumns": [
            {
                "sName": "PlayListName",
                "bSearchable": true,
                "bSortable": true,
                "sWidth": '30%'
            },
            {
                "sName": "PageRef",
                "bSearchable": true,
                "bSortable": true,
                "sWidth": '10%'
            },
            {
                "sName": "NextImg",
                "bSearchable": true,
                "bSortable": true,
                "sWidth": '10%'
            },
            {
                "sName": "Subscription",
                "bSearchable": true,
                "bSortable": true,
                "sWidth": '20%'
            },
            {
                "sName": "Action",
                "bSearchable": false,
                "bSortable": false,
                "sWidth": '30%',
                "render": function (data) {
                    return '<a href=\"PlayListEdit/' + data[4] + '\">Edit</a><b>&nbsp;&nbsp;</b>' +
                           '<a href=\"ViewContent/' + data[4] + '\">View Files</a><b>&nbsp;&nbsp;</b>' +
                           '<a href=\"Play/' + data[4] + '\">Play</a>';
                }
            }
        ]
    });
});

我的问题是,我不确定这是否是将返回的数据(特别是PlaylistId)绑定到3个锚标签(编辑,查看文件,播放)的正确方法。

{
                "sName": "Action",
                "bSearchable": false,
                "bSortable": false,
                "sWidth": '30%',
                "render": function (data) {
                    return '<a href=\"PlayListEdit/' + data[4] + '\">Edit</a><b>&nbsp;&nbsp;</b>' +
                           '<a href=\"ViewContent/' + data[4] + '\">View Files</a><b>&nbsp;&nbsp;</b>' +
                           '<a href=\"Play/' + data[4] + '\">Play</a>';
                }
            }

我已经检查了DataTables中的文档,但我无法正确地执行此操作。

非常感谢任何帮助。

0 个答案:

没有答案