dataTable页面长度更改问题

Question

我正在使用dataTable 1.10。 一切正常，但出现以下情况。 我认为dataTable不支持此行为。

默认情况下，我将页面长度设置为10，然后单击“下一页，表显示项从11更改为20”。现在，我将页面长度更改为25，将表显示项从11更改为35。这不是我想拥有的东西。 每当我更改页面长度时，我都希望从第一项开始显示。

是否可以处理dataTable中的页面长度更改事件并自定义该功能？

感谢阅读。 希望能得到您的帮助。

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

试试看，我是从datatable论坛找到的。

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