2012-11-21 2 views
3

문제점 : dataTables javascript 라이브러리를 사용하여 데이터를 완벽하게 표시합니다.Datatables에서 테이블을로드하고로드시 자동으로 마지막 레코드로 스크롤하는 방법

데이터는 PHP/MySQL을 통해 검색 한 후 테이블이 그려지고 같은 테이블을 통해 부호 사이클 : dataTables위한

JAVA 코드 -

<script> 
$(document).ready(function() { 
    $("#PayMasterResults").dataTable({ 
    "sPaginationType": "full_numbers", 
    "bPaginate": false, 
    "bJQueryUI" : true, 
    "sScrollY": "215", 
    "bLengthChange": true, 
    "bFilter": true, 
    "bSort": false, 
    "bInfo": true, 
    "bAutoWidth": false, 
    "sDom": \'<"H"lTfr>t<"F"ip>\', 
    "oTableTools": { 
      "sSwfPath": "lib/copy_csv_xls_pdf.swf", 
      "sRowSelect": "multi", 
      "aButtons": [ 
        "print", 
        { 
          "sExtends": "copy", 
          "sButtonText": "Copy to clipboard" 
        }, 
        { 
          "sExtends": "csv", 
          "sButtonText": "Export CSV" 
        }, 
        { 
          "sExtends": "xls", 
          "sButtonText": "Save for Excel" 
        }, 
        { 
          "sExtends": "pdf", 
          "sButtonText": "Save to PDF", 
          "sPdfOrientation": "landscape", 
        } 
      ] 
    } 
}); 
}); 
</script> 

HTML/PHP -

  <div class="table"> 
      <table class="display" id="PayMasterResults"> 
        <thead> 
          <tr> 
          <th class="" width="600px"><b>Entry Description</b></th> 
          <th class=""><b>Entry Timestamp</b></th> 
          <th class=""><b>Debit/Credit</b></th> 
          <th class=""><b>Running Balance</b></th> 
          </tr> 
        </thead> 
        <tbody> 
      '; 
      for($x=0; $x<$xmldata->Ledger->count(); $x++) { 
        echo ' 
          <tr class="gradeB"> 
          <td><a href="#" onclick="loadPMLedgerDetail(\''.$xmldata->Ledger[$x]->attributes()->ID.'\',\''.$_POST['ID'].'\');">'.$xmldata->Ledger[$x]->Description.'</a></td> 
          <td>'.$xmldata->Ledger[$x]->Stamp.'</td> 
          <Td>'.$xmldata->Ledger[$x]->Amount.'</td> 
          <td>'.$xmldata->Ledger[$x]->Balance.'</td> 
          </tr> 
        '; 
      } 
      echo ' 
        </tbody> 
      </table> 

      </div> <!-- End Table --> 

-

문제는 테이블에 현재 모든 데이터가 표시됩니다. 사용자가 원하는 경우 사용자가 아래로 스크롤 할 수 있으며 테이블 아래쪽에 스크롤 막대가 있어야합니다. 그래서 사용자는 위로 스크롤 할 수 있지만 아래로 스크롤 할 수는 없습니다.

jquery scrollTop을 시도했지만 작동하지 않아 succesflly이 작업을 수행하는 예제를 찾을 수 없습니다.

- 시도 # 2 추천 후 - 당신이 Scroller extra를 사용하는 경우

운 불행하게도 아직

<script> 
$(document).ready(function() { 
var myTable = $("#PMLedgerDetailsTable").dataTable({ 
    "sPaginationType": "full_numbers", 
    "aaSorting": [[ 0, "asc" ]], 
    "bPaginate": true, 
    "bJQueryUI" : true, 
    "sScrollY": "215", 
    "bLengthChange": true, 
    "bFilter": true, 
    "bSort": false, 
    "bInfo": true, 
    "bAutoWidth": false, 
    "sDom": \'<"H"lTfr>t<"F"ip>S\', 
    "oTableTools": { 
      "sSwfPath": "lib/copy_csv_xls_pdf.swf", 
      "sRowSelect": "multi", 
      "aButtons": [ 
        "print", 
        { 
          "sExtends": "copy", 
          "sButtonText": "Copy to clipboard" 
        }, 
        { 
          "sExtends": "csv", 
          "sButtonText": "Export CSV" 
        }, 
        { 
          "sExtends": "xls", 
          "sButtonText": "Save for Excel" 
        }, 
        { 
          "sExtends": "pdf", 
          "sButtonText": "Save to PDF", 
          "sPdfOrientation": "landscape", 
        } 
      ] 
    }, 
    "fnInitComplete" : function() { 
      myTable.fnSettings().oScroller.fnScrollToRow(10000); 
    } 
}); 

}); 

</script> 

행운

는 ..

답변

1

, 당신은 당신의 초기화에 다음을 호출 할 수 없습니다 기능 :

"fnInitComplete": function() { 

    // Make sure you have your table stored to a variable 
    // (here, I used oTable). Then tell the Scroller to 
    // scroll to an arbitrary large number beyond the 
    // number of rows in your table. 

    oTable.fnSettings().oScroller.fnScrollToRow(100000); 

    // Alternatively, if you know the number of rows in 
    // your table at runtime, you could just feed in that 
    // value to the Scroller. 
} 

행운을 빈다.

+0

행운이, 내가 당신의 코멘트 – user1648968

+0

아하 후 시도 것을 보여주기 위해 원래의 질문을 편집 한! 신참 오류, 나는 dataTables.scroller.min.js를 포함하지 않았다 !!! 일단 코드가 포함되면 – user1648968

관련 문제