Кнопки jQuery DataTable не отображаются при добавлении строки таблицы - PullRequest
Новая
       1

Кнопки jQuery DataTable не отображаются при добавлении строки таблицы

0 голосов
/ 10 декабря 2018

У меня странное поведение кода, которое я хочу понять.У меня есть страница с простой HTML-таблицей, без данных.Я использую DataTable, чтобы показать кнопки экспорта.Когда я не определяю ни одну строку в таблице, кнопки отображаются правильно.Но когда я определяю строку внутри таблицы, кнопки исчезают.Почему это происходит?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Table Test</title>

    <script src="Scripts/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" 
href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"/>

    <script type="text/javascript" charset="utf8" 
src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <script type="text/javascript" 
src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"> 


<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

    <script>


        $(document).ready(function () {
            $('#table_id').DataTable({
                pageLength: 10,
                lengthChange: false,
                responsive: true,
                dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]

            });

        });




    </script>

</head>
<body>

    <div>


        <table id="table_id" class="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>


        </tbody>
        </table>
      </div>


</body>
</html>

Этот код показывает кнопки над заголовком столбца таблицы.Но если я добавлю, например: 

        <tbody>
          <tr><td></td></tr>

        </tbody>

к таблице, кнопки исчезнут.Что не так?

1 Ответ

0 голосов
/ 10 декабря 2018

Я нашел исправление.Кажется, что DataTable хочет, чтобы заголовок таблицы был правильно определен.Если количество столбцов в заголовке таблицы не будет соответствовать количеству столбцов в теле таблицы, кнопки не будут отображаться.После того, как я это сделал, таблица отображается правильно с панелью кнопок печати и экспорта вверху.Таким образом, в этом случае, поскольку в заголовке таблицы определены два столбца, в теле должно быть два столбца.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...