web-dev-qa-db-fra.com

Est-il possible de placer des boutons Modifier et Supprimer dans jQuery DataTables?

Je suis un débutant utilisant jQuery DataTable, et j'essaie de placer des boutons Modifier et Supprimer dans un jQuery DataTable avec une liaison de données dynamique dans bootstrap comme dans l'image ci-dessous:

enter image description here

Mais je reçois un message d'erreur:

enter image description here

Action du contrôleur

    public class PhoneNumber
    {
        public string Number { get; set; }
        public string Description { get; set; }
        public string Action { get; set; }
    }

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

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

HTML 

 <table id="tblAdminUsers" class="table table-striped table-bordered table-hover table-highlight table-checkable" 
                            data-info="true"
                            data-search="true"
                            data-paginate="true">
                            <thead>
                                <tr>                                       
                                    <th>Number</th>
                                    <th>Description</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

Script

$(function () {

    $("#tblAdminUsers").dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Admin")',
        aoColumns: [
             { mData: "Number" },
             { mData: "Description" },
             {
                 mData: "Action",
                 bSortable: false,
                 mRender: function (o) { return '<i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i>'; }
             }
        ]
    });
});

Veuillez aider.

c#jqueryasp.net-mvctwitter-bootstrapdatatables
15
Ragesh S

Je viens de supprimer l'attribut mData dans la propriété aoColumns

dans le script dataTable.

$(function () {

$("#tblAdminUsers").dataTable({
    bProcessing: true,
    sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Admin")',
    aoColumns: [
         { bSortable: false, },
         { bSortable: false, },
         {
             bSortable: false,
             mRender: function (o) { return '<i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i>'; }
         }
    ]
});});
8
Ragesh S

il suffit de suivre cette URL: http://editor.datatables.net/examples/styling/envelopeInTable.html . Cela résoudra votre problème.

4
Mrityunjay