可数据分页“下一步”显示记录“全部”时启用。如何禁用？ [英] Datatable Pagination "Next" enabled when showing records "All".How to disable it?

问题描述

目前我正在使用datatable插件1.9.4。以下是datatable初始化代码：

  oTable = $（'＃tablename'）。dataTable（{
aLengthMenu ：[
 [5，15，20，-1]，
 [5，15，20，全部] //每页更改值
]，
 
sPaginationType：bootstrap，
oLanguage：{sLengthMenu：_MENU_每页记录，
sSearch：搜索记录：，
 o分页：{
sPrevious：Prev，
sNext：Next
} 
}，
}）; 
  

问题：

，15,20条记录Next被禁用，但是当我试图显示All时，Next仍然被启用。

解决方案

这是您链接更新的固定代码的jsfiddle http://jsfiddle.net/tNXnB/6/

  / *设置DataTables初始化的默认值* / 
 $ .extend（true，$ .fn.dataTable .defaults，{
sDom：<'row'<'col-xs-6'l><'col-xs-6'f> r> t<'row'< 
sPaginationType：bootstrap，
oLanguage：{
sLengthMenu ：_MENU_每页的记录
} 
}）; 
 
 
 
 
 / *默认类修改* / 
 $ .extend（$ .fn.dataTableExt.oStdClasses，{
sWrapper ：dataTables_wrapper form-inline，
sFilterInput：form-control input-sm，
sLengthSelect：form-control input-sm
}）; 
 
 
 / *获取分页信息的API方法* / 
 $ .fn.dataTableExt.oApi.fnPagingInfo = 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）
}; 
}; 
 
 
 / * Bootstrap样式分页控件* / 
 $ .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 =prev disabled>< a href =＃>& larr;'+ oLang.sPrevious +'< / a>< / li>'+ 
'< li class =next disable d>< a href =＃>'+ oLang.sNext +'& rarr; < / a>< / li>'+ 
'< / ul>'
） 
 var els = $（'a'，nPaging）; 
 $（els [0]）。bind（'click.DT'，{action：previous}，fnClickHandler）; 
 $（els [1]）。bind（'click.DT'，{action：next}，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 ++）{
 //删除中间元素
 $（'li ：gt（0）'，an [i]）。filter（'：not（：last）'）。 
 
 //为（j = iStart; j = iEnd; j ++）添加新的列表项及其事件处理程序
 {
 sClass =（j == oPaging.iPage +1）？ 'class =active'：''; 
 $（'< li'+ sClass +'>< a href =＃>'+ j +'< / a>< / li>'）
 .insertBefore （'li：last'，an [i]）[0]）
 .bind（'click'，function（e）{
 e.preventDefault（）; 
 oSettings._iDisplayStart = （parseInt（$（'a'，this）.text（），10）-1）* oPaging.iLength; 
 fnDraw（oSettings）; 
}）; 
} 
 
 //从静态元素添加/删除禁用的类
 if（oPaging.iPage === 0）{
 $（'li：first' ，an [i]）。addClass（'disabled'）; 
} else {
 $（'li：first'，an [i]）。removeClass（'disabled'）; 
} 
 
 if（oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0）{
 $（'li：last'，an [i]）。addClass（'disabled'）; 
} else {
 $（'li：last'，an [i]）。removeClass（'disabled'）; 
} 
} 
} 
} 
}）; 
 
 
 / * 
 * TableTools引导兼容性
 *必需TableTools 2.1+ 
 * / 
 if（$ .fn.DataTable.TableTools ）{
 //设置TableTools使用的类适用于Bootstrap的类
 $ .extend（true，$ .fn.DataTable.TableTools.classes，{
container：DTTT btn-group，
buttons：{
normal：btn btn-default，
disabled：disabled
}，
 collection：{
container：DTTT_dropdown dropdown-menu，
buttons：{
normal：，
disabled 
} 
}，
print：{
info：DTTT_print_info modal
}，
select：{
 row：active
} 
}）; 
 
 //使集合使用引导兼容的下拉列表
 $ .extend（true，$ .fn.DataTable.TableTools.DEFAULTS.oTags，{
collection：{ 
container：ul，
button：li，
班轮：a
} 
}）; 
} 
  

这是为twitter引导3.0 css，完整的数据表twitter bootstrap 3代码可以在这里找到 https://github.com/ DataTables / Plugins / blob / master / integration / bootstrap / 3 / index.html

Currently am working on datatable plugin 1.9.4. Below is datatable intialization code:

oTable = $('#tablename').dataTable({
      "aLengthMenu": [
              [5, 15, 20, -1],
              [5, 15, 20, "All"] // change per page values here
          ],

      "sPaginationType": "bootstrap",
      "oLanguage": {    "sLengthMenu": "_MENU_ records per page",
          "sSearch" : "Search records:",
          "oPaginate": {
              "sPrevious": "Prev",
              "sNext": "Next"
          }
      },
 });

Problem:

When Selecting show 5,15,20 records "Next" is disabled but when i tried to show "All" the Next is still enabled.

解决方案

Here is that jsfiddle you linked updated with the fixed code http://jsfiddle.net/tNXnB/6/

    /* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
        "sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
                "sLengthMenu": "_MENU_ records per page"
        }
} );




/* Default class modification */
$.extend( $.fn.dataTableExt.oStdClasses, {
        "sWrapper": "dataTables_wrapper form-inline",
        "sFilterInput": "form-control input-sm",
        "sLengthSelect": "form-control input-sm"
} );


/* 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":          oSettings._iDisplayLength === -1 ?
                        0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
                "iTotalPages":    oSettings._iDisplayLength === -1 ?
                        0 : 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).append(
                                '<ul class="pagination">'+
                                        '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
                                        '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
                                '</ul>'
                        );
                        var els = $('a', nPaging);
                        $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
                        $(els[1]).bind( 'click.DT', { action: "next" }, 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(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: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:first', an[i]).addClass('disabled');
                                } else {
                                        $('li:first', an[i]).removeClass('disabled');
                                }

                                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
                                        $('li:last', an[i]).addClass('disabled');
                                } else {
                                        $('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 btn-default",
                        "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"
                }
        } );
}

This is for twitter bootstrap 3.0 css, the full repo of datatables twitter bootstrap 3 code can be found here https://github.com/DataTables/Plugins/blob/master/integration/bootstrap/3/index.html

这篇关于可数据分页“下一步”显示记录“全部”时启用。如何禁用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！