dataTable page length change issue

Question

I am using dataTable 1.10. Everything works well but I got following situation. I think that dataTable not support this behaviour.

By default I set the page length be 10, then I click Next page, table display items from 11 to 20. NOW I change the page length to 25, table display item from 11 to 35. This is not the thing I suppose to have. Whenever I change the page length, I wish to display from 1st item.

Is it possible to handle the Page Length change event in dataTable and customize that function?

Thank for reading. Hope to receive help from you.

var tableHdr = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="alertsList">' 
     + '<thead><tr>'
     + '<th>Level</th><th>Monitor Name</th><th>Alert Message</th><th>Raised At</th><th>Action</th>'
     + '</tr></thead></table>';

$('#overview_content').html( tableHdr );

//global variable
oTable = $('#alertsList').dataTable( {
"pagingType": "full_numbers",
"bJQueryUI": true,
"aaData": alertsData,
"bAutoWidth": false,
"aaSorting" : [[3, "desc"]],
"aoColumns": [
   { "sTitle": "Level", "mData":"alert_level", "sWidth":"10%" },
   { "sTitle": "Monitor Name", "mData":"monitor_name", "sWidth":"20%" },
   { "sTitle": "Alert Message", "mData":"alert_message", "sWidth":"30%" },
   { "sTitle": "Raised At", "mData":"triggered_datetime", "sWidth":"20%"},
   { "sTitle": "Action", "mData":"id", "bSortable":false, "bSearchable":false, "sWidth":"20%"}
],
"columnDefs": [  
{
    "targets": 1,
    "data":"monitor_name",
    "render": function ( data, type, full, meta ) {
            return escapeHTML(data);
        }
},
{
    "targets": 2,
    "data":"alert_message",
    "render": function ( data, type, full, meta ) {
            if (data == null || typeof data == 'undefined')
            {
                return "";
            }
            var description = data.length > 30? data.substr(0,30) +  '...': data;
            return escapeHTML(description);
        }
},
{
    "targets": 4,
    "render": function ( data, type, full, meta ) {
        return ("<span style='cursor:pointer' id='dismiss_alert_" + full.id + "' class='dismiss'>Dismiss</span> | " +
                "<span style='cursor:pointer' id='delete_alert_" + full.id + "' class='delete'>Delete</span> | " +
                "<span style='cursor:pointer' id='details_alert_" + full.id + "' class='details'>Details</span>");
        }
} ]
} );

Answer 1

Try this, I found it from datatable forum.

var t = $('#table-id').dataTable();

$('#length li').click(function () {
    redrawWithNewCount(t, this.id);
});

function redrawWithNewCount(t, row_count) {
    //Lifted more or less right out of the DataTables source
    var oSettings = t.fnSettings();

    oSettings._iDisplayLength = parseInt(row_count, 10);
    t._fnCalculateEnd(oSettings);

    /* If we have space to show extra rows (backing up from the end point - then do so */
    if (oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay()) {
        oSettings._iDisplayStart = oSettings.fnDisplayEnd() - oSettings._iDisplayLength;
        if (oSettings._iDisplayStart < 0) {
            oSettings._iDisplayStart = 0;
        }
    }

    if (oSettings._iDisplayLength == -1) {
        oSettings._iDisplayStart = 0;
    }

    t.fnDraw(oSettings);

    return t;
}