datatables增長跳轉指定頁功能, datatable自定義分頁

DataTable使用方便，快捷。但有時候用戶需求對分頁有需求，例如輸入頁數進行分頁跳轉。
這樣就須要擴展功能了，datatable也支持自定義擴展，下面以使用DataTable bootstrap分頁爲例

1. 初始化DataTable

var $table = $('#listTable');



var listTable = $table.DataTable({

            language: { url: path + '/resources/js/bootstrap/dtChinese.json' },

            searching: false, //搜索欄

            ordering: true, //排序

            scrollX: true,

            scrollY: scrollY,   //表格滾動區高度

            columns: columns,

            serverSide: true, //打開後臺分頁 

            processing: true, //打開數據加載時的等待效果

            lengthChange: false, //禁用每頁顯示的記錄數

            sPaginationType: "bootstrap", //bootstrap / full_numbers

            // lengthMenu: [

            //     [20, 50, 100, -1],

            //     [20, 50, 100, "All"]

            // ],

            pageLength: 20,

            ajax: path + '/searchBase?name=' + sqlStr + '&type=getSqlValues&dataBase=' + opt.dataBase

        });

2. 擴展功能

DataTable自定義分頁（bootstrap分頁）擴展代碼以下

/* Set the defaults for DataTables initialisation */

$.extend( true, $.fn.dataTable.defaults, {

    // "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",

    "sPaginationType": "bootstrap",

    "oLanguage": {

        "sSearch": "快速搜索:",

        "bAutoWidth": true,

        "sLengthMenu": "每頁顯示 _MENU_ 條記錄",

        "sZeroRecords": "Nothing found - 沒有記錄",

        "sInfo": "_START_ 到 _END_ 條,共 _TOTAL_ 條",

        "sInfoEmpty": "顯示0條記錄",

        "sInfoFiltered": "(從 _MAX_ 條中過濾)",

        // "sProcessing":"<div style=''><img src='../static/img/loader.gif'><span>加載中...</span></div>",

        "oPaginate": {

            "sPrevious": "",

            "sNext":     "",

            "sLast":     ">>",

            "sFirst":    "<<"

        }

    }

} );

 

 

/* Default class modification */

$.extend( $.fn.dataTableExt.oStdClasses, {

    "sWrapper": "dataTables_wrapper form-inline"

} );

 

 

/* API method to get paging information */

$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )

{

    return {

        "iStart":         oSettings._iDisplayStart,

        "iEnd":           oSettings.fnDisplayEnd(),

        "iLength":        oSettings._iDisplayLength,

        "iTotal":         oSettings.fnRecordsTotal(),

        "iFilteredTotal": oSettings.fnRecordsDisplay(),

        "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),

        "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )

    };

};

 

     

 

 

/* Bootstrap style pagination control */

$.extend( $.fn.dataTableExt.oPagination, {

    "bootstrap": {

        "fnInit": function( oSettings, nPaging, fnDraw ) {

            var oLang = oSettings.oLanguage.oPaginate;

            var fnClickHandler = function ( e ) {

                e.preventDefault();

                if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {

                    fnDraw( oSettings );

                }

            };

 

            $(nPaging).addClass('pagination').append(

                '<ul>'+

                '<li class="first disabled"><a href="#">'+oLang.sFirst+'</a></li>'+

                '<li class="prev disabled"><a href="#">'+oLang.sPrevious+'</a></li>'+

                '<li class="next disabled"><a href="#">'+oLang.sNext+'</a></li>'+

                '<li class="last disabled"><a href="#">'+oLang.sLast+'</a></li>'+

                '<input type="text" id="redirect" class="redirect">'+

                '</ul>'

                );

 

            //datatables分頁跳轉

            $(nPaging).find(".redirect").keyup(function(e){

                var ipage = parseInt($(this).val());

                var oPaging = oSettings.oInstance.fnPagingInfo();

                var timer = null;

                if(isNaN(ipage) || ipage<1){

                    ipage = 1;

                }else if(ipage>oPaging.iTotalPages){

                    ipage=oPaging.iTotalPages;

                }

                $(this).val(ipage);

                ipage--;

                oSettings._iDisplayStart = ipage * oPaging.iLength;

                

                clearTimeout(timer);

                timer = setTimeout(function(){

                    fnDraw( oSettings );

                },600);

            });

 

            var els = $('a', nPaging);

            $(els[0]).bind( 'click.DT', {

                action: "first"

            }, fnClickHandler );

            $(els[1]).bind( 'click.DT', {

                action: "previous"

            }, fnClickHandler );

            $(els[2]).bind( 'click.DT', {

                action: "next"

            }, fnClickHandler );

            $(els[3]).bind( 'click.DT', {

                action: "last"

            }, fnClickHandler );

        },

 

        "fnUpdate": function ( oSettings, fnDraw ) {

            var iListLength = 5;

            var oPaging = oSettings.oInstance.fnPagingInfo();

            var an = oSettings.aanFeatures.p;

            var i, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

 

            if ( oPaging.iTotalPages < iListLength) {

                iStart = 1;

                iEnd = oPaging.iTotalPages;

            }

            else if ( oPaging.iPage <= iHalf ) {

                iStart = 1;

                iEnd = iListLength;

            } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {

                iStart = oPaging.iTotalPages - iListLength + 1;

                iEnd = oPaging.iTotalPages;

            } else {

                iStart = oPaging.iPage - iHalf + 1;

                iEnd = iStart + iListLength - 1;

            }

 

            for ( i=0, ien=an.length ; i<ien ; i++ ) {

                // Remove the middle elements

                ($('li:gt(1)', an[i]).filter(':not(:last)')).filter(':not(:last)').remove();

 

                // Add the new list items and their event handlers

                for ( j=iStart ; j<=iEnd ; j++ ) {

                    sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';

                    $('<li '+sClass+'><a href="#">'+j+'</a></li>')

                    .insertBefore( $('.next', an[i])[0] )

                    .bind('click', function (e) {

                        e.preventDefault();

                        oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;

                        fnDraw( oSettings );

                    } );

                }

 

                // Add / remove disabled classes from the static elements

                if ( oPaging.iPage === 0 ) {

                    $('li:lt(2)', an[i]).addClass('disabled');

                } else {

                    $('li:lt(2)', an[i]).removeClass('disabled');

                }

 

                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {

                    $('.next', an[i]).addClass('disabled');

                    $('li:last', an[i]).addClass('disabled');

                } else {

                    $('.next', an[i]).removeClass('disabled');

                    $('li:last', an[i]).removeClass('disabled');

                }

            }

        }

    }

} );

 

 

/*

 * TableTools Bootstrap compatibility

 * Required TableTools 2.1+

 */

if ( $.fn.DataTable.TableTools ) {

    // Set the classes that TableTools uses to something suitable for Bootstrap

    $.extend( true, $.fn.DataTable.TableTools.classes, {

        "container": "DTTT btn-group",

        "buttons": {

            "normal": "btn",

            "disabled": "disabled"

        },

        "collection": {

            "container": "DTTT_dropdown dropdown-menu",

            "buttons": {

                "normal": "",

                "disabled": "disabled"

            }

        },

        "print": {

            "info": "DTTT_print_info modal"

        },

        "select": {

            "row": "active"

        }

    } );

 

    // Have the collection use a bootstrap compatible dropdown

    $.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {

        "collection": {

            "container": "ul",

            "button": "li",

            "liner": "a"

        }

    } );

}

分頁代碼 附件下載: dataTables.plugin.bootstrap