jquery datatables actionlink comment ajouter

Vous pouvez utiliser le aoColumns propriété avec fnRender fonction pour ajouter des colonnes personnalisées.
Vous ne pouvez pas utiliser la Html.ActionLink helper parce que vous avez à générer les liens dynamiquement à partir de javascript. Le aoColumns propriété vous permet de configurer chacune des colonnes, si vous ne souhaitez pas configurer une colonne particulière juste passer null que vous avez passer un object({}).

La fnRender fonction vous aide à créer les liens en utilisant les valeurs des autres colonnes. Vous pouvez utiliser le oObj.aData pour obtenir les valeurs de l'autre colonne comme id pour générer les liens.

<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>

Une autre chose importante à la sortie JSON vous de retour à partir du serveur, pour la colonne modifier aussi que vous avez à retourner quelque chose comme 1, 2, 3 ou quoi que ce soit.

Référence: http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

Les autres réponses sont à l'aide de l'héritage tables de données syntaxe. Pour DataTables 1.10+, la syntaxe pour columnDefs est comme suit:

$('#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
    ]
});

remarque: afin d'obtenir le Modèle de la ActionLink, je suis en utilisant JavaScript replace() pour remplacer la chaîne "remplacer" avec data, qui est défini comme "RoleId" plus tôt dans le columnDef

J'ai utilisé le code mentionné pour la datatable 1.10+, mais à obtenir de la chaîne dans la table de données de la cellule à la place de la le lien.

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

noter que l'utilisation et le vieux mvc3 version sur la solution
Voici mon code 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"]
});
});

cela fonctionne pour moi

ajouter ce que votre Modifier /colonne Action

{ "data": "YOURIDKEYCOLUMN",
"render": function (data) {
return "<a href='/YOUREDITINGURL/Edit/"+data+"'>Edit</a>"
}