unwanted pagination in datatables after inserting a new record

Question

. I am new to jquery datatables and facing problems with pagination. when I insert a new tuple then an extra page is being created in the table.

for example : suppose I have 1 record inserted, it initially shows 1 page at the bottom and now if I insert second one then other page is being created. How can I over come this problem

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

sir and I have tables like

                            <?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; ?>

So, I am getting an extra page each time the for loop occurs ... so i am getting 10 pages for 10 records although they are being displayed in one page

Answer 1

One plugin I've found particularly helpful when needing to add rows to a DataTable (either from dynamically created HTML, or an Ajax push) is the fnAddTr plugin from the DataTables website. You can find it on their API plugins page

Here is the code for you:

$.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));

Use it like this:

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);

The plugin takes care of adding the row, redrawing the table, and updating the pagination!

Answer 2

I was facing the same problem using jQuery Datatables. I was inserting a row using javascript and on redrawing the pagination was reseting. The solution i found for this were a new function with the name fnStandingRedraw . I added the above code to be able to use this function,

$.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);
};

After that i execute the following commands,

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

where,
theTable : is the datatable variable (var theTable = $('#example').dataTable();).
reply : is the information i add to a row of mine datatable. More on http://datatables.net/api#fnAddData .

The first command adds a row on the table without redrawing it. After this, the new row will not being displayed on the table.
The second command redraws the table, so the new raw will appear, but retain the current pagination settings.
This worked fine for me.