7

過去数時間検索してきましたが、残念ながら、.netとMVCを使用してデータテーブルにアクションの編集と削除のリンク列を入力する方法の例が見つからないようです。

これが私がこれまでに持っているものです、どうすればアクションリンクを追加できますか？私は何が欠けていますか？

<script type="text/javascript">
$(document).ready(function () {
    $('#myDataTable').dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("Index1", "Default1")'
    });

});
</script>

<div id="container">
<div id="demo">
    <table id="myDataTable">
        <thead>
            <tr>
                <th>
                    RoleId
                </th>
                <th>
                    RoleName
                </th>
                <th>
                    UserId
                </th>
                <th>
                    UserName
                </th>
            </tr>
        </thead>
        <tbody> 
        </tbody>
</table>    
</div>
</div>

これを最後の列に追加したいと思います。

    <td>
        @Html.ActionLink("Edit", "Edit", new {id=item.PrimaryKey}) |
        @Html.ActionLink("Details", "Details", new { id=item.PrimaryKey }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.PrimaryKey })
    </td>

しかし、それを行う方法を理解することはできません。

4

7 に答える 7

17

aoColumns関数付きのプロパティを使用しfnRenderて、カスタム列を追加できます。Html.ActionLinkjavascriptから動的にリンクを生成する必要があるため、ヘルパーを使用することはできません。このaoColumnsプロパティは、各列を構成するのに役立ちます。特定の列を構成したくない場合は、パスするだけです。nullそれ以外の場合は、を渡す必要がありますobject({})。

このfnRender関数は、他の列の値を使用してリンクを作成するのに役立ちます。リンクを生成するように、を使用しoObj.aDataて他の列の値を取得できます。id

<script type="text/javascript">    
    $(document).ready(function () {
        $('#myDataTable').dataTable({
            bProcessing: true,         
            sAjaxSource: '@Url.Action("Index1", "Default1")',
            aoColumns: [
                      null, // first column (RoleId)
                      null, // second column (RoleName)  
                      null, // third (UserId)
                      null, // fourth (UserName)

                      {     // fifth column (Edit link)
                        "sName": "RoleId",
                        "bSearchable": false,
                        "bSortable": false,
                        "fnRender": function (oObj)                              
                        {
                            // oObj.aData[0] returns the RoleId
                            return "<a href='/Edit?id=" 
                                + oObj.aData[0] + "'>Edit</a>";
                        }
                       },

                       { }, // repeat the samething for the details link

                       { }  // repeat the samething for the delete link as well

                   ]
     });  
}); 
</script>

サーバーから返すJSON出力のもう1つの重要な点は、編集列についても1、2、3などを返す必要があることです。

参照： http： //jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

于 2012-06-29T13:21:24.113 に答える
7

fnRenderは減価償却されており、mRenderは同じパラメーターを受け取りません。

