DataTables rowReordering после завершения обработки serverSide

Я использую DataTables на своей веб-странице, где он загружает контент с сервера. Обработка на стороне сервера и я хочу добавить к нему функциональность rowReordering https://code.google.com/p/jquery-datatables-row-reordering/wiki/Index. Вот как я это пробовал раньше.

  $('.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 Перезвоните. Но это дает тот же результат, что и предыдущий. Как и в случае с перетаскиванием, но оно не отправляет серверное уведомление (а также строка не остается там, где ее отбрасывают. Она возвращается туда, где она была раньше).

Переупорядочение отлично работало до того, как я добавил обработанные сервером данные для инициализации таблицы. Итак, что я здесь делаю не так?

Источник

2 ответа

Решение

После поиска во всем Интернете для решения, я наконец сделал это сам. Итак, мое рабочее решение для DataTable 1.10.12, новая версия rowReorder, serverSide true и переупорядочение без перезагрузки таблицы

Документация: https://datatables.net/extensions/rowreorder/examples/initialisation/defaults.html

//ввиду

<table id="my_table" class="table dTable">
<thead>
    <th>Position</th>
    <th>Name</th>
</thead>
<tbody></tbody>
</table>

<script type="text/javascript">
var my_sortable = $('#my_table').DataTable({
"processing": true,
"serverSide": true,
"rowReorder": {
    "update": false,
},
....
"ajaxSource": "Ajax_where_you_fetch_data_from_database.php"

});

my_sortable.on('row-reorder', function ( e, diff, edit ) {
    var ids = new Array();
    for (var i = 1; i < e.target.rows.length; i++) {
        var b =e.target.rows[i].cells[0].innerHTML.split('data-rowid="');
        var b2 = b[1].split('"></div>')
        ids.push(b2[0]);
    }
    my_sortable.ajax.url("Ajax_where_you_save_new_order.php?sort="+ encodeURIComponent(ids)).load();
});
</script>

// Ajax_where_you_fetch_data_from_database.php

$data = [];
$i = 1;
    foreach ($rows as $key => &$row) {
        $data[$key]['select_this'] = '<span class="drag_me">' . $i++ . '</span><div data-rowid="' . $row['id'] . '"></div>';
        ....
    }
return $data;

// Ajax_where_you_save_new_order.php

if (empty($order = explode(',', $_GET['sort']))) {
    die('malformed order');
}
$new_order = [];
foreach ($order as $position => &$row_id) {
    $new_order[intval($row_id)] = $position;
}

// save new order in database
$rows_model->sortRows($new_order);

return Ajax_where_you_fetch_data_from_database.php content

// rows_model

/**
 * @param array $order
 */
public function sortRows(array $order)
{
    foreach ($order as $row_id => $priority) {
        $this->update(['priority' => $priority],
            ['id = ?' => $row_id]
        );
    }
}
Источник

Попробуйте ссылку ниже

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

Это работа для меня. Я реализовал в проекте MVC, и он работает отлично.

Источник
Другие вопросы по тегам