5

サーバーからコンテンツをロードする Web ページで DataTables を使用していますServer-side processingに、rowReordering jquery-datatables-row-reordering機能を追加したいと考えています。以前やってみた方法です。

  $('.data_table').dataTable( {
                "sPaginationType": "bootstrap",
                "oLanguage": {
                     "sLengthMenu": "Display <select>'+'<option value=\"10\">10</option>'+'<option value=\"20\">20</option>'+'<option value=\"30\">30</option>'+'<option value=\"40\">40</option>'+'<option value=\"50\">50</option>'+'<option value=\"-1\">All</option>'+'</select> records"
                },
                "processing": true,
                "serverSide": true,
                "ajax": dataUrl
            } ).rowReordering({
                sURL:sortUrl, // Let the server page know if order is changed
                sRequestType: "GET",
                fnAlert: function(message) { 
                    modalError("Server Error",message,null); // Error message if an server error occured during the process
                }
            });

$.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );

これにより、実際にはデータのドラッグ アンド ドロップが可能になりますが、それを行った後にサーバー通知は送信されず、ドロップされた行はドロップされた場所に留まります (以前の場所に戻ります)。

以下もやってみました。

$table = $('.data_table').dataTable( {
            "sPaginationType": "bootstrap",
            "oLanguage": {
                 "sLengthMenu": "Display <select>'+'<option value=\"10\">10</option>'+'<option value=\"20\">20</option>'+'<option value=\"30\">30</option>'+'<option value=\"40\">40</option>'+'<option value=\"50\">50</option>'+'<option value=\"-1\">All</option>'+'</select> records"
            },
            "processing": true,
            "serverSide": true,
            "ajax": dataUrl,
            "fnInitComplete": function(oSettings, json) {
                $table.rowReordering({
                    sURL:sortUrl, // Let the server page know if order is changed
                    sRequestType: "GET",
                    fnAlert: function(message) { 
                        modalError("Server Error",message,null); // Error message if an server error occurred during the process
                    }
                });
            }
        } );
        $.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );

これでは、コールバックrowRedordering内で呼び出していfnInitCompleteます。しかし、これは前のものと同じ結果をもたらします。ドラッグアンドドロップを行いますが、サーバー通知を送信しません（また、行はドロップされた場所に残りません。以前の場所に戻ります）。

サーバー側で処理されたデータを追加してテーブルを初期化する前に、並べ替えは完全に機能しました。それで、私はここで何が間違っていますか？

4

2 に答える 2

0

以下のリンクを試してください

http://www.codeproject.com/Articles/331986/Table-Row-Drag-and-Drop-in-ASP-NET-MVC-jQuery-Data

私にとってはその仕事です。私はmvcプロジェクトに実装し、完全に機能しています。

于 2015-01-23T07:02:31.380 に答える