Добавьте дополнительный столбец в представлении для пейджинга DataTable, используя Ajax in ASP. Net MVC или Core - PullRequest
Новая
       5

Добавьте дополнительный столбец в представлении для пейджинга DataTable, используя Ajax in ASP. Net MVC или Core

0 голосов
/ 07 апреля 2020

Я использую DataTable на странице списка элементов в ASP. Net Базовом веб-сайте. Из-за большого объема данных мне нужно изменить механизм загрузки записей. Теперь я хочу загрузить записи для конкретной страницы c. Я могу получить данные, используя следующий код, но я не знаю, как добавить дополнительный столбец, который содержит гиперссылки и которые вызывают действия.

Пожалуйста, укажите мне.

Код: Index.cs html

<table id="tblData" class="table table-striped table-bordered nowrap" style="width: 100%;">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ItemName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MinimumQty)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.OnHandQuantity)
            </th>
            <th>Action</th>
            <th>TransactionReport</th>
        </tr>
    </thead>
    <tbody>
        @*@foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ItemName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.MinimumQty)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.OnHandQuantity)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.ItemID">Edit</a>
                    <span>|</span>
                    <a asp-action="Delete" asp-route-id="@item.ItemID">Delete</a>
                </td>
                <td>
                    <a asp-action="TransactionReport" asp-route-id="@item.ItemID">View</a>
                </td>
            </tr>
        }*@
    </tbody>
</table>

@section Scripts{
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/1.10.20/css/dataTables.semanticui.min.css" rel="stylesheet" />
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.semanticui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
           var table = $('#tblData').DataTable({
            "pageLength": 2,
                "paging": true,
                ajax: {
                    url: '@Url.Action("GetItemsDataTable","Items")',
                    type: "POST",
                    datatype: "json"
                },
                columns: [
                    { data: "ItemName"},
                    { data: "MinimumQty"},
                    { data: "OnHandQuantity"},
                ],
                serverSide: "true",
                order: [0, "asc"],
                processing:"true",
            });
        });
    </script>
}

1 Ответ

0 голосов
/ 07 апреля 2020

Не «серверный» способ реализации,

Сначала добавьте рекурсивный метод со смещением и извлеките параметры. Эти параметры будут использоваться при получении всех элементов в вашей таблице данных.

Во-вторых, в столбцах данных можно добавить действие объекта и transcriptReport

{data: 'Action'}, {data: transcriptReport}

Третий в вашем рекурсивном методе используйте Promise, который возвращает данные, извлеченные со смещением из вашей базы данных, или просто используйте Ajax.

Каждый раз, когда ваш рекурсивный метод получает данные с сервера, используйте 

datatable.rows.add(data).draw();
...