Как преобразовать это в DataTable? - PullRequest
Новая
       0

Как преобразовать это в DataTable?

0 голосов
/ 17 января 2020

Я хочу отображать этот макет в 5 строк за один раз, используя DataTable, поэтому, пожалуйста, помогите мне с этим. Я пробовал много вещей, но я не могу этого сделать. 

<!DOCTYPE html>
<html>
 <head>
  <title>CSV File to HTML Table Using AJAX jQuery</title>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

 </head>
 <body>
  <div class="container">
   <div class="table-responsive">
    <h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
    <br />
    <div align="center">
     <button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
    </div>
    <br />
    <div id="employee_table">
    </div>
   </div>
  </div>
 </body>
</html>

<script>


$(document).ready(function(){
 $('#load_data').click(function(){
  $.ajax({
   url:"iguana.csv",
   dataType:"text",
   success:function(data)
   {
    var employee_data = data.split(/\r/);
    var table_data = '<table class="table table-bordered table-sm table-responsive table-striped table-hover ">';
    for(var count = 0; count<employee_data.length; count++)
    {
     var cell_data = employee_data[count].split(",");
     table_data += '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count++)
     {
      if(count === 0)
      {
       table_data += '<th>'+cell_data[cell_count]+'</th>';
      }
      else
      {
       table_data += '<td>'+cell_data[cell_count]+'</td>';
      }
     }
     table_data += '</tr>';
    }
    table_data += '</table>';
    $('#employee_table').html(table_data);
   },
    complete: function (data) {
       $('#employee_table').DataTable();
        alert("AJAX request successfully completed");
     }
  });
 });

});


</script>

Я хочу отображать этот макет в 5 строк за один раз, используя DataTable, поэтому, пожалуйста, помогите мне с этим. Я пробовал много вещей, но я не могу этого сделать. Есть ли способ, чтобы я мог достичь этого?

1 Ответ

1 голос
/ 20 января 2020

Вы пытаетесь преобразовать div в таблицу данных.

Добавьте один класс в табличный тег, который будет представлять вашу таблицу. Давайте добавим myDataTable в табличный тег. 

var table_data = '<table class="myDataTable table table-bordered table-sm table-responsive table-striped table-hover">';

сейчас, преобразуем таблицу в Datatable, заменив код 

 $('#employee_table').DataTable(); // employee_table is actually an id of div

на 

$('.myDataTable').DataTable(); // class that added in table tag
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...