Question

我正在使用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>

Answer 1

对于仍然发现此问题的任何人，DataTables 1.10.8（及更高版本）为.Draw（）方法提供了很好的选项，允许您控制表重绘后分页和排序的内容。

要保持同一页面并更新排序/过滤，您要查找的代码是：

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

对draw（）参数的快速参考：

'完全重置'或为真（默认） - 将重新计算排序和搜索，并在新位置重新绘制行。分页将重置回第一页。

'完全保留'或错误 - 将重新计算排序和搜索，并在新位置重新绘制行。分页不会被重置 - 即仍会显示当前页面。

'page' - 订阅和搜索不会更新，并且分页位置保持在原位。当在绘制之间没有改变数据时，这对于分页（即page（））很有用。

对DataTables文档的引用： https://datatables.net/reference/api/draw()

Answer 2

最佳解决方案here

我在我的代码中使用了这个。没有必要做任何特别的事情，只需在fndraw函数之前和之后添加此代码，这就是工作代码。

/* when updating the table */
bResetDisplay = false; /* override default behaviour */
oTable.fnDraw();
bResetDisplay = true; /* restore default behaviour */

并且还为表格添加以下参数：特别是 bStateSave

"bProcessing": true, // shows 'processing' label
"bServerSide": true,
"sAjaxSource": "/cds/",
"bStateSave": true, // presumably saves state for reloads

Answer 3

这帮助了我。

"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

在jquery服务器端数据表中执行删除后如何保持特定页面？

3 个答案: