データテーブルのscrollYで発行

Debasish

データテーブルスクロールY機能を追加したいのですが、画面の解像度に問題があります。画面はベローズからより多くのスペースを残し、ベローズ画像のようにY軸からスペースを残します。

ここに画像の説明を入力してください

私のコード-

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>

application.js
$(document).ready(function(){
 var filterTable=$("#pendingpodatesort").DataTable({
 "dom": '<"wrapper"ilt>',
 "scrollY":  '510px',
 "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" ]]                         

  }); 
 $("#filterbox").keyup(function() {
      filterTable.search(this.value).draw();
    });
});

どの画面でもズームを大きくせずにこのサイズを調整するにはどうすればよいですか?スクロールのY値を%で指定するオプションはありますか?

ヘンツ

追加

scrollCollapse: true

参照:https//datatables.net/reference/option/scrollCollapse

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

データテーブルのscrollXとscrollYの問題

分類Dev

行データの取得中にデータテーブルの未定義エラーが発生しました

分類Dev

同じテーブルのデータで行を更新する

分類Dev

データテーブルの行データを取得できません

分類Dev

データテーブルを変更するScrollYボタンをクリックする

分類Dev

別のテーブルの別の行のデータで行を更新する

分類Dev

別のテーブルの別の行のデータで行を更新する

分類Dev

データテーブルの行の詳細でボタンを非表示/表示

分類Dev

データテーブルの行のグループ化

分類Dev

OracleTemporaryテーブルの列と別のテーブルの行のデータ

分類Dev

データベーステーブルの列名が原因でエラーが発生するのは「from」です

分類Dev

1つのテーブルのデータが原因で、複数のテーブルから行を削除する

分類Dev

テーブルのデータなしで1行のテーブルの列名を取得する-Firebird

分類Dev

別のテーブルのデータで特定の行を更新する

分類Dev

データテーブルを行ではなく列で複数のテーブルに分割する

分類Dev

内部テーブルの最後の行が固定データテーブルで展開されない

分類Dev

テーブル行を他のテーブルのデータで上書きする方法

分類Dev

Postgresqlテーブルの同じデータが最後に隣接して発生し、最初の1行に

分類Dev

データテーブルはrowcallbackで行の色を変更します

分類Dev

Reactテーブルの行データをOnclickで取得する方法

分類Dev

データテーブルの行がSalesforceで更新されない

分類Dev

Angularでテーブルの行データを検証する方法は?

分類Dev

データテーブル行で特定の値を見つける

分類Dev

データテーブルの行で最小/最大日時を見つける

分類Dev

テーブル行データの動的サムネイル

分類Dev

データテーブル列の並べ替えの発行日を修正するにはどうすればよいですか?

分類Dev

「メタデータロック」は、「テーブルのロック[テーブル名]書き込み」を行ったときに発生しました。

分類Dev

C#:データテーブルのデータ行をマージする

分類Dev

データベースへのフラスコテーブル行データ

Related 関連記事

  1. 1

    データテーブルのscrollXとscrollYの問題

  2. 2

    行データの取得中にデータテーブルの未定義エラーが発生しました

  3. 3

    同じテーブルのデータで行を更新する

  4. 4

    データテーブルの行データを取得できません

  5. 5

    データテーブルを変更するScrollYボタンをクリックする

  6. 6

    別のテーブルの別の行のデータで行を更新する

  7. 7

    別のテーブルの別の行のデータで行を更新する

  8. 8

    データテーブルの行の詳細でボタンを非表示/表示

  9. 9

    データテーブルの行のグループ化

  10. 10

    OracleTemporaryテーブルの列と別のテーブルの行のデータ

  11. 11

    データベーステーブルの列名が原因でエラーが発生するのは「from」です

  12. 12

    1つのテーブルのデータが原因で、複数のテーブルから行を削除する

  13. 13

    テーブルのデータなしで1行のテーブルの列名を取得する-Firebird

  14. 14

    別のテーブルのデータで特定の行を更新する

  15. 15

    データテーブルを行ではなく列で複数のテーブルに分割する

  16. 16

    内部テーブルの最後の行が固定データテーブルで展開されない

  17. 17

    テーブル行を他のテーブルのデータで上書きする方法

  18. 18

    Postgresqlテーブルの同じデータが最後に隣接して発生し、最初の1行に

  19. 19

    データテーブルはrowcallbackで行の色を変更します

  20. 20

    Reactテーブルの行データをOnclickで取得する方法

  21. 21

    データテーブルの行がSalesforceで更新されない

  22. 22

    Angularでテーブルの行データを検証する方法は?

  23. 23

    データテーブル行で特定の値を見つける

  24. 24

    データテーブルの行で最小/最大日時を見つける

  25. 25

    テーブル行データの動的サムネイル

  26. 26

    データテーブル列の並べ替えの発行日を修正するにはどうすればよいですか?

  27. 27

    「メタデータロック」は、「テーブルのロック[テーブル名]書き込み」を行ったときに発生しました。

  28. 28

    C#:データテーブルのデータ行をマージする

  29. 29

    データベースへのフラスコテーブル行データ

ホットタグ

アーカイブ