如何在 datables中加入可输入的分页样式

来源：互联网发布：上海盘石软件电话编辑：程序博客网时间：2024/05/20 00:48

最近写一个datatables的分页功能想把他改成可输入第几页然后goto进入那一页找到了方法，分享一下：

这里要用到extjs的插件在datables里这个插件的代码大概如下：

$.fn.dataTableExt.oApi.fnExtStylePagingInfo = function ( oSettings ){    return {        "iStart":         oSettings._iDisplayStart,        "iEnd":           oSettings.fnDisplayEnd(),        "iLength":        oSettings._iDisplayLength,        "iTotal":         oSettings.fnRecordsTotal(),        "iFilteredTotal": oSettings.fnRecordsDisplay(),        "iPage":          oSettings._iDisplayLength === -1 ?            0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),        "iTotalPages":    oSettings._iDisplayLength === -1 ?            0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )    };}; $.fn.dataTableExt.oPagination.extStyle = {          "fnInit": function (oSettings, nPaging, fnCallbackDraw) {                 var oPaging = oSettings.oInstance.fnExtStylePagingInfo();         nFirst = $('<span/>', { 'class': 'paginate_button first' , text : "<<" });        nPrevious = $('<span/>', { 'class': 'paginate_button previous' , text : "<" });        nNext = $('<span/>', { 'class': 'paginate_button next' , text : ">" });        nLast = $('<span/>', { 'class': 'paginate_button last' , text : ">>" });        nPageTxt = $("<span />", { text: 'Page' });        nPageNumBox = $('<input />', { type: 'text', val: 1, 'class': 'pageinate_input_box' });        nPageOf = $('<span />', { text: '/' });        nTotalPages = $('<span />', { class :  "paginate_total" , text : oPaging.iTotalPages });                  $(nPaging)            .append(nFirst)            .append(nPrevious)            .append(nPageTxt)            .append(nPageNumBox)            .append(nPageOf)            .append(nTotalPages)            .append(nNext)            .append(nLast);           nFirst.click(function () {            if( $(this).hasClass("disabled") )                return;            oSettings.oApi._fnPageChange(oSettings, "first");            fnCallbackDraw(oSettings);        }).bind('selectstart', function () { return false; });           nPrevious.click(function () {            if( $(this).hasClass("disabled") )                return;            oSettings.oApi._fnPageChange(oSettings, "previous");            fnCallbackDraw(oSettings);        }).bind('selectstart', function () { return false; });           nNext.click(function () {            if( $(this).hasClass("disabled") )                return;            oSettings.oApi._fnPageChange(oSettings, "next");            fnCallbackDraw(oSettings);        }).bind('selectstart', function () { return false; });           nLast.click(function () {            if( $(this).hasClass("disabled") )                return;            oSettings.oApi._fnPageChange(oSettings, "last");            fnCallbackDraw(oSettings);        }).bind('selectstart', function () { return false; });           nPageNumBox.change(function () {            var pageValue = parseInt($(this).val(), 10) - 1 ; // -1 because pages are 0 indexed, but the UI is 1            var oPaging = oSettings.oInstance.fnPagingInfo();                         if(pageValue === NaN || pageValue<0 ){                pageValue = 0;            }else if(pageValue >= oPaging.iTotalPages ){                pageValue = oPaging.iTotalPages -1;            }            oSettings.oApi._fnPageChange(oSettings, pageValue);            fnCallbackDraw(oSettings);        });       },          "fnUpdate": function (oSettings, fnCallbackDraw) {        if (!oSettings.aanFeatures.p) {            return;        }                 var oPaging = oSettings.oInstance.fnExtStylePagingInfo();           /* Loop over each instance of the pager */        var an = oSettings.aanFeatures.p;         $(an).find('span.paginate_total').html(oPaging.iTotalPages);        $(an).find('.pageinate_input_box').val(oPaging.iPage+1);                         $(an).each(function(index,item) {             var $item = $(item);                        if (oPaging.iPage == 0) {                var prev = $item.find('span.paginate_button.first').add($item.find('span.paginate_button.previous'));                prev.addClass("disabled");            }else {                var prev = $item.find('span.paginate_button.first').add($item.find('span.paginate_button.previous'));                prev.removeClass("disabled");            }               if (oPaging.iPage+1 == oPaging.iTotalPages) {                var next = $item.find('span.paginate_button.last').add($item.find('span.paginate_button.next'));                next.addClass("disabled");            }else {                var next = $item.find('span.paginate_button.last').add($item.find('span.paginate_button.next'));                next.removeClass("disabled");            }        });    }};

要使用这个插件只要在你的表格中属性中加上

 "sPaginationType": "extStyle"

导入对应的js就可以了

还会在完善的

0 0