Кнопки JQuery Datatable не работают / не отображаются - PullRequest
0 голосов
/ 27 мая 2019

Я создал представление для таблицы данных (которая вызывается модально по ссылке в таблице данных в другом представлении), и я собираюсь поместить кнопки для экспорта данных в Excel, PDF, Print ... и т. Д.Я добавил сценарий, но кнопки не отображаются в конечном выводе.

Какие файлы библиотек я хочу загрузить, чтобы код работал с ожидаемыми от него результатами?

Примечание. Я использовал JQuery 3.1.1

. Я пробовал различные методы, в том числе путем изменения ссылок на библиотеки скриптов, но безрезультатно.Я даже попробовал сборщик загрузок с datatables.net, но, похоже, что-то из этого тоже не работало.

*The html code*
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="btn btn-default" data-dismiss="modal">Back</button>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2 class="modal-title">Item</h2>
            <h4>TRANSFER HISTORY</h4>
        </div>
        <div>
            <table id="example" class="display" style="width:100%">
                <tr style="background-color:#b5bbc8">
                    <th>
                        From
                    </th>
                    <th>
                        To
                    </th>
                    <th>
                        Date
                    </th>
                    <th>
                        Cause
                    </th>
                    <th>
                        Updated By
                    </th>
                </tr>

                @foreach (var item in Model)
            {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Center.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Center1.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TransferDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TransferCause)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.User.FirstName) @Html.DisplayFor(modelItem => item.User.LastName)
                        </td>
                    </tr>
                }
            </table>
        </div>
    </div>
</div>

*The Buttons script*
<script type="text/javascript">
    $(document).ready(function () {
        $('#example').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
    });
</script>

Обновление - я только что выяснил, чего не хватает.На самом деле это была ссылка в родительском представлении, из которого загружается это представление.Я исправил, теперь все работает отлично.Спасибо всем за ваши ответы и отзывы.

Ответы [ 3 ]

1 голос
/ 27 мая 2019

Вы можете реализовать datatable в grid.you можете добавить defer в JS

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" 
 type="text/javascript" defer></script>
<script 
src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" 
type="text/javascript"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" 
type="text/javascript"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" 
type="text/javascript"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" 
type="text/javascript"> </script>
<script 
src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" 
type="text/javascript"></script>

<link 
href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" 
rel="stylesheet"/>
<link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css"rel="stylesheet" />

Это работает для меня, я надеюсь, это поможет вам. Пожалуйста, добавьте Alll JS и CSS на странице просмотра

0 голосов
/ 27 мая 2019

Просто нужно спросить у вас, проверяли ли вы свой сценарий через живую таблицу данных, если нет, перейдите туда и проверьте / проверьте ваш сценарий и дизайн ссылка , я надеюсь, что вы решите свойвопрос по тестированию онлайн портала.

0 голосов
/ 27 мая 2019

Насколько я понимаю, вы пытаетесь инициализировать данные в модале, поэтому вы должны убедиться, что данные в модале загружены правильно, прежде чем данные будут инициализированы, в идеале после нажатия модальной кнопки вы должны вызовите функцию в вашем javascript, которая гарантирует, что данные в модальном режиме загружаются правильно, а затем инициализирует данные.

А что касается сценариев, то это сценарии, которые необходимо включить, чтобы кнопки с датой работали в соответствии с сайтом с данными : -

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...