これは私にとってはうまくいきます。@Markの例に従ってください。

  {     // fifth column (Edit link)
    "sName": "RoleId",
    "bSearchable": false,
    "bSortable": false,
    "mRender": function (data, type, full) {
        var id = full[0]; //row id in the first column
        return "<a href='javascript:alert("+id+");'>Edit</a>";
   }
于 2014-06-16T18:57:25.737 に答える
3

他の応答は、レガシーDataTables構文を使用しています。DataTables 1.10+の場合、columnDefsの構文は次のとおりです。

$('#MyDataTable').DataTable({
    "processing": true,
    "ajax": '@Url.Action("Index1", "Default1")',
    "columnDefs": [
        {"targets": [4], "data": "RoleId", "render" : function(data, type, full) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", data);}},
        {},  //repeat
        {}   //repeat
    ]
});

注：ActionLinkでモデルを取得するために、JavaScriptのreplace（）を使用して、文字列「replace」をdata、columnDefで以前に「RoleId」として定義された文字列に置き換えています。

于 2017-01-23T18:27:08.080 に答える
2

aoColumnDefsを使用した別のアプローチ 

$('#myDataTable').dataTable({
    bProcessing: true,
    sAjaxSource: '@Url.Action("Index1", "Default1")'
    aoColumnDefs: [{
                     "aTargets": [4],    //Edit column
                     "mData": "RoleId",  //Get value from RoleId column, I assumed you used "RoleId" as the name for RoleId in your JSON, in my case, I didn't assigned any name in code behind so i used "mData": "0"
                     "mRender": function (data, type, full) {
                       return '<a href=' +
                            '@Url.Action("Edit", "Default1")?RoleId=' + data +
                            '>Edit</a>';
                     }
                  },{
                     "aTargets": [5],    //Detail column
                     "mData": "RoleId",  
                     "mRender": function (data, type, full) {
                       return '<a href=' +
                            '@Url.Action("Detail", "Default1")?RoleId=' + data +
                            '>Detail</a>';
                     }
                  },{
                     "aTargets": [6],    //Delete column
                     "mData": "RoleId",  
                     "mRender": function (data, type, full) {
                       return '<a href=' +
                            '@Url.Action("Delete", "Default1")?RoleId=' + data +
                            '>Delete</a>';
                     }
                  }]
});
于 2014-11-10T09:39:34.717 に答える
1

この投稿のヘルプを使用して、このアクションリンクを機能させる別の方法を見つけました（オリビエコメント）：

Javascriptで再利用するテーブルノードにデータタグ属性を追加します

cshtmlの場合：

<table class="table table-striped display" id="list" 
            data-url-edit="@Url.Action("Edit","User", new { id = "replace"})"

columndefs領域の*.jsファイル内：

  "columnDefs": [
        {
            "targets": [-1], "data": "UserID", "render": function (data, type, row, meta) {
                return '<a href="' + $('#list').data('url-edit').replace("replace", row.UserID) + '">Edit</a> | '
                    + '<a href="' + $('#list').data('url-details').replace("replace", row.UserID) + '">Details</a> | '
于 2017-08-28T15:18:50.993 に答える
0

データテーブル1.10+に前述のコードを使用しましたが、リンクではなくデータテーブルセルで文字列を取得します。

@Html.ActionLink("Edit", "Edit", new {id = "294"})

ソリューションで古いmvc3バージョンを使用していることに注意してくださいここに私のjavascript：

$(document).ready(function () {

var tenantid = $('#tenantid').text();
$("#title").html("<h1>User List for TenantID: "+ tenantid + " </h1>");

var oTable = $('#list').DataTable({
    "serverSide": true,
    "ajax": {
        "type": "POST",
        "url": '/User/DataHandler',
        "contentType": 'application/json; charset=utf-8',
        'data': function (data)
        {
            data.ID = tenantid;
            return data = JSON.stringify(data);
        }
    },
    "dom": 'lfrtiSp',        
    "processing": true,
    "paging": true,
    "deferRender": true,        
    "pageLength": 10,
    "lengthMenu": [5, 10, 25, 50, 75, 100],
    "columnDefs": [
        { "targets": [-1], "data": "UserID", "render": function (data, type, row, meta) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", row.UserID); } }

    ],

    "columns": [
        { "data": "UserID", "orderable": true },
        { "data": "UserGUID", "orderable": false },
        { "data": "UserName", "orderable": true },
        { "data": "UserEMAil", "orderable": true },
        { "data": "UserIsDeleted", "orderable": true },
        { "data": "Action", "orderable": false }
    ],

    "order": [0, "asc"]

    });
 });
于 2017-08-28T14:09:16.790 に答える
0

これは私のために働く

これを編集/アクション列として追加します

{ "data": "YOURIDKEYCOLUMN",
  "render": function (data) {
   return "<a href='/YOUREDITINGURL/Edit/"+data+"'>Edit</a>"
   }
于 2018-10-09T13:39:24.910 に答える