3

問題 : dataTables javascript ライブラリを使用してデータを完全に表示します。

データは 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を試みましたが、うまくいきませんでした.これをうまく動かした例は見つかりません.

-- 推奨後の試み #2 --

残念ながら運がない

<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>

まだ運がない..

4

2 に答える 2

0

試す、

$(".dataTables_scrollBody").scrollTop(9999);

http://datatables.net/forums/discussion/19084/scroller-plugin-scroll-table-with-keypress

于 2015-02-13T18:50:13.337 に答える