1

親行などの下に子行が隠されているため、テーブルソーター機能の使用に制限されています。したがって、「テーブルソーター mod」機能を使用します

dragtable.js を追加してドラッグ アンド ドロップしようとすると、現在のページだけが正しく並べ替えられます。他のページでは、ヘッダーのみがシフトされ、データとヘッダーが一致しなくなります。ページング、ドラッグ アンド ドロップ、およびテーブルソーター機能を一度に使用するための回避策はありますか。ドラッグアンドドロップして、表示されているページを含むすべてのページの列をシフトしたいだけです。

<script type="text/javascript" src="jquery-1.2.3.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.mod.js"></script>
<script type="text/javascript" src="jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="jquery.tablesorter.collapsible.js"></script>
<script type="text/javascript"  src="jquery.dataTables.js"></script>
<script type="text/javascript"  src="ColReorder.js"></script>
<script type="text/javascript"  src="dragtable.js"></script>
<script type="text/javascript">
        $(document).ready(
            function (){
                $(".tablesorter")
                    /*
                     * td.collapsible = collapse to the first table row and show +/-
                     * td.collapsible_alt = anchor to order number
                     */
                    .collapsible("td.collapsible", {
                        collapse: true
                    })
                    .tablesorter({
                    // set default sort column
                    sortList: [[4,0]],
                    // don't sort by first column
                    headers: {0: {sorter: false}}
                    // set the widgets being used - zebra stripping
                    , widgets: ['zebra']
                    , onRenderHeader: function (){
                        this.wrapInner("<span></span>");
                    }
                    , debug: false
                })
                .tablesorterPager({container: $("#pager"), positionFixed: false})
                    ;

                    // Expand/Collapse all
                        $('a#ShowButton').click(function(){
                            var linkLabel = this.innerHTML;
                            switch(linkLabel) 
                            {
                            case "Show History":
                                $("td.collapsible a").removeClass("expanded").click();
                                this.innerHTML= "Hide History"
                                break;
                            case "Hide History":
                                $("td.collapsible a").addClass("expanded").click();
                                this.innerHTML= "Show History"
                                break;
                            }
                        return false;
                        }); 

                        var oTable = $('#example').dataTable( {
                        "sDom": 'Rlfrtip'
                        } );


            }

        );
</script>
4

1 に答える 1

0

ページの変更/フィルタリングで発生するイベントを使用してみてください。

$("#example").on("draw", function() {
    someFunction();
});

そこでドラッグ アンド ドロップ機能を実行できます。別のオプションは、各ドラッグ/ドロップ後に列レイアウトを保存し、テーブルが描画を開始したときにそのレイアウトを再作成することです。使用しているプラ​​グインが正確にどのように機能するかはわかりませんが、draw イベントを使用して機能させることができると思います。

于 2012-07-11T14:45:47.490 に答える