jQuery DataTables插件分页允许输入页码跳转

http://blog.csdn.net/alanzyy/article/details/53896230

// START 2016-12-27添加，用于输入分页页码  
$(".gotoPage").remove();  
var pageHtml = "<span class='gotoPage' style='margin-left: 10px;'>" +  
        "<span>到第</span>" +  
        "<input type='text' style=' 40px; padding-left: 2px; padding-right: 2px; text-align: center;' class='integer' id='textGotoPage' data-prev='"+(page+1)+"' value='"+(page+1)+"'>" +  
        "<span>页</span>" +  
        "<a class='paginate_button' style=' 40px; border-right: 1px solid #e4e4e4;' id='btnGotoPage'>确认</a>" +  
        "</span>";  
$(pageHtml).appendTo(container);  
  
// 对页码输入进行限制，只能输入数字  
var sfn = function() {  
    var value = $(this).val();  
    if (value == '') {  
        $(this).data("prev", $(this).val());  
        return;  
    }  
  
    var max = $(this).attr("maxlength");  
    if (value.length > max)  
        $(this).val(value.slice(0, max));  
  
    var regex = /^d+$/;  
    if (!regex.test(value)) {  
        $(this).val($(this).data("prev"));  
    }  
  
    $(this).data("prev", $(this).val());  
};  
  
var testinput = document.createElement('input');       
if('oninput' in testinput){   
    document.getElementById("textGotoPage").addEventListener("input", sfn, false);   
} else {  
    $("#textGotoPage").onpropertychange = sfn;   
}  
  
// 为确认按钮添加点击事件，执行分页跳转  
$("#btnGotoPage").click(function(){  
    var textGotoPage = $("#textGotoPage").val();  
    if (textGotoPage == null || textGotoPage === '' || textGotoPage.match(/[^0-9]/)) {  
        // 没有输入或者输入了非数字，清除非数字  
        $("#textGotoPage").val(textGotoPage.replace(/[^d]/g, ''));  
        return;  
    }  
  
    if(parseInt(textGotoPage) > 0){  
        var oSettings = settings;  
  
        var iNewStart = oSettings._iDisplayLength * (textGotoPage - 1);  
        if (iNewStart < 0) {  
            iNewStart = 0;  
        }  
        if (iNewStart >= oSettings.fnRecordsDisplay()) {  
            iNewStart = (Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;  
        }  
  
        oSettings._iDisplayStart = iNewStart;  
        _fnDraw(oSettings);  
    }  
});  
// END

个人实践

 
/* 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).append(
                '<ul class="pagination">'+
                    '<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>'+//此处添加
                '</ul>'
            );
            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 );//此处添加

            $(nPaging).find("ul").append(
                "<li class='gotoPage' style='padding-left: 10px;'>" +
                "<label>到第</label>" +
                "<input type='text' class='integer' id='textGotoPage' data-prev='' value=''>" +
                "<label>页</label>" +
                "<a class='paginate_button' id='btnGotoPage'>确认</a>" +
                "</li>"
            );
            // 对页码输入进行限制，只能输入数字
            var sfn = function() {
                var value = $(this).val();
                if (value == '') {
                    $(this).data("prev", $(this).val());
                    return;
                }

                var max = $(this).attr("maxlength");
                if (value.length > max)
                    $(this).val(value.slice(0, max));

                var regex = /^d+$/;
                if (!regex.test(value)) {
                    $(this).val($(this).data("prev"));
                }

                var oPaging = oSettings.oInstance.fnPagingInfo();
                if(value>oPaging.iTotalPages){
                    $(this).val($(this).data("prev"));
                }

                $(this).data("prev", $(this).val());
            };

            var testinput = document.createElement('input');
            if('oninput' in testinput){
                $('#textGotoPage', nPaging).on("input", sfn);
                //document.getElementById("textGotoPage").addEventListener("input", sfn, false);
            } else {
                $("#textGotoPage").onpropertychange = sfn;
            }

            // 为确认按钮添加点击事件，执行分页跳转
            $("#btnGotoPage", nPaging).on('click', function(){
                var textGotoPage = $("#textGotoPage").val();
                if (textGotoPage == null || textGotoPage === '' || textGotoPage.match(/[^0-9]/)) {
                    // 没有输入或者输入了非数字，清除非数字
                    $("#textGotoPage").val(textGotoPage.replace(/[^d]/g, ''));
                    return;
                }

                if(parseInt(textGotoPage) > 0){
                    //var oSettings = settings;

                    var iNewStart = oSettings._iDisplayLength * (textGotoPage - 1);
                    if (iNewStart < 0) {
                        iNewStart = 0;
                    }
                    if (iNewStart >= oSettings.fnRecordsDisplay()) {
                        iNewStart = (Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
                    }

                    oSettings._iDisplayStart = iNewStart;
                    fnDraw(oSettings);
                }
            });
        },
 
        "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;
            }
            //重新赋值跳转的页码
            if(parseInt($('#textGotoPage').val())>iEnd){
                $('#textGotoPage').val(iEnd);
                $('#textGotoPage').data("prev", iEnd);
            }
 
            for ( i=0, ien=an.length ; i<ien ; i++ ) {
                // Remove the middle elements
                $('li:gt(1)', an[i]).filter(':lt(-2)').remove();//此处修改 $('li:gt(0)', an[i]).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( $('li:eq(-2)', an[i])[0] )//此处修改 .insertBefore( $('li:last', 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'); //此处修改 $('li:first', an[i]).addClass('disabled');
                } else {
                    $('li:lt(2)', an[i]).removeClass('disabled'); //此处修改$('li:first', an[i]).removeClass('disabled');
                }
 
                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
                    $('li:gt(-3)', an[i]).addClass('disabled'); //此处修改$('li:last', an[i]).addClass('disabled');
                } else {
                    $('li:gt(-3)', an[i]).removeClass('disabled'); //此处修改$('li:last', an[i]).removeClass('disabled');
                }
            }
        }
    }
} );