Jquery datatables с настраиваемым столбцом mvc

Я много искал в Интернете, но не могу найти способ сделать это. Я использую данные JQuery:

var oTable = $('#boardTable2').DataTable({
            "ajax": {
                "url": '/Boards/GetBoards',
                "type": "get",
                "datatype": "json",
                "dataSrc": function(json) {
                    return json;
                }
            },
            "columns": [                  
                { "data": "Name" },
                { "data": "Description" },
                { "data": "StartDate" },
                { "data": "EndDate" }
            ]
        });

Таблица выглядит так: Table

Но мне нужен еще один настраиваемый столбец вроде этого:

            <div class="btn-group">
                <button class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-wrench"></i> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu fa-pull-right">
                    <li>
                        <a href="@Url.Action("Edit", new { id = item.ID })">
                            <i class="fa fa-pencil"></i> Edit
                        </a>
                    </li>
                    <li>
                        <a id="DeleteBoard" data_number="@item.ID">
                            <i class="fa fa-trash"></i> Delete
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Details", new { Id = item.ID })">
                            <i class="fa fa-info-circle"></i> Details
                        </a>
                    </li>
                </ul>
            </div>

Собственно, именно этот код и должен быть другой строкой. Как мне это сделать? Какие-либо предложения? Может я пропустил подобный вопрос? Я совершенно потерялся, поэтому буду благодарен за любую помощь.

0
0
1 071
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

попробуйте этот вариант

var html = 'insert your html here'

 var oTable = $('#boardTable2').DataTable({
        "ajax": {
            "url": '/Boards/GetBoards',
            "type": "get",
            "datatype": "json",
            "dataSrc": function(json) {
                return json;
            }
        },
        "columns": [                  
            { "data": "Name" },
            { "data": "Description" },
            { "data": "StartDate" },
            { "data": "EndDate" }
        ],
        "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": html
    } ]
    });

В основном, если вы хотите создать дополнительный столбец данных с помощью JQuery Datatables, я бы передал дополнительные данные через ajax. В этом нет необходимости, если вы не хотите передавать синтаксис Razor в HTML @Url.Action("Edit", new { id = item.ID }). Если вы хотите добавить всю эту HTML-группу btn, вам нужно создать, возможно, помощника HTML, чтобы свернуть этот HTML-код группы btn с синтаксисами C#, такими как Url.Action() или item.ID. Затем добавьте его к каждой взятой записи и вернитесь в ajax.
Не забудьте создать дополнительный html <tr>, потому что в таблицах данных должно быть одинаковое количество столбцов в данных и в выбранной таблице.

JSFiddle

Ответ принят как подходящий

Другие предложения хороши, но они не сработали для меня. Я пытался найти предложения, но сработало только одно:

var oTable = $('#boardTable2').DataTable({
            "ajax": {
                "url": '/Boards/GetBoards',
                "type": "get",
                "datatype": "json",
                "dataSrc": function(json) {
                    return json;
                }
            },
            "columns": [
                { "data": renderNameandID},
                { "data": "Description" },
                { "data": "StartDate" },
                { "data": "EndDate" },
                { "data": "Id", "render" : function(Data) {
                    return "<a class='btn btn-default btn sm' href='@Url.Action("Edit","Boards")/" + Data + "''><i class='fa fa-pencil'></i>Edit</a>" +
                            "<a class='btn btn-danger btn sm' id='DeleteBoard' href='@Url.Action("Delete","Boards")/" + Data + "''><i class='fa fa-trash'></i>Delete</a>" +
                            "<a class='btn btn-default btn sm' href='@Url.Action("Details","Boards")/" + Data + "''><i class='fa fa-info'></i>Details</a>";
                },
                    "orderable": false,
                    "searchable" : false,
                    "width":"150px"
                }
            ],
            "language" : {
                "emptyTable" : "No data found"
            }
        });

Другие вопросы по теме