ссылка на действие jquery datatables как добавить

Я искал последние несколько часов и, к сожалению, не могу найти пример того, как заполнить таблицу данных с помощью действия редактирования и удаления столбца ссылки с использованием .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>

Но не могу понять, как это сделать.


jquery asp.net-mvc-3 jquery-datatables
person nitefrog    schedule 29.06.2012    source источник

Ответы (7)


arrow_upward
17
arrow_downward

Вы можете использовать свойство aoColumns с функцией fnRender для добавления пользовательских столбцов. Вы не можете использовать помощник Html.ActionLink, потому что вам нужно динамически генерировать ссылки из javascript. Свойство 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, 2, 3 или что-то еще.

Ссылка: http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

person VJAI    schedule 29.06.2012
comment
fnRender устарел. Вместо этого используйте mRender. datatables.net/usage/columns - person asunrey; 06.03.2013

arrow_upward
7
arrow_downward

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>";
   }
person Fernando JS    schedule 16.06.2014

arrow_upward
3
arrow_downward

В других ответах используется устаревший синтаксис 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, которая определена как "RoleId" ранее в столбцеDef.

person devlin carnate    schedule 23.01.2017

arrow_upward
2
arrow_downward

Другой подход с 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>';
                     }
                  }]
});
person bsting    schedule 10.11.2014

arrow_upward
1
arrow_downward

Я нашел другой способ заставить эту ссылку действия работать, используя справку из этого обработка">пост (комментарии Оливье):

вы добавляете атрибуты тегов данных в узле таблицы, которые вы повторно используете в Javascript

в cshtml:

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

в вашем файле *.js в области columndefs:

  "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> | '
person user8527840    schedule 28.08.2017

arrow_upward
0
arrow_downward

Я использовал упомянутый код для данных 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"]

    });
 });
person user8527840    schedule 28.08.2017

arrow_upward
0
arrow_downward

это работает для меня

добавьте это в качестве столбца «Правка/Действие»

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