Question

我使用jquery datatable创建了一个表，并使用ajax从服务器端获取表的数据。这是我在js中的代码：

var runDataTable_example1 = function() {
                    var oTable = $('#sample_1').dataTable({
            "aoColumnDefs" : [{
                "aTargets" : [0]
            }],
            "oLanguage" : {
                "sLengthMenu" : "Show _MENU_ Rows",


            },
            "aaSorting" : [[0, 'desc']],
            "aLengthMenu" : [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "iDisplayLength" : 10,
                        "bFilter": false,
                        "pagingType": "full_numbers",
                        "processing": true,
                        "serverSide": true,
                        "ajax": "myjobData.php",
        });

        //$('#sample_1_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
        // modify table search input
        $('#sample_1_wrapper .dataTables_length select').addClass("m-wrap small");
        // modify table per page dropdown
        $('#sample_1_wrapper .dataTables_length select').select2();
        // initialize select2 dropdown
        $('#sample_1_column_toggler input[type="checkbox"]').change(function() {
            /* Get the DataTables object again - this is not a recreation, just a get of the object */
            var iCol = parseInt($(this).attr("data-column"));
            var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
            oTable.fnSetColumnVis(iCol, ( bVis ? false : true));
        });
    };

我设置了10秒的间隔，以便使用此代码刷新表：

window.setInterval(function(){
   var oTable = $("#sample_1").dataTable();
   oTable.fnClearTable();

},10000);

但如果我是第3页，10秒后数据刷新并跳转到第1页。我怎样才能避免它跳转到第1页并在刷新后留在第3页。

PHP代码只是一个包含所有标题的简单表格标记：

<table class="table table-striped table-bordered table-hover table-full-width" id="sample_1">
                                            <thead>
                                                <tr>
                                                    <th width='10%'>Column_0</th>
                                                    <th width='20%'>Column_1</th>
                                                    <th width='20%'>Column_2</th>
                                                    <th width='10%'>Column_3</th>
                                                    <th width='20%'>Column_4</th>
                                                    <th width='10%'>Column_5</th>
                                                    <th class="hidden-xs" width='10%'>Column_6</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>

Answer 1

您必须保存状态才能保留在同一页面上。使用"bStateSave": true。

尝试这样的事情

var oTable = $('#sample_1').dataTable({
 "bStateSave": true,
 "aoColumnDefs" : [{
            "aTargets" : [0]
        }],
        "oLanguage" : {
            "sLengthMenu" : "Show _MENU_ Rows",


        },
        "aaSorting" : [[0, 'desc']],
        "aLengthMenu" : [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"] // change per page values here
        ],
        // set the initial value
        "iDisplayLength" : 10,
                    "bFilter": false,
                    "pagingType": "full_numbers",
                    "processing": true,
                    "serverSide": true,
                    "ajax": "myjobData.php",
    });

如果在其他页面中使用fnClearTable重绘表，则分页跳转到第一页

1 个答案: