Как остаться на определенной странице после выполнения удаления в таблице данных на стороне сервера jquery?

Я работаю с данными на стороне сервера jquery. Я хочу остаться на определенной странице, откуда я удалил запись. Например: предположим, что у меня есть 30 записей, а размер страницы с данными равен 10. Я выбрал вторую страницу и удалил 15 записей без записи, в это время я хочу остаться на этом втором номере. страница.

Но в моем случае каждый раз, когда я выполнял удаление, я попадал на первую страницу. Как установить номер страницы после удаления записи с определенного номера страницы?

Мой код выглядит следующим образом: -

<div class="row">
<div class="col-md-12">
    <table class="table-responsive" id="example">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Description
                </th>
                <th>
                    Class
                </th>
                <th>
                    Action
                </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <input type="hidden" name="IsDeleteCall" id="IsDeleteCall" value="false" />
    <input type="hidden" name="IdToDelete" id="IdToDelete" value=" " />
    <input type="hidden" name="displayStartIndex" id="hdndisplayStartIndex" value=" " />
</div>

<script type="text/javascript">
    var table;
    $(document).ready(function () {
        table = $('#example').DataTable({
            "bJQueryUI": true,
            "bSortClasses": false,
            "bSortable": true,
            "aaSorting": [[0, 'desc']],
            "bAutoWidth": true,
            "bInfo": true,
            //"sScrollX": "100%",
            "bScrollCollapse": true,
            "sPaginationType": "full_numbers",
            "bRetrieve": true,
            "bServerSide": true,
            "sAjaxSource": "/Home/GetCustomers/",
            "iDisplayStart": 10,
            "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
                var colCount = aoData[1].value;
                var sSearch = fnGetKey(aoData, "sSearch");
                var sSort = fnGetKey(aoData, "iSortCol_0");
                var sDir = fnGetKey(aoData, "sSortDir_0");

                var jsonData = {
                    sSortDir: sDir,
                    sSort: sSort,
                    sSearch: sSearch,
                    sEcho: aoData[0].value,
                    iDisplayLength: aoData[4].value,
                    iDisplayStart: $('#hdndisplayStartIndex').val() == 0 ? aoData[3].value : $('#hdndisplayStartIndex').val(),
                    // iDisplayStart: aoData[3].value,
                    IsDeleteCall: $('#IsDeleteCall').val(),
                    IdToDelete: $('#IdToDelete').val()
                }

                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": jsonData,
                    "success": fnCallback
                });
            },
            "fnInitComplete": function () {
            }

        });




    });

    function fnGetKey(aoData, sKey) {
        for (var i = 0, iLen = aoData.length; i < iLen; i++) {
            if (aoData[i].name == sKey) {
                return aoData[i].value;
            }
        }
        return null;
    }

    function deleteRow(e) {

        var id = $(e.target).attr('id');
        $('#IsDeleteCall').val(true);
        $('#IdToDelete').val(id);
        $(e.target).parent().parent().attr('userId', id);
        var displayStart = $(e.target).attr('displayStart');
        $('#hdndisplayStartIndex').val(displayStart);
        table.row($('tr[userid=' + id + ']')).remove().draw(true);
        $('#hdndisplayStartIndex').val(0);
        // table.row($(e.target).parent().parent()).remove().draw(false);
    }

</script>

person user3792844    schedule 11.07.2014    source источник
comment
Можете ли вы отправить запрос AJAX для удаления нужных записей?   -  person Lajos Arpad    schedule 11.07.2014
comment
да, конечно, позвольте мне вставить мой код.   -  person user3792844    schedule 11.07.2014


Ответы (3)


Для тех, кто все еще находит этот вопрос, DataTables 1.10.8 (и выше) предоставляет отличные возможности для метода .Draw(), которые позволяют вам контролировать то, что происходит с разбиением по страницам и сортировкой после перерисовки таблицы.

Чтобы остаться на той же странице и обновить сортировку/фильтрацию, код, который вы ищете:

$('#myTable').DataTable.draw('full-hold');
//or
$('#myTable').DataTable.draw(false);

Краткий справочник по аргументам draw():

'полный сброс' или true (по умолчанию) — порядок и поиск будут пересчитаны, а строки перерисованы в их новых позициях. Пейджинг будет сброшен обратно на первую страницу.

'full-hold' или false — порядок и поиск будут пересчитаны, а строки перерисованы в новых позициях. Пейджинг не будет сброшен - т.е. текущая страница все равно будет отображаться.

'страница' - порядок и поиск не будут обновлены, а позиция страницы останется прежней. Это полезно для пейджинга (например, page()), когда данные не менялись между отрисовками.

Ссылка на документацию DataTables: https://datatables.net/reference/api/draw()

person JTech    schedule 04.08.2016


Это помогло мне.

"sDom": "<'col-xs-12<'row'<'col-sm-4 col-xs-12'<'pull-left'f>><'col-sm-8 button col-xs-12'>>tr<'col-xs-12'<'row'<'col-sm-4 col-xs-12'l><'col-sm-4 col-xs-12'i><'col-sm-4 col-xs-12'p><'clearfix'>>>>>",
            "sAjaxSource": $("#user_table").attr('action'),  
            "bStateSave": true, // presumably saves state for reloads
person Francy Thacker    schedule 27.04.2017