。 我是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条记录,虽然它们显示在一个页面中
答案 0 :(得分:0)
我发现,当需要向DataTable添加行(从动态创建的HTML或Ajax推送)时,我发现特别有用的一个插件是DataTables网站的fnAddTr插件。您可以在API plugins page
上找到它以下是您的代码:
$.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);
该插件负责添加行,重绘表格以及更新分页!
答案 1 :(得分: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的更多信息。
第一个命令在表上添加一行而不重绘它。在此之后,新行将不会显示在表格上 第二个命令重绘表格,因此将显示新原始,但保留当前的分页设置 这对我来说很好。