1

. 我是 jquery 数据表的新手，并且面临分页问题。当我插入一个新元组时，会在表中创建一个额外的页面。

例如：假设我插入了 1 条记录，它最初在底部显示 1 页，现在如果我插入第二条，则正在创建其他页面。我怎样才能解决这个问题

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $('#datatables').dataTable({
        "sPaginationType":"full_numbers",
        "aaSorting":[[2, "desc"]],
        "bJQueryUI":true
    });
})
</script>

先生，我有这样的桌子

                            <?php foreach($response->products as $row): ?>


            <tr>
            <td><?=$row->id;?></td>
            <td><?=$row->name;?></td>
            <td><?=$row->amount;?></td>
            <td><?=$row->type;?></td>
            <td><?=$row->description;?></td>
            <td><?=anchor('product/update/'.$row->id.'/','Edit');?></td>
            <td><?=anchor('product/delete/'.$row->id.'/','Delete');?></td>
            </tr>
                            <?php endforeach; ?>

所以，每次 for 循环发生时我都会得到一个额外的页面......所以我得到 10 个页面的 10 条记录，尽管它们显示在一页中

4

2 回答 2

0

我在使用 jQuery Datatables 时遇到了同样的问题。我正在使用 javascript 插入一行，并且在重新绘制分页时正在重置。我为此找到的解决方案是一个名为 fnStandingRedraw的新函数。我添加了上面的代码以便能够使用这个功能，

$.fn.dataTableExt.oApi.fnStandingRedraw = function (oSettings) {
    if (oSettings.oFeatures.bServerSide === false) {
        var before = oSettings._iDisplayStart;

        oSettings.oApi._fnReDraw(oSettings);

        // iDisplayStart has been reset to zero - so lets change it back
        oSettings._iDisplayStart = before;
        oSettings.oApi._fnCalculateEnd(oSettings);
    }

    // draw the 'current' page
    oSettings.oApi._fnDraw(oSettings);
};

之后我执行以下命令，

theTable.fnAddData([reply], false);
theTable.fnStandingRedraw();

其中，
theTable : 是数据表变量 (var theTable = $('#example').dataTable();)。
回复：是我添加到我的数据表行中的信息。更多关于http://datatables.net/api#fnAddData。

第一个命令在表格上添加一行而不重绘它。此后，新行将不会显示在表格上。
第二个命令重绘表格，因此会出现新的原始数据，但保留当前的分页设置。
这对我来说很好。

于 2013-09-23T20:52:09.820 回答
0

当需要将行添加到 DataTable（来自动态创建的 HTML 或 Ajax 推送）时，我发现一个特别有用的插件是来自 DataTables 网站的 fnAddTr 插件。您可以在他们的API 插件页面上找到它

这是给你的代码：

$.fn.dataTableExt.oApi.fnAddTr = function ( oSettings, nTr, bRedraw ) {
    if ( typeof bRedraw == 'undefined' )
    {
        bRedraw = true;
    }

    var nTds = nTr.getElementsByTagName('td');
    if ( nTds.length != oSettings.aoColumns.length )
    {
        alert( 'Warning: not adding new TR - columns and TD elements must match' );
        return;
    }

    var aData = [];
    for ( var i=0 ; i < nTds.length ; i++ )
    {
        aData.push( nTds[i].innerHTML );
    }

    /* Add the data and then replace DataTable's generated TR with ours */
    var iIndex = this.oApi._fnAddData( oSettings, aData );
    nTr._DT_RowIndex = iIndex;
    oSettings.aoData[ iIndex ].nTr = nTr;

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();

    if ( bRedraw )
    {
        this.oApi._fnReDraw( oSettings );
    }
    };
}(jQuery));

像这样使用它：

var oRecords = $(".data-table").dataTable({ ... DataTables Initialization ... });

... code ...

var myTr = $("<tr><td>Field1</td><td>Field2</td></tr>")[0]; // This tr can come from anywhere, but it's very important that you either get the true DOM node by getting index zero, or by chaining .get();

oRecords.fnAddTr(myTr);

该插件负责添加行、重绘表格和更新分页！

于 2013-06-06T18:21:12.030 回答