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

Debasish

データテーブル scrollYscrollX機能を追加したいのですが、画面の解像度という調整の問題があります。一部の画面は、以下の画像のように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>

この2つのスペースをX軸とY軸から削除したいと思います。

Debasish

最後に、datatableの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" ]]                         

   });   

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

scrollX と Bootstrap モーダルでの jQuery データテーブルの問題

分類Dev

Datatables.net ScrollX | ヘッダーとデータの列幅の問題

分類Dev

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

分類Dev

AngularMaterialテーブルのデータソースの問題

分類Dev

角度 js テーブルの奇数列のデータの問題

分類Dev

テーブルへのデータ挿入のSQLの問題

分類Dev

Laravelデータテーブルの並べ替えの問題

分類Dev

データテーブルの数値形式の問題

分類Dev

Angular 2でのPrimengデータテーブルの問題?

分類Dev

Rails 6+ヤーン+データテーブルの問題

分類Dev

CCKNavDrawerリロードテーブルデータの問題

分類Dev

JavaScripthtmlデータテーブルの問題

分類Dev

メタテーブルの問題

分類Dev

インデックスごとの問題によるsqliteテーブルからのデータの取得

分類Dev

データテーブルのrlangの問題の列の合計

分類Dev

テーブルデータをCookieに保存し、そのテーブルとそのデータを取得する際の問題

分類Dev

OracleSQLでのテーブルの結合とデータの取得に関する問題

分類Dev

データベーステーブル情報の更新の問題

分類Dev

チャートデータテーブルのサイズ設定の問題

分類Dev

jqueryデータテーブルの日付の並べ替えの問題

分類Dev

Azureテーブルのデータの取得/キャストの問題

分類Dev

デフォルトのテーブルモデルの問題

分類Dev

リッチ:データテーブルの行スパンの問題

分類Dev

EntityFrameworkテーブルへのデータの追加に問題がある

分類Dev

Kenticoカスタムテーブルデータ編集の問題

分類Dev

データベーステーブルの更新に関する問題

分類Dev

データテーブルを使用して、外部データセットとデータレンダリングを使用する場合のタグの問題

分類Dev

あるテーブルから別のテーブルへのデータの追加に関する問題

分類Dev

グラフとデータテーブルの選択の間で光沢のあるデータフレームスコープの問題

Related 関連記事

  1. 1

    scrollX と Bootstrap モーダルでの jQuery データテーブルの問題

  2. 2

    Datatables.net ScrollX | ヘッダーとデータの列幅の問題

  3. 3

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

  4. 4

    AngularMaterialテーブルのデータソースの問題

  5. 5

    角度 js テーブルの奇数列のデータの問題

  6. 6

    テーブルへのデータ挿入のSQLの問題

  7. 7

    Laravelデータテーブルの並べ替えの問題

  8. 8

    データテーブルの数値形式の問題

  9. 9

    Angular 2でのPrimengデータテーブルの問題?

  10. 10

    Rails 6+ヤーン+データテーブルの問題

  11. 11

    CCKNavDrawerリロードテーブルデータの問題

  12. 12

    JavaScripthtmlデータテーブルの問題

  13. 13

    メタテーブルの問題

  14. 14

    インデックスごとの問題によるsqliteテーブルからのデータの取得

  15. 15

    データテーブルのrlangの問題の列の合計

  16. 16

    テーブルデータをCookieに保存し、そのテーブルとそのデータを取得する際の問題

  17. 17

    OracleSQLでのテーブルの結合とデータの取得に関する問題

  18. 18

    データベーステーブル情報の更新の問題

  19. 19

    チャートデータテーブルのサイズ設定の問題

  20. 20

    jqueryデータテーブルの日付の並べ替えの問題

  21. 21

    Azureテーブルのデータの取得/キャストの問題

  22. 22

    デフォルトのテーブルモデルの問題

  23. 23

    リッチ:データテーブルの行スパンの問題

  24. 24

    EntityFrameworkテーブルへのデータの追加に問題がある

  25. 25

    Kenticoカスタムテーブルデータ編集の問題

  26. 26

    データベーステーブルの更新に関する問題

  27. 27

    データテーブルを使用して、外部データセットとデータレンダリングを使用する場合のタグの問題

  28. 28

    あるテーブルから別のテーブルへのデータの追加に関する問題

  29. 29

    グラフとデータテーブルの選択の間で光沢のあるデータフレームスコープの問題

ホットタグ

アーカイブ