0
votes

La pagination de datables pourrait être sur le pied de page fixe de bootstrap du modèle de projet ASP.NET CORE MVC

Je travaille avec ASP.NET CORE 3.1 MVC et BOOTSTRAP 4.4.1 et le modèle de projet par défaut avec DataTables.js (bootstrap Twitter de 1,10,20 et CSS).

La première chose que je dois dire est que je ne suis pas bon du tout avec CSS, alors je pense que cela pourrait être la raison de ce problème. P>

Le problème suivant se produit lorsque l'écran a une Résolution: (Résolution testée: 400x500) P>

J'aimerais savoir pourquoi cela s'est passé avec le pied de page fixe et s'il y a un Corrigez-le pour cela. P>

Merci d'avance pour toute assistance. p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebApplication1</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />      <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand">WebApplication1</a>
            </div>
        </nav>
    </header>

    <div class="container">
        <main role="main" class="pb-3">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />

<div class="table-responsive p-1">
    <table class="table table-striped table-bordered" id="Table">
        <thead>
            <tr>
                <th scope="col">
                    Name
                </th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td class="align-middle">
                        Hello
                    </td>
                </tr>
                <tr>
                    <td class="align-middle">
                        World
                    </td>
                </tr>
        </tbody>
    </table>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#Table').DataTable(
                    {
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
                        }
                    });
                    
            });</script>
</div>
        </main>

    </div>
            <footer class="border-top footer text-muted text-center">
    <div class="container">
        Footer
    </div>
</footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js"></script>
    </body>
</html>

css c# asp.net-core bootstrap-4 datatables

0 commentaires

3 Réponses :

0
votes

Vous pouvez modifier la position du pied de page en statique, puis il sera corrigé.

3 commentaires

Je l'ai changé comme vous l'avez mentionné et couvre également tout l'espace libre (la demi-page est de pied de page maintenant).

Ensuite, la hauteur maximale du pied de page peut aider.

Merci de répondre. Actuellement, j'ai déjà marqué une réponse aussi correcte avec ce dont j'avais besoin. Merci pour l'aide :)

0
votes

Essayez Supprimer la position: absolu dans la classe de page de page

.footer {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

1 commentaires

Le problème est maintenant que le pied de page prend tout l'espace libre de la page (en fonction de la page que vous visitez, il peut couvrir plus ou moins d'espace). Y a-t-il une autre façon pour moi de garder la position de départ?

0
votes

J'ai utilisé CSS Flex pour réduire le changement à votre balisage.

Le changement que j'ai fait était: p>

J'ai ajouté la classe Contenu code> à votre contenu principal. LI>

 J'ai changé le style de  corps  code> pour avoir ces styles  li>
 ol>  xxx  pré> 
 Puis j'ai ajouté ces informations et a également mis à jour le style de votre  .footer  code>  li>
 OL> <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand">WebApplication1</a>
            </div>
        </nav>
    </header>
    <div class="content container">
        <main role="main" class="pb-3">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />

<div class="table-responsive p-1">
    <table class="table table-striped table-bordered" id="Table">
        <thead>
            <tr>
                <th scope="col">
                    Name
                </th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td class="align-middle">
                        Hello
                    </td>
                </tr>
                <tr>
                    <td class="align-middle">
                        World
                    </td>
                </tr>
        </tbody>
    </table>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#Table').DataTable(
                    {
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
                        }
                    });
                    
            });</script>
</div>
        </main>

    </div>
    <footer class="footer border-top footer text-muted text-center">
        <div class="container">
            Footer
        </div>
    </footer>
</body>

3 commentaires

Merci, cela a le comportement que j'attendais. J'ai lu que ce genre de choses sont délicats.

@ Andrésquesadacascante Il suffit de s'y habituer. Il existe d'autres moyens de le faire , mais ce que j'ai suggéré semble plus facile ton cas

C'est vrai, c'est un peu drôle parce que je vois enfin un pied de page qui fait vraiment ce qu'il devrait (indépendamment de la mise en page utilisée par la page)