Question

我正在尝试使用mdbootstrap表包，因为我正在寻找排序功能，当我在创建html页面时手动输入数据时，它可以工作。但是，由于服务器正在接收传入的信息，因此我将使用：

$(document).ready(function () {
    $('#dtBasicExample').DataTable();
    $('.dataTables_length').addClass('bs-select');
    });

  function addRow(userID, name, gender, age, salary, product, date) {
    let table = document.getElementById('dtBasicExample');
    let row = table.insertRow(1);
    let cellUserID= row.insertCell(0);
    let cellName = row.insertCell(1);
    let cellGender = row.insertCell(2);
    let cellAge = row.insertCell(3);
    let cellSalary = row.insertCell(4);
    let cellProduct = row.insertCell(5);
    let cellTime = row.insertCell(6);


    cellUserID.innerHTML = userID;
    cellName.innerHTML = name;
    cellGender.innerHTML = gender;
    cellAge.innerHTML = age;
    cellSalary.innerHTML = salary;
    cellProduct.innerHTML = product;
    cellTime.innerHTML = date;

  }

，当通过调用从服务器接收信息时被调用： addRow（userId，姓名，性别，年龄，薪水，产品，日期）;

我的html页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

<!-- Main Stylesheet File -->
  <link href="css/style.css" rel="stylesheet">


  <!-- SCRIPTS -->
        <!-- JQuery -->
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <!-- Bootstrap tooltips -->
        <script type="text/javascript" src="js/popper.min.js"></script>
        <!-- Bootstrap core JavaScript -->
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <!-- MDB core JavaScript -->
        <script type="text/javascript" src="js/mdb.js"></script>

        <!-- MDBootstrap Datatables  -->
        <script type="text/javascript" src="js/addons/datatables.min.js"></script>





  <!--Script references. -->
  <!--Reference the jQuery library. -->
  <!-- <script src="http://93.240.59.17:8100/Scripts/jquery-1.10.2.min.js"></script> -->
  <!--Reference the SignalR library. -->
  <script src="http://93.240.59.17:8100/Scripts/jquery.signalR-2.4.0.js"></script>
  <!--Reference the autogenerated SignalR hub script. -->
  <script src="http://93.240.59.17:8100/signalr/hubs"></script> 
<!-- Template Main Javascript File -->
  <script src="js/main.js"></script>
<!-- DataTables from Bootstrap (One being used) -->
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">
  <!-- MDBootstrap Datatables  -->
  <link href="css/addons/datatables.min.css" rel="stylesheet">

</head>

<body id="page-top">

<main id="main-management-system">
      <!-- <table width="100%" class="display" id="datatable"> -->
          <section class="container">
          <div id="table">
            <table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
                          <thead class="thead-dark">
                            <tr>
                              <th class="th-sm">User ID</th>
                              <th class="th-sm">Name</th>
                              <th class="th-sm">Gender</th>
                              <th class="th-sm">Age</th>
                              <th class="th-sm">Salary (£)</th>
                              <th class="th-sm">Product</th>
                              <th class="th-sm">Date</th>
                            </tr>
                          </thead>
                    <tbody>

                    </tbody>
                  </table>
                </div> <!-- End of table div -->
              </section> <!-- End of container section -->
</main>
 </body>
    </html>

addRow（）函数起作用并将传入的信息添加到表中。但是，当尝试使用引导程序中DataTable给出的任何过滤器时，表信息会消失，并且一旦发生这种情况，就无法再次可视化该信息。如果仅在html页面中输入信息，就不会出现这种行为，如以下示例中来自原始网站的说明：https://mdbootstrap.com/docs/jquery/tables/datatables/#otpions-reference。

因此，我认为它不起作用的原因是因为我要在创建表的时间分别输入信息。我想知道是否有人可以帮助我解决这个问题或能够为我指明正确的方向。

谢谢。

引导表的排序功能不起作用

0 个答案: