Функция сортировки таблиц начальной загрузки не работает - PullRequest
Новая
       19

Функция сортировки таблиц начальной загрузки не работает

0 голосов
/ 26 марта 2019

Я пытаюсь использовать пакет таблицы 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 (идентификатор пользователя, имя, пол, возраст, зарплата, продукты, дата);

Моя 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.

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

Спасибо.

...