Question

我正在尝试使用jquery-bootgrid插件，但是通过简单的初始化遇到了一些问题。

按钮的分页样式不正确，并且在单击按钮时pageSize / column选择按钮在控制台中引发错误：

a.default不是构造函数

这是我的标记

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 
  <meta name="description" content="" /> 
  <meta name="author" content="" /> 
  <title>Dashboard </title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" /> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css" /> 
 </head> 
 <body> 
  <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> 
   <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">BRANDING</a> 
   <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> 
   <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search" /> 
   <ul class="navbar-nav px-3"> 
    <li class="nav-item text-nowrap"> <a class="nav-link" href="#">Sign out</a> </li> 
   </ul> 
  </nav> 
  <div id="content-container" class="container-fluid"> 
   <div class="row"> 
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> 
     <div class="sidebar-sticky pt-3"> 
      <ul class="nav flex-column"> 
       <li class="nav-item"> <a class="nav-link active" href="#">Menu Item 1 <span class="sr-only">(current)</span> </a> </li> 
       <li class="nav-item"> <a class="nav-link" href="#">Menu Item 2</a> </li> 
       <li class="nav-item"> <a class="nav-link" href="#">Menu Item 3</a> </li> 
       <li class="nav-item"> <a class="nav-link" href="#">Menu Item 4</a> </li> 
      </ul> 
     </div> 
    </nav> 
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4"> 
     <h1 class="h2 pt-3 pb-2 mb-3 border-bottom">Users</h1> 

     <!-- jquery-bootgrid starts here -->
     <table id="grid-basic" class="table table-condensed table-hover table-striped"> 
      <thead> 
       <tr> 
        <th data-column-id="id" data-type="numeric">ID</th> 
        <th data-column-id="email">Sender</th> 
        <th data-column-id="firstName">First Name</th> 
        <th data-column-id="lastName" data-order="desc">Last Name</th> 
        <th data-column-id="deactivated">Deactivated</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>user@domain.com</td> 
        <td>John</td> 
        <td>Smith</td> 
        <td>true</td> 
       </tr> 
      </tbody> 
     </table> 
    </main> 
   </div> 
  </div> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js"></script> 
  <script>
        $(document).ready(function() {
            $("#grid-basic").bootgrid();
        });
  </script>  
 </body>
</html>

我不觉得我在这里做任何过于复杂的事情，而是在遵循文档中的示例。

这使我相信这是与bootstrap 4.5的版本冲突。

jQuery bootgrid无法设置样式，按钮无法正常工作

0 个答案: