Question

上图中显示的数据显示在表外。

代码：

 <?php include 'header.php';?>
  <style type="text/css" media="screen">
  td{
    padding: 0;
  }  
  .ol-container {
    line-height: 0.7;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  .container {
      text-transform: uppercase;
    }
  </style>

  <script src="/assets/js/plugins/jquery.min.js"></script>
  <script src="/assets/js/jquery.validate.min.js"></script>
  <script>
   var jq = $.noConflict();
  </script>
  <div class="content-area">
    <div class="bg-white">
      <table id="enquiry_table" class="table table-bordered table-striped table-sm" style="text-align:center;">
                   <thead>
                       <tr>
                          <th>From</th>
                          <th>TO</th>
                          <th>Date</th>
                          <th>Status</th>
                       </tr>
                  </thead>
                 </table>
         </div>
         </div>
  <script type="text/javascript">
   jq("#get").click(function(){
               status_form();
               return false;
            });
  </script>

  <script type="text/javascript">
       function status_form()
         {    
              var lr_no = jq('#lr_no').val();
                        jq.ajax({
                            url :"https://url/sitecontroller/StatusController/fetchStatus",
                            type:"POST",
                            dataType: "json",
                            data:{
                              lr_no:lr_no,
                           },
                            success: function(data)
                            {
                              jq("#get").hide();    
                              console.log(data);
                              //alert(data.bilty);
                              if(data.bilty!='' && data.records!='' )
                              {
                           jq('#enquiry_table').append(
                           jq('<tr>')
                              .append(jq('<td>').append(data.bilty[0].from))
                              .append(jq('<td>').append(data.bilty[0].to))
                              .append(jq('<td>').append(data.bilty[0].lr_date))
                              .append(jq('<td>').append("Booking"))
                                );
                    jQuery.each(data.records, function(index, item) {
                    jq('#enquiry_table').append(
                            jq('<tr>')
                              .append(jq('<td>').append(data.bilty[0].from))
                              .append(jq('<td>').append(data.bilty[0].to))
                              .append(jq('<td>').append(item.date))
                              .append(jq('<td>').append(item.enquiry_status))
                            );
                        });
                           }else {
                             alert("Invalid Number");
                           }
                          } 
                        });    
          }
  </script>
  <?php include 'footer.php'; ?>

在上面的代码中，我的表格标签中只有标头，数据来自jquery ajax成功。在移动视图中，表中的数据显示在表外。我在表中应用了某种样式，但无法正常工作。我在标题中使用bootstrap 3文件。我不知道自己在代码中哪里写错了。

Answer 1

在HTML代码中添加另一个类，如：

您当前的HTML代码：

<table id="enquiry_table" class="table table-bordered table-striped
table-sm" style="text-align:center;">

现在，请再添加一个类（此类：显示响应nowrap），以使显示表响应。
喜欢：

<table id="enquiry_table" class="table table-bordered table-striped table-sm display responsive nowrap" style="text-align:center;">

如果不包括响应式js和CSS，请首先将其包括在内。

这是响应式js。 https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js 这是响应式CSS。 https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css

如果您想了解更多，请点击这里https://datatables.net/extensions/responsive/examples/initialisation/className.html

我正在从jquery分配表数据，我的表中有响应问题

1 个答案: