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