Question

我想添加数据表 scrollY scrollX 功能，但它有一些调整问题，即屏幕分辨率。有些屏幕显示更多空间来自波纹管和它像X射线图像一样从X轴留下空间。

我的java脚本是 -

 $(document).ready(function(){
  var filterTable=$("#pendingpodatesort").DataTable({
 "dom": '<"wrapper"lit>',
 "scrollY":        "420px",
 "scrollX":        true,
 "lengthMenu": [ [-1, 10, 25, 50, 100], ["All", 10, 25, 50, 100] ],
 "aoColumns": [

                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"iDataSort": 10},
                          {"bVisible": false},
                          {"iDataSort": 12},
                          {"bVisible": false},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},
                          {"bSortable": true},                                                           
                          {"bSortable": true}
                         ],
   "order": [[ 10, "desc" ]]                         

 }); 

**html.erb**

  <table class="table table-striped table-hover" id="pendingpodatesort" >
 <thead>
  <tr>

  <th><%= check_box_tag "selectAll", "selectAll" %></th>


  <th>Item</th>
  <th>Make/Catno</th>
  <th>UOM</th>
  <th>Qty</th>
  <th>Qt_P</th>
  <th>Vendor</th>
  <th>Phone</th>
  <th>No.</th>
  <th>Date.</th>
  <th>Sort Date</th>
  <th>Dlv.Dt</th>
  <th>Sort Date</th>
  <th>Status</th>
  <th>Status Dt</th>
  <th>Remarks</th>
  <th></th>
  <th></th>
  <th></th>      
   </tr>
 </thead>

  <tbody>
 <% @poitems.each do |poitem| %>
  <tr>

     <% if current_personnel.designation == 4 ||    current_personnel.designation == 5 %>
    <td></td>
    <% else %>
    <td><%= check_box_tag 'poitem[]' , poitem.id %></td>
    <% end %>

    <td><%= poitem.item.description %></td>

    <% if poitem.make_id != nil %>
    <td><%= (poitem.make.brand.name)+"/"+(poitem.make.catno) %></td>
    <%else %>
    <td></td>
    <% end%>

    <% if poitem.uom_type == nil %>
    <td><%= poitem.item.uom.shortform %></td>
    <% else %>
     <td><%= Uom.find_by_id((Item.find_by_id(poitem.item_id)).dual_uom_id).shortform %></td>
    <% end %>

    <td><%= poitem.quantity %></td>

    <% if poitem.pending_quantity != nil %>
    <td><%= poitem.pending_quantity %></td>
    <%else%>
    <td><%= poitem.quantity %></td>
    <%end%>

    <td><%= poitem.purchaseorder.vendor.description.titlecase %></td>
    <td><%= poitem.purchaseorder.vendor.ref_ph %></td>
    <td>PO/<%= poitem.indent.parentindent.warehouse.shortform + "/"+(poitem.purchaseorder.serial.to_s) %></td>

    <% @podate=poitem.purchaseorder.date %>
    <td><%= @podate.strftime("%d/%m") %></td>
    <td><%= @podate.strftime("%m/%d/%y") %></td>

    <% @delivery_days=poitem.purchaseorder.delivery_days %>
    <% if @delivery_days != nil %>
    <td><%= (@podate+(@delivery_days.days)).strftime("%d/%m") %></td>
    <td><%= (@podate+(@delivery_days.days)).strftime("%m/%d/%y") %></td>
    <% else %>
    <td></td>
    <td></td>
    <% end %>

      <% if poitem.purchaseorder.awaiting_pi_payment==true %>
      <td>Awaiting for PI Payment</td>
      <td></td>
      <% elsif poitem.dispatched==true %>
      <td>Despatched</td>
        <% if poitem.dispatched_date != nil %>
        <td><%= poitem.dispatched_date.strftime("%d/%m") %></td>
        <% else %>
        <td></td>
        <% end %>
      <% elsif poitem.received_by_transporter==true %>
      <td>Received at Transporter Godown</td>

        <% if poitem.received_by_transporter_on != nil %>
        <td><%= poitem.received_by_transporter_on.strftime("%d/%m") %></td>
        <% else %>
        <td></td>
        <% end %>

      <% elsif poitem.delivered_at_plant==true %>
      <td>Delivered at Plant</td>
        <% if poitem.delivered_at_plant_on != nil %>
        <td><%= poitem.delivered_at_plant_on.strftime("%d/%m") %></td>
        <% else %>
        <td></td>
        <% end %>

      <% else %>
      <td></td>
      <td></td>
      <% end %>
      <% if poitem.dispatch_details==nil %>
      <td><%= (poitem.followup_remarks) %></td>
      <% elsif poitem.followup_remarks==nil %>
      <td><%= (poitem.dispatch_details)%></td>
      <% else %>
      <td><%= (poitem.dispatch_details)+', '+ (poitem.followup_remarks) %></td>
      <% end %>

      <% if PoAttachment.where(po_id: poitem.po_id)[0]== nil %>
      <td></td>
      <% else %>
      <td><% PoAttachment.where(po_id: poitem.po_id).each do |attachment| %>
      <%= link_to attachment.document.url, class: "btn btn-default btn-xs" do %>
      <i class="glyphicon glyphicon-paperclip"></i><% end %>
      <% end %></td>
      <% end %>


    <td> <%= link_to controller: "purchase_order_items", action: "change_status", id: poitem.id, class: "btn btn-default btn-xs" do%>
    <i class="glyphicon glyphicon-pencil"></i>
   <% end %></td>
   <td><%= submit_tag ">", name: poitem.id, :class => 'btn btn-default btn-xs' %></td>

    </tr>
  <% end %>
  </tbody>
   </table>

我想从X轴和Y轴移除这两个空格。

Answer 1

您只需在表格标记中设置width = 100％即可修复scrollX问题。

将如下：

<table class="table table-striped table-hover" id="pendingpodatesort" style="width:100%" >

Answer 2

最后，我通过使用数据表

的vh属性解决了ScrollY的问题

$(document).ready(function(){
var filterTable=$("#pendingpodatesort").DataTable({
"dom": '<"wrapper"lit>',
"scrollY":        "420vh",
 "scrollX":        true,
"lengthMenu": [ [-1, 10, 25, 50, 100], ["All", 10, 25, 50, 100] ],
"aoColumns": [

                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"iDataSort": 10},
                      {"bVisible": false},
                      {"iDataSort": 12},
                      {"bVisible": false},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},
                      {"bSortable": true},                                                           
                      {"bSortable": true}
                     ],
     "order": [[ 10, "desc" ]]                         

   });

scrollX中的问题和数据表中的scrollY

2 个答案: