摘要：使用方便，快捷。但有時候用戶需求對分頁有需求，例如輸入頁數進行分頁跳轉。

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

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

        });

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":"
加載中...
",

        "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(

                "
"+

                "
"+oLang.sFirst+"
"+

                "
"+oLang.sPrevious+"
"+

                "
"+oLang.sNext+"
"+

                "
"+oLang.sLast+"
"+

                ""+

                "
"

                );

 

            //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"+j+"")

                    .